Песочница HTML, CSS и JavaScript

Как пользоваться

1. Переключайтесь кнопками между редакторами HTML, CSS и JavaScript и пишите код.
2. Предпросмотр обновляется после паузы при вводе; можно отключить автоматический запуск и нажимать «Запустить».
3. Проверьте вывод и ошибки в консоли, затем нажмите «Скачать HTML».

Описание параметров

Песочница

Предпросмотр запускается в изолированной песочнице без доступа к cookies или хранилищу сайта и без возможности открывать диалоги.

Консоль

Показывает вывод console.log, warn и error, необработанные ошибки с номерами строк и хранит последние 200 записей.

Скачивание

Объединяет три части в один HTML-файл: стили помещаются в style, а скрипт — в конец body.

Как собирается страница

Три редактора объединяются в один документ в таком порядке. Тот же макет вы получите при нажатии «Скачать HTML», за исключением того, что небольшой скрипт, который выводит данные консоли на страницу под предпросмотром, в загрузку не включается.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

Поскольку скрипт идёт после вашего HTML, вы можете сразу использовать document.getElementById, не дожидаясь загрузки страницы. В редакторе HTML пишите только то, что должно находиться внутри body, а не сами теги html, head или body. Предпросмотр — это iframe, которому разрешено только выполнять скрипты, поэтому диалоги alert и доступ к файлам cookie этого сайта заблокированы.

Часто задаваемые вопросы

Конфиденциальность

Этот инструмент работает полностью в браузере. Ваши файлы и текст обрабатываются на вашем устройстве и никогда не загружаются на наши серверы.