Команда Debugger
Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:
function hello(name) {
let phrase = `Привет, ${name}!`;
debugger; // <-- здесь выполнение прерывается
say(phrase);
}Способ удобен тем, что можно продолжить работать в редакторе кода без необходимости переключения в браузер для выставления точки останова.
Остановимся и оглядимся
В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd+R (Mac).
Выполнение прервётся на четвёртой строчке:
Чтобы понять, что происходит в коде, щёлкните по стрелочкам справа:
Watchпоказывает текущие значения выражений.Нажмите на+и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.Call Stackпоказывает последовательность вызовов функций.В нашем примере отладчик работает с функциейhello(), вызванной скриптом из файлаindex.html(там нет функции, поэтому вызов «анонимный»).При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.Scopeпоказывает текущие переменные.ВLocalотображаются локальные переменные функций, а их значения подсвечены в исходном коде.ВGlobalперечисляются глобальные переменные (т.е. объявленные за пределами функций).Не обращайте пока внимание на ключевое словоthis– его мы изучим чуть позже.
Пошаговое выполнение скрипта
А теперь давайте пошагаем по нашему коду.
В правой части панели для этого есть несколько кнопок. Рассмотрим их. – продолжить выполнение. Быстрая клавиша – F8.
Возобновляет выполнение кода. Если больше нет точек останова, отладчик прекращает работу и позволяет приложению работать дальше.
Вот, что мы увидим, кликнув на неё:
Выполнение кода возобновилось, дошло до другой точки останова внутри say(), и отладчик снова приостановил выполнение. Обратите внимание на пункт «Call stack» справа: в списке появился ещё один вызов. Мы теперь внутри функции say(). – сделать шаг (выполнить следующую команду), не заходя в функцию. Быстрая клавиша – F10.
Если мы нажмём на неё – будет вызван alert. Важно: на месте alert может быть любая другая функция, выполнение просто перешагнёт через неё, полностью игнорируя её содержимое. – сделать шаг. Быстрая клавиша – F11.
В отличие от предыдущего примера, здесь мы «заходим» во вложенные функции и шаг за шагом проходим по скрипту. – продолжить выполнение до завершения текущей функции. Быстрая клавиша – Shift+F11.
Выполнение кода остановится на самой последней строчке текущей функции. Этот метод применяется, когда мы случайно нажали и зашли в функцию, но нам она неинтересна и мы как можно скорее хотим из неё выбраться. – активировать/деактивировать все точки останова.
Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова. – разрешить/запретить остановку выполнения в случае возникновения ошибки.
Если опция включена и инструменты разработчика открыты, любая ошибка в скрипте приостанавливает выполнение кода, что позволяет его проанализировать. Поэтому если скрипт завершается с ошибкой, открываем отладчик, включаем эту опцию, перезагружаем страницу и локализуем проблему.Continue to here
Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).
Этот метод используется, когда нам нужно продвинуться на несколько шагов вперёд до нужной строки, но лень выставлять точки останова.
Логирование
Если нужно что-то вывести в консоль из кода, применяется функция console.log.
К примеру, выведем в консоль значения от нуля до четырёх:
// чтобы увидеть результат, сначала откройте консоль
for (let i = 0; i < 5; i++) {
console.log("value,", i);
}Обычный пользователь сайта не увидит такой вывод, так как он в консоли. Напомним, что консоль можно открыть через инструменты разработчика – выберите вкладку «Консоль» или нажмите Esc, находясь в другой вкладке – консоль откроется в нижней части интерфейса.
Если правильно выстроить логирование в приложении, то можно и без отладчика разобраться, что происходит в коде.
Итого
Приостановить выполнение скрипта можно тремя способами:
- Точками останова.
- Использованием в коде команды
debugger. - При ошибке (если инструменты разработчика открыты и опция включена).
При остановке мы можем отлаживать – проанализировать переменные и пошагово пройти по процессу, что поможет отыскать проблему.
Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.
Для простой отладки вполне достаточно сведений из этой главы, но в дальнейшем рекомендуем вам изучить официальное руководство, если вы собираетесь разрабатывать для браузеров.
И, конечно, вы можете просто покликать в разных местах инструментов разработчика. Пожалуй, это наискорейший способ ими овладеть. Не забывайте про правый клик мыши и контекстные меню!
Практика
Щит и меч.