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

Kayce Basques

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

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

Обзор

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

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

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

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

   

   Рисунок 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 консольных утилит, чтобы изучить все удобные функции.