Песочница кода
Онлайн-песочница HTML, CSS и JavaScript с живым предпросмотром, редактором с номерами строк и перехваченной консолью. Мгновенно тестируйте фрагменты и скачивайте результат в один HTML-файл — полностью в браузере.
Что такое песочница кода?
Песочница кода — это среда, где вы пишете HTML, CSS и JavaScript и сразу видите результат рендеринга. Эта добавляет перехват консоли, редакторы с номерами строк и возможность скачать работу одним HTML-файлом.
Как работает живой предпросмотр?
Три панели кода объединяются в полный HTML-документ и рендерятся внутри изолированного iframe. При включённом автозапуске предпросмотр обновляется примерно через полсекунды после остановки набора; иначе нажмите «Запустить».
Что показывает панель консоли?
Всё, что страница выводит через console.log, console.info, console.warn и console.error, а также ошибки времени выполнения и необработанные отказы Promise с номерами строк. Очищается при каждом запуске.
Сохранится ли мой код при перезагрузке страницы?
Да. Черновик всех трёх панелей хранится локально в браузере и восстанавливается при следующем визите. «Сбросить» возвращает исходный демо-код, а очистка данных сайта удаляет черновик.
Предпросмотр изолирован и безопасен?
Предпросмотр выполняется в изолированном iframe без same-origin доступа: тестируемые скрипты не могут читать эту страницу и её cookies. Тем не менее запускайте только доверенный код — он исполняется в вашем браузере.
Можно ли скачать свой эксперимент?
Да. «Скачать .html» сохраняет текущие HTML, CSS и JavaScript, объединённые в один самодостаточный файл, который можно открыть в любом браузере или поделиться им.
Что можно выполнять в панели JavaScript?
Стандартный браузерный JavaScript: манипуляции с DOM, события, canvas, fetch к публичным API (в рамках их CORS-правил) и любые библиотеки, вставленные инлайн. Модули и npm-пакеты не подключаются.
Нужна ли песочнице связь с интернетом?
Только чтобы загрузить саму страницу. Редактирование, предпросмотр и перехват консоли после этого работают локально, и ваш код никуда не отправляется.
Как использовать Песочница кода
Эта песочница объединяет ваш HTML, CSS и JavaScript в изолированный живой предпросмотр полностью в вашем браузере, с панелью консоли, перехватывающей логи и ошибки. Черновик сохраняется локально, чтобы вы продолжили с того места, где остановились.
- Редактируйте панели HTML, CSS и JavaScript — в каждом редакторе есть нумерация строк и подсветка синтаксиса.
- С включённым «Автозапуском» предпросмотр обновляется автоматически по мере набора; иначе нажмите «Запустить» (или выключите Автозапуск и запускайте вручную).
- Следите за панелью «Консоль» под предпросмотром: вывод console.log, предупреждения, ошибки и необработанные исключения появляются там с номерами строк.
- Нажмите «Сбросить», чтобы вернуться к встроенной демонстрации, или «Скачать .html», чтобы сохранить всё в один самодостаточный файл.
- С помощью «Открыть в новом окне» можно посмотреть текущий документ в полный размер в отдельной вкладке.
Консоль очищается при каждом запуске, поэтому смело вставляйте console.log при отладке — вывод появляется мгновенно, без открытия настоящей консоли браузера.
Похожие инструменты
- Форматировщик JavaScript Бесплатный онлайн форматировщик JavaScript и форматтер кода. Мгновенно преобразуйте минифицированный JS в чистый, читаемый код с правильными отступами и настраиваемыми параметрами.
- Минификатор JS Мгновенная минификация JavaScript. Удалите пробелы, комментарии и оптимизируйте JS для ускорения загрузки.
- Тестер регулярных выражений Тестируйте и отлаживайте регулярные выражения с совпадением в реальном времени и захватом групп.
- Предпросмотр Markdown Бесплатный онлайн-редактор Markdown с живым предпросмотром. Пишите, рендерите и экспортируйте Markdown с полной поддержкой GFM.
- Проверка хеша Вычисляйте и проверяйте хеши MD5, SHA-1, SHA-256, SHA-512 локально
- Калькулятор Chmod Бесплатный онлайн-калькулятор chmod для визуализации и вычисления прав доступа Linux с помощью флажков. Мгновенное преобразование между числовой (755, 644) и символической нотацией (rwxr-xr-x). Поддержка специальных прав: setuid, setgid, sticky bit.
- Таблица ASCII Полная справочная таблица кодировки ASCII с десятичными, шестнадцатеричными, восьмеричными, двоичными кодами, HTML-сущностями и описаниями символов. Мгновенный поиск и фильтрация.
- Hex-просмотрщик Просмотр содержимого файлов в шестнадцатеричном формате с поиском, навигацией по смещению и виртуальной прокруткой