Песочница JavaScript: запуск JS, HTML и CSS
Пишите и запускайте JavaScript, HTML и CSS в изолированном iframe с панелью живого вывода консоли и предпросмотром. Доступ к сети по умолчанию блокируется мета-тегом CSP; его можно включить с видимым предупреждением. Используйте режим автозапуска, чтобы выполнять код по ходу работы, или «Стоп/Сброс», чтобы пересоздать iframe и прервать бесконечный цикл. Стартовые примеры помогают начать.
Песочница JavaScript — это браузерное рабочее пространство для написания и запуска JavaScript, HTML и CSS. Редактор имеет отдельные вкладки JS, HTML и CSS, панель предпросмотра и панель живого вывода консоли, чтобы можно было изучать страницу и её вывод вместе. Используйте её, чтобы экспериментировать с коротким фрагментом или пробовать код без установки локальной среды разработки.
Код выполняется внутри изолированного iframe, настроенного с allow-scripts и без allow-same-origin. Мета-тег CSP по умолчанию блокирует доступ к сети; его можно включить, при этом интерфейс показывает видимое предупреждение. Режим автозапуска выполняет код по ходу работы. Если скрипт застрял в бесконечном цикле, «Стоп/Сброс» уничтожает и пересоздаёт iframe. Также включены стартовые примеры.
JavaScript, HTML и CSS играют разные роли на веб-странице: HTML структурирует контент, CSS управляет его представлением, а JavaScript добавляет поведение. Размещение их на отдельных вкладках упрощает проверку совместной работы этих частей, просмотр изменений в предпросмотре и проверку вывода в консоли.
Песочница JavaScript работает полностью в вашем браузере. Ваш ввод обрабатывается на вашем устройстве и не загружается, не сохраняется и не отправляется на сервер. Она работает офлайн после загрузки страницы и бесплатна. Разработчики и DevOps-инженеры могут использовать её для изучения кода, проверки поведения страницы или решения быстрой программной задачи с разных компьютеров.
Шаг 1: Откройте вкладки JS, HTML и CSS и введите код, который хотите опробовать. Используйте соответствующую вкладку для каждой части вашей страницы.
Шаг 2: Выберите, использовать ли режим автозапуска. Когда он включён, ваш код выполняется автоматически по ходу работы.
Шаг 3: Помните о защите сети по умолчанию: мета-тег CSP блокирует доступ к сети. Доступ к сети можно включить, при этом песочница показывает видимое предупреждение.
Шаг 4: Запустите ваш код и изучите предпросмотр и панель живого вывода консоли, чтобы увидеть результаты.
Шаг 5: Если код застрял в бесконечном цикле, используйте «Стоп/Сброс», чтобы уничтожить и пересоздать изолированный iframe.
Пример использования: Пробуйте фрагмент JavaScript без установки локальной среды разработки. Песочница выполняет ваш код в браузере и показывает живой вывод консоли.
Пример использования: Проверяйте, как HTML, CSS и JavaScript работают вместе, редактируя их на отдельных вкладках и просматривая предпросмотр.
Пример использования: Исследуйте поведение кода с помощью панели живого вывода консоли рядом с предпросмотром страницы.
Пример использования: Восстанавливайтесь после бесконечного цикла, используя «Стоп/Сброс» для уничтожения и пересоздания iframe.
Пример использования: Работайте над программной задачей с компьютера, где нет доступной локальной настройки.
Пример использования: Не отправляйте внутренний код или данные стороннему сервису: песочница обрабатывает ввод в вашем браузере.
Пример использования: Изучайте стартовые примеры, когда нужна отправная точка для экспериментов с JavaScript, HTML или CSS.