Нужно быстро проверить фрагмент JavaScript: как работает метод, что вернёт функция, почему выражение выдаёт не тот результат. Открывать консоль браузера и создавать файл ради пары строк — долго. Песочница JavaScript выполняет фрагмент кода и показывает вывод console.log, console.warn, console.error и ошибки с номерами строк. Код работает в изолированной песочнице: у него нет доступа к странице, cookie и хранилищам сайта и к сети. Бесконечный цикл не повесит вкладку — выполнение остановится по истечении времени.
В этой статье разберём, что доступно в песочнице, а что нет, почему setInterval не завершается сам, как работает ограничение времени и зачем нужна изоляция.
Что умеет песочница
Песочница JavaScript принимает код и выполняет его в изолированной среде.
| Параметр | Что делает |
|---|---|
| Код JavaScript | Фрагмент кода для выполнения |
| Ограничение времени | Сколько секунд может работать код |
| Выполнить | Запускает код |
| Остановить | Прерывает выполнение вручную |
| Вывод | console.log, console.warn, console.error, console.info, console.table |
| Ошибки | С номерами строк |
Можно использовать await на верхнем уровне. Горячие клавиши: Tab — отступ, Ctrl+Enter — запуск, Esc и затем Tab — выйти из поля.
Код не отправляется на сервер: всё выполняется в браузере.
Что доступно, а что нет
Изоляция — главная особенность песочницы. Код не имеет доступа к странице и её данным.
| Недоступно | Почему |
|---|---|
DOM страницы (document, window) |
Код не может менять страницу и читать её содержимое |
| Cookie | Нет доступа к сессии и данным сайта |
localStorage, sessionStorage |
Нет доступа к хранилищам |
Сетевые запросы (fetch, XMLHttpRequest, WebSocket) |
Код не может отправлять данные наружу |
| Загрузка скриптов | Нельзя подключить внешний код |
| Доступно | Что это |
|---|---|
| Язык целиком | Все возможности JavaScript |
| Таймеры | setTimeout, setInterval, clearInterval |
Promise и async/await |
Асинхронный код |
Math, Date, JSON, Intl |
Встроенные объекты |
crypto.getRandomValues |
Криптографический генератор случайных чисел |
| Другие встроенные объекты | Стандартная библиотека JavaScript |
Это значит: можно проверить логику, алгоритмы, работу с данными, асинхронный код — но нельзя обратиться к странице, cookie или сети.
Почему изоляция важна
Изоляция защищает и вас, и страницу.
| Риск | Как защищает песочница |
|---|---|
| Код меняет страницу | Нет доступа к DOM |
| Код крадёт cookie | Нет доступа к cookie |
| Код отправляет данные наружу | Нет доступа к сети |
| Код читает хранилища | Нет доступа к localStorage и sessionStorage |
| Код подключает чужой скрипт | Нет загрузки скриптов |
Даже если вставить подозрительный код, он не получит доступ к странице и её данным.
Бесконечный цикл и ограничение времени
Бесконечный цикл в обычной консоли может повесить вкладку. Здесь этого не произойдёт.
| Что происходит | Почему |
|---|---|
| Код выполняется в отдельном потоке (Web Worker) | Основной поток страницы не блокируется |
| По истечении времени поток уничтожается | Страница продолжает работать |
| Кнопка «Остановить» прерывает вручную | Не нужно ждать таймаута |
Ограничение времени можно выбрать. Если код не завершился за это время, он прерывается, а страница остаётся рабочей.
Почему setInterval не завершается сам
Это частая ситуация. Песочница ждёт, пока не останется запланированных таймеров.
| Ситуация | Что происходит |
|---|---|
setTimeout без повтора |
Завершается после срабатывания |
setInterval без clearInterval |
Работает до ограничения времени или до «Остановить» |
setInterval с clearInterval |
Завершается, когда интервал очищен |
Если в коде есть setInterval без clearInterval, песочница будет ждать, пока не истечёт время. Это не ошибка, а поведение таймеров: интервал планирует новые вызовы бесконечно.
Вывод console и ошибки
Песочница показывает вывод консоли и ошибки.
| Метод | Что показывает |
|---|---|
console.log |
Обычный вывод |
console.info |
Информационный вывод |
console.warn |
Предупреждение |
console.error |
Ошибка |
console.table |
Табличное представление данных |
Ошибки показываются с номерами строк — удобно находить место, где код сломался.
Зачем использовать песочницу
| Задача | Что даёт песочница |
|---|---|
| Проверка фрагмента | Быстро выполнить код без файла и консоли |
| Отладка | Увидеть вывод и ошибки с номерами строк |
| Обучение | Попробовать конструкции языка |
| Проверка алгоритма | Убедиться, что логика работает |
| Асинхронный код | Проверить Promise и async/await |
| Безопасность | Выполнить подозрительный код без риска для страницы |
Ограничения песочницы
- Нет DOM и сети. Код не может работать со страницей и отправлять запросы.
- Нет cookie и хранилищ. Нельзя проверить код, который зависит от сессии.
- Ограничение времени. Долгий код прерывается.
- Не заменяет полноценный рантайм. Для Node.js-специфичного кода нужна другая среда.
- Нет внешних библиотек. Подключить npm-пакет или CDN-скрипт нельзя.
Как пользоваться: пошагово
- Введите или вставьте код.
- Выберите ограничение времени.
- Нажмите «Выполнить» или Ctrl+Enter. Долгий код можно прервать кнопкой «Остановить».
Типичные ошибки
- Ожидать доступ к DOM.
documentиwindowнедоступны. Код не может менять страницу. - Пытаться сделать
fetch. Сеть недоступна. Запросы не выполнятся. - Забывать про
clearInterval.setIntervalбез очистки работает до ограничения времени. - Вставлять код, который ждёт внешнюю библиотеку. Подключить её нельзя.
- Ожидать, что код для Node.js сработает. Песочница — браузерная среда, а не Node.js.
- Игнорировать ограничение времени. Слишком короткое время прервёт полезный код, слишком длинное — задержит результат при ошибке.
Вопросы и ответы
Что недоступно в песочнице?
DOM страницы (document, window), cookie, localStorage, сетевые запросы (fetch, XMLHttpRequest, WebSocket), загрузка скриптов. Доступны язык целиком, таймеры, Promise и async/await, Math, Date, JSON, Intl, crypto.getRandomValues и другие встроенные объекты.
Что будет с бесконечным циклом?
Код выполняется в отдельном потоке (Web Worker). Когда истекает время, поток уничтожается, а страница продолжает работать.
Почему код с setInterval не завершается сам?
Песочница ждёт, пока не останется запланированных таймеров. Интервал без clearInterval работает до ограничения времени или до нажатия «Остановить».
Можно ли использовать await на верхнем уровне?
Да, песочница поддерживает await на верхнем уровне.
Отправляется ли код на сервер?
Нет, всё выполняется в браузере. Код никуда не отправляется.
Можно ли подключить внешнюю библиотеку?
Нет, загрузка скриптов недоступна. Можно использовать только встроенные объекты JavaScript.
Итог
Песочница JavaScript — инструмент для выполнения фрагмента JavaScript в изолированной среде. Она показывает вывод console.log, console.warn, console.error и ошибки с номерами строк, поддерживает await на верхнем уровне и прерывает долгий код по ограничению времени. Код не имеет доступа к странице, cookie, хранилищам и сети, поэтому проверка безопасна для любой страницы. Помните, что setInterval без clearInterval работает до лимита, и не ждите доступа к DOM — и песочница будет удобным местом для проверки идей.