Запустите JavaScript в консоли

Кейси Баски

В этом интерактивном руководстве показано, как запустить JavaScript в консоли Chrome DevTools . См. раздел «Начало регистрации сообщений» , чтобы узнать, как регистрировать сообщения на консоли. См . раздел «Начало работы с отладкой JavaScript» , чтобы узнать, как приостанавливать код JavaScript и выполнять его по одной строке за раз.

Консоль.

Рисунок 1 . Консоль .

Обзор

Консоль — это REPL , что означает чтение, оценку, печать и цикл. Он считывает код JavaScript, который вы вводите в него, оценивает ваш код, распечатывает результат вашего выражения , а затем возвращается к первому шагу.

Настройте инструменты разработчика

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

  1. Нажмите Command+Option+J (Mac) или Control+Shift+J (Windows, Linux, ChromeOS), чтобы открыть консоль прямо здесь, на этой самой странице.

    Это руководство слева и DevTools справа.

    Фигура 2 . Это руководство слева и DevTools справа.

Просмотр и изменение JavaScript или DOM страницы.

При создании или отладке страницы часто бывает полезно запускать инструкции в консоли , чтобы изменить внешний вид или работу страницы.

  1. Обратите внимание на текст в кнопке ниже.

  2. Введите document.getElementById('hello').textContent = 'Hello, Console!' в консоли , а затем нажмите Enter, чтобы оценить выражение. Обратите внимание, как меняется текст внутри кнопки.

    Как выглядит консоль после вычисления приведенного выше выражения.

    Рисунок 3 . Как выглядит консоль после вычисления приведенного выше выражения.

    Под кодом, который вы оценили, вы видите "Hello, Console!" . Вспомните 4 шага REPL: чтение, оценка, печать, цикл. После оценки вашего кода REPL печатает результат выражения. Итак, "Hello, Console!" должен быть результатом оценки document.getElementById('hello').textContent = 'Hello, Console!' .

Запуск произвольного JavaScript, не связанного со страницей.

Иногда вам просто нужна игровая площадка для кода, где вы можете протестировать некоторый код или опробовать новые функции JavaScript, с которыми вы не знакомы. Консоль — идеальное место для подобных экспериментов.

  1. Введите 5 + 15 в консоли. Результат 20 появится под вашим выражением (если только вычисление выражения не занимает слишком много времени).
  2. Нажмите Enter , чтобы оценить выражение. Консоль печатает результат выражения под вашим кодом. На рисунке 4 ниже показано, как должна выглядеть ваша консоль после вычисления этого выражения.

  3. Введите следующий код в консоль . Попробуйте напечатать его посимвольно, а не копировать.

    function add(a, b=20) {
  return a + b;
}

    Если вы не знакомы с синтаксисом b=20 см. определение значений по умолчанию для аргументов функции .

  4. Теперь вызовите функцию, которую вы только что определили.

    add(25);

    Как выглядит консоль после вычисления приведенных выше выражений.

    Рисунок 4 . Как выглядит консоль после вычисления приведенных выше выражений.

    add(25) оценивается как 45 , потому что, когда функция add вызывается без второго аргумента, b по умолчанию имеет значение 20 .

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

Следующие шаги

См. раздел «Запуск JavaScript» , чтобы узнать больше о функциях, связанных с запуском JavaScript в консоли.

DevTools позволяет приостановить выполнение сценария в середине его выполнения. Пока вы приостановлены, вы можете использовать консоль для просмотра и изменения window страницы или DOM в данный момент времени. Это обеспечивает мощный рабочий процесс отладки. Интерактивное руководство см. в разделе «Начало работы с отладкой JavaScript» .

Консоль также поддерживает набор спецификаторов формата. См. раздел Форматирование и оформление сообщений в консоли , чтобы изучить все методы форматирования и оформления сообщений консоли.

Помимо этого, Консоль также имеет набор удобных функций, упрощающих взаимодействие со страницей. Например:

  • Вместо того, чтобы вводить document.querySelector() для выбора элемента, вы можете ввести $() . Этот синтаксис основан на jQuery, но на самом деле это не jQuery. Это просто псевдоним document.querySelector() .
  • debug(function) фактически устанавливает точку останова в первой строке этой функции.
  • keys(object) возвращает массив, содержащий ключи указанного объекта.

См. Справочник по API консольных утилит , чтобы изучить все удобные функции.