Код выполняется только в вашем браузере, в изолированном фрейме без доступа к этому сайту. Код из присланной ссылки тоже запускается, поэтому сначала прочитайте его, если не доверяете источнику.
Онлайн-редактор HTML, CSS и JavaScript показывает страницу прямо во время набора, а под ней — консоль с выводом console.log и ошибками с номерами строк. Ничего не нужно устанавливать и регистрироваться: код сохраняется в браузере, ссылка для обмена содержит сам код, а всё вместе можно скачать одним файлом .html.
Как пользоваться
- Пишите HTML, CSS и JavaScript во вкладках. Если включено «Авто», результат перезагружается вскоре после окончания ввода; иначе нажмите «Запустить».
- console.log, warn, error, info и table появляются в консоли под результатом. У необработанных ошибок указана строка — нажмите, чтобы перейти к ней.
- Начните с шаблона: простая страница, анимация на canvas или пример с консолью JavaScript.
- Скопируйте ссылку (код сжимается прямо в неё) или скачайте всё одним файлом .html.
- Результат работает в изолированном iframe без доступа к этому сайту: он не видит ваши cookies и хранилище, ничего не загружается на сервер.
- Код сохраняется только в этом браузере. При открытии присланной ссылки загружается её код.
- Ссылки хранят код после #, поэтому он не попадает на сервер; очень длинный код даёт очень длинную ссылку, которую некоторые приложения обрезают.
- Если вставить целый HTML-документ, CSS попадёт в его head, а JavaScript — перед </body>.
Для чего он нужен
Проверьте CSS-приём до переноса в проект, воспроизведите баг в нескольких строках для коллеги или форума, сделайте прототип компонента, объясните основы веба или попробуйте API через fetch. В каждой вкладке свой язык, а результат перезагружается вскоре после того, как вы перестали печатать; для тяжёлых скриптов отключите автозапуск и запускайте вручную.
console.log, info, warn, error и console.table выводятся под результатом, а необработанные ошибки и отклонённые промисы показываются с номером строки — нажмите, чтобы перейти к коду.
Как устроена песочница
Страница выполняется в изолированном iframe без доступа к тому же источнику: она не может прочитать хранилище и cookie этого сайта, а бесконечный цикл или падение затрагивают только превью. Сетевые запросы из вашего кода уходят из браузера, как у любой веб-страницы; больше ничего не отправляется. Современный JavaScript с async/await и вызовами fetch работает как на обычной странице.
Обмен и сохранение
Редактор хранит последний код в этом браузере. Ссылка для обмена сжимает все три вкладки в часть URL после #, которую браузеры никогда не отправляют на сервер; очень длинный код даёт очень длинные ссылки, которые некоторые мессенджеры обрезают. Скачайте .html, чтобы получить самостоятельный файл, открывающийся в любом браузере.
Частые вопросы
Нужна ли учётная запись, чтобы сохранить код?
Нет. Код автоматически сохраняется в этом браузере. Чтобы перенести его на другое устройство или поделиться, скопируйте ссылку или скачайте файл .html.
Могут ли другие увидеть мой код?
Только если вы отправите им ссылку. Код хранится в браузере и в части ссылки после #, которая не передаётся ни на какой сервер.
Можно ли подключать библиотеки вроде React или jQuery?
Да. Добавьте во вкладке HTML тег script или link на CDN, как на обычной странице. Превью загрузит библиотеку из сети при запуске.
Почему в моём коде не работают localStorage и cookie?
Превью выполняется в изолированном iframe без доступа к тому же источнику, поэтому хранилище и cookie там заблокированы или отделены. Так редактор остаётся безопасным; такой код проверяйте на обычной странице.
Как увидеть ошибки в JavaScript?
Необработанные ошибки и неудавшиеся промисы появляются в консоли под результатом с номером строки. Нажмите на сообщение, чтобы перейти к этой строке во вкладке JS.
Что будет, если вставить целый HTML-документ?
Редактор сохранит ваш документ, а CSS вставит в head и JavaScript — прямо перед </body>, так что готовые страницы работают как есть.