В этом интерактивном руководстве показано, как запустить JavaScript в консоли Chrome DevTools . См. раздел «Начало регистрации сообщений» , чтобы узнать, как регистрировать сообщения на консоли. См. раздел «Начало работы с отладкой JavaScript» , чтобы узнать, как приостанавливать код JavaScript и выполнять его по одной строке за раз.
Рисунок 1 . Консоль .
Обзор
Консоль — это REPL , что означает чтение, оценку, печать и цикл. Он считывает код JavaScript, который вы вводите в него, оценивает ваш код, распечатывает результат вашего выражения , а затем возвращается к первому шагу.
Настройте инструменты разработчика
Это руководство разработано таким образом, чтобы вы могли открыть демо-версию и опробовать все рабочие процессы самостоятельно. Когда вы физически следите за действиями, вы с большей вероятностью запомните рабочие процессы позже.
Нажмите Command+Option+J (Mac) или Control+Shift+J (Windows, Linux, ChromeOS), чтобы открыть консоль прямо здесь, на этой самой странице.
Рисунок 2 . Это руководство слева и DevTools справа.
Просмотр и изменение JavaScript или DOM страницы.
При создании или отладке страницы часто бывает полезно запускать инструкции в консоли , чтобы изменить внешний вид или работу страницы.
Обратите внимание на текст в кнопке ниже.
Введите
document.getElementById('hello').textContent = 'Hello, Console!'
в консоли , а затем нажмите Enter, чтобы оценить выражение. Обратите внимание, как меняется текст внутри кнопки.Рисунок 3 . Как выглядит консоль после вычисления приведенного выше выражения.
Под кодом, который вы оценили, вы видите
"Hello, Console!"
. Вспомните 4 шага REPL: чтение, оценка, печать, цикл. После оценки вашего кода REPL печатает результат выражения. Итак"Hello, Console!"
должен быть результатом оценкиdocument.getElementById('hello').textContent = 'Hello, Console!'
.
Запуск произвольного JavaScript, не связанного со страницей.
Иногда вам просто нужна игровая площадка для кода, где вы можете протестировать некоторый код или опробовать новые функции JavaScript, с которыми вы не знакомы. Консоль — идеальное место для подобных экспериментов.
- Введите
5 + 15
в консоли. Результат20
появится под вашим выражением (если только вычисление выражения не занимает слишком много времени). - Нажмите
Enter
чтобы оценить выражение. Консоль печатает результат выражения под вашим кодом. На рисунке 4 ниже показано, как должна выглядеть ваша консоль после вычисления этого выражения. Введите следующий код в консоль . Попробуйте напечатать его посимвольно, а не копировать.
function add(a, b=20) { return a + b; }
Если вы не знакомы с синтаксисом
b=20
, см. определение значений по умолчанию для аргументов функции .Теперь вызовите функцию, которую вы только что определили.
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 консольных утилит , чтобы изучить все удобные функции.