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

Kayce Basques

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

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

Обзор

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

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

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

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

   

   Рисунок 2. Слева — это руководство, справа — инструменты разработчика.

Просматривайте и изменяйте 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;
   }
   

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

   add(25);
   

   

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

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

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

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

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

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

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

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

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

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