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

Что делает инструмент

Эта песочница — небольшой онлайн-редактор кода для фронтенд-экспериментов. Пишите HTML, CSS и JavaScript в трёх вкладках с подсветкой синтаксиса, и предпросмотр обновляется по мере ввода — как в CodePen или JSFiddle, только без аккаунта. Встроенная консоль показывает вывод console.log() и ошибки с номером строки в вашем JavaScript, так что отлаживать можно, не открывая инструменты разработчика. Это удобно на телефоне или на чужом компьютере.

Используйте её, чтобы попробовать CSS-раскладку, воспроизвести баг для коллеги, проверить фрагмент со Stack Overflow, поучить новичка или набросать быстрый прототип.

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

1. Пишите во вкладках HTML, CSS и JS или нажмите Пример, чтобы начать с небольшого демо-счётчика. Точка на вкладке означает, что в ней есть код.
2. Предпросмотр запускается автоматически через 0,6 секунды после того, как вы перестали печатать. Для тяжёлых скриптов выключите Автозапуск и нажимайте Запустить или Ctrl+Enter, когда будете готовы.
3. Следите за Консолью: там логи, предупреждения и ошибки, самая новая строка всегда сверху. Объекты, массивы, Map, Set и DOM-элементы показываются в компактном и читаемом виде.
4. Поделиться — чтобы отправить код кому-нибудь. Скачать ZIP сохраняет index.html, style.css и script.js отдельными файлами, готовыми для настоящего проекта; Скачать HTML сохраняет всё в один файл index.html, который открывается в любом браузере.

Ваш код хранится в этом браузере, поэтому он будет на месте, когда вы вернётесь. Клавиша Tab делает отступ в два пробела.

Пример

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Каждый клик добавляет строку в консоль. Если опечататься в имени, консоль покажет красную ошибку ReferenceError со строкой во вкладке JS, где она произошла.

Как это работает

Три панели объединяются в один HTML-документ и загружаются в iframe с атрибутом sandbox, поэтому код не может читать cookie и хранилище этого сайта. Небольшой скрипт, добавленный во фрейм, пересылает вызовы console и необработанные ошибки на страницу, и ничего не покидает ваше устройство.