Пісочниця 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, тож код не може читати cookies чи сховище цього сайту. Крихітний скрипт, доданий у фрейм, пересилає виклики console і неперехоплені помилки на сторінку, і нічого не залишає ваш пристрій.