Что такое средство запуска JavaScript?

JavaScript - это язык, который выполняется в каждом веб-браузере, и большинство разработчиков тестируют небольшие фрагменты кода, вставляя их в консоль браузера. Средство запуска JavaScript выполняет ту же задачу на отдельной странице. Вы пишете несколько строк кода, запускаете их и смотрите, что код выводит с помощью console.log. Это быстрый способ проверить поведение функции, опробовать идею или узнать, что возвращает метод, не создавая проект.

Описание инструмента

Этот инструмент выполняет JavaScript в вашем браузере и показывает всё, что код записывает в консоль. Введите или вставьте код слева и нажмите «Запустить» либо нажмите Ctrl+Enter (Cmd+Enter на Mac). Результат появится справа: по одной строке для каждого вызова console, а предупреждения и ошибки будут выделены цветом. Ничего не выполняется, пока вы не запустите код, поэтому его можно свободно редактировать.

Код выполняется в Web Worker - фоновой среде выполнения вашего браузера. Поэтому скрипт, который никогда не завершается, не зависнет и не заблокирует страницу: нажмите «Остановить», и он будет завершён. Ваш код не отправляется на сервер.

Примеры

Вывод вычисления и объекта:

const prices = [4.5, 12, 7.25];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log("Итого:", total);
console.log({ count: prices.length, average: total / prices.length });
JavaScript

Результат:

Итого: 23.75
{ count: 3, average: 7.916666666666667 }

Ожидание асинхронной операции с помощью await на верхнем уровне:

const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
console.log("Начало");
await sleep(1000);
console.log("Через одну секунду");
JavaScript

Возможности

  • Отображает результаты console.log, info, debug, warn и error, выделяя предупреждения и ошибки цветом
  • Форматирует объекты, массивы, карты, множества, классы, даты и ошибки, а также обрабатывает циклические ссылки
  • Поддерживает заполнители %s, %d, %i, %f, %j и %o в первом аргументе
  • Поддерживает console.group, count, time, assert, dir и clear
  • Выполняет асинхронный код, включая await на верхнем уровне, таймеры и промисы
  • Отображает в результате синтаксические ошибки, неперехваченные ошибки и необработанные отклонения промисов
  • Кнопка «Остановить» мгновенно завершает скрипт, даже если он застрял в бесконечном цикле
  • Параметр «Сохранять логи», включённый по умолчанию, сохраняет результаты предыдущих запусков, чтобы можно было сравнивать результаты
  • Наведите курсор на строку в результате, чтобы увидеть дату и время её вывода
  • Скопируйте весь результат, очистите его кнопкой «Очистить» или скачайте код в виде файла

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

Когда вы нажимаете «Запустить», инструмент запускает новый Web Worker и передаёт ему ваш код. Внутри worker-окружения методы console заменяются, поэтому каждый вызов преобразуется в текст и отправляется обратно на страницу. Ваш код оборачивается в асинхронную функцию, благодаря чему await можно использовать на верхнем уровне.

Строка состояния под результатом показывает «Выполняется», пока ваш код выполняется или запущенный вами таймер всё ещё ожидает завершения. Вызов setInterval поддерживает выполнение до тех пор, пока вы не очистите его или не нажмёте «Остановить». Каждый запуск начинается в новом worker-окружении, поэтому переменные из предыдущего запуска никогда не сохраняются. Результат сохраняется между запусками, пока установлен флажок «Сохранять логи». Снимите этот флажок, чтобы каждый запуск начинался с пустого результата, или нажмите «Очистить», чтобы очистить его в любой момент.

Советы

  • Используйте console.log, а не последнее выражение: значение последней строки не выводится, поэтому отдельное выражение 1 + 2 ничего не покажет
  • У worker-окружения нет страницы, поэтому document, window и другие объекты DOM недоступны. Используйте self для обращения к глобальной области видимости
  • Статические инструкции import не работают в коде такого типа
  • Результат сохраняет последние 1000 строк, а отдельная строка обрезается после 10000 символов
  • Запросы, выполненные с помощью fetch, отправляются из вашего браузера как любые другие запросы и подпадают под обычные правила междоменных запросов
  • Запускайте только тот код, которому доверяете, как и в консоли браузера