Прежде чем писать более сложный код, давайте поговорим об отладке.
Отладка — это процесс поиска и исправления ошибок в сценарии. Все современные браузеры и большинство других сред поддерживают инструменты отладки — специальный пользовательский интерфейс в инструментах разработчика, который значительно упрощает отладку. Это также позволяет шаг за шагом отслеживать код, чтобы увидеть, что именно происходит.
Здесь мы будем использовать Chrome, поскольку у него достаточно функций, большинство других браузеров имеют аналогичный процесс.
Ваша версия Chrome может выглядеть немного иначе, но все равно должно быть очевидно, что там.
Откройте пример страницы в Chrome.
Включите инструменты разработчика с помощью F12 (Mac: Cmd + Opt + I ).
Выберите панель Sources .
Вот что вам следует увидеть, если вы делаете это впервые:
Кнопка переключения открывает вкладку с файлами.
Давайте щелкнем по нему и выберем hello.js в древовидном представлении. Вот что должно появиться:
Панель «Источники» состоит из 3 частей:
На панели «Навигатор файлов» перечислены файлы HTML, JavaScript, CSS и другие файлы, включая изображения, прикрепленные к странице. Здесь также могут появиться расширения Chrome.
На панели «Редактор кода» отображается исходный код.
Панель «Отладка JavaScript» предназначена для отладки, мы скоро ее рассмотрим.
Теперь вы можете нажать на тот же переключатель еще раз, чтобы скрыть список ресурсов и освободить место для кода.
Если нажать Esc , то внизу откроется консоль. Мы можем вводить туда команды и нажимать Enter для выполнения.
После выполнения оператора его результат показан ниже.
Например, здесь 1+2 дает 3 , а вызов функции hello("debugger") ничего не возвращает, поэтому результат undefined :
Давайте посмотрим, что происходит в коде страницы-примера. В hello.js щелкните строку номер 4 . Да, именно по 4 цифре, а не по коду.
Поздравляем! Вы установили точку останова. Пожалуйста, также нажмите на номер строки 8 .
Это должно выглядеть так (синее место — то место, где нужно нажать):
Точка останова — это точка кода, в которой отладчик автоматически приостанавливает выполнение JavaScript.
Пока выполнение кода приостановлено, мы можем проверять текущие переменные, выполнять команды в консоли и т. д. Другими словами, мы можем его отлаживать.
Список точек останова мы всегда можем найти на правой панели. Это полезно, когда у нас много точек останова в разных файлах. Это позволяет нам:
Быстро перейдите к точке останова в коде (нажав на нее на правой панели).
Временно отключите точку останова, сняв с нее флажок.
Удалите точку останова, щелкнув правой кнопкой мыши и выбрав «Удалить».
…И так далее.
Условные точки останова
Щелчок правой кнопкой мыши по номеру строки позволяет создать условную точку останова. Он срабатывает только тогда, когда данное выражение, которое вы должны предоставить при его создании, является правдивым.
Это удобно, когда нам нужно остановиться только для определенного значения переменной или для определенных параметров функции.
Мы также можем приостановить выполнение кода, используя в нем команду debugger , например:
функция привет (имя) {
let фраза = `Привет, ${name}!`;
отладчик; // <-- здесь отладчик останавливается
сказать (фраза);
}Такая команда работает только тогда, когда открыты инструменты разработки, иначе браузер ее игнорирует.
В нашем примере hello() вызывается во время загрузки страницы, поэтому самый простой способ активировать отладчик (после установки точек останова) — перезагрузить страницу. Итак, давайте нажмем F5 (Windows, Linux) или Cmd + R (Mac).
Когда установлена точка останова, выполнение приостанавливается на 4-й строке:
Откройте раскрывающиеся информационные списки справа (отмечены стрелками). Они позволяют изучить текущее состояние кода:
Watch – показывает текущие значения для любых выражений.
Вы можете нажать плюс + и ввести выражение. Отладчик покажет его значение, автоматически пересчитывая его в процессе выполнения.
Call Stack – показывает цепочку вложенных вызовов.
В настоящий момент отладчик находится внутри вызова hello() , вызываемого скриптом в index.html (там нет функции, поэтому он называется «анонимным»).
Если вы щелкнете по элементу стека (например, «анонимному»), отладчик перейдет к соответствующему коду, и все его переменные также можно будет проверить.
Scope – текущие переменные.
Local показывает локальные функциональные переменные. Вы также можете увидеть их значения, выделенные прямо над источником.
Global имеет глобальные переменные (из любых функций).
Там также есть this слово, которое мы еще не изучали, но скоро этим займемся.
Теперь пришло время проследить сценарий.
Для этого есть кнопки в верхней части правой панели. Давайте привлечем их.
– «Возобновить»: продолжить выполнение, горячая клавиша F8 .
Возобновляет выполнение. Если дополнительных точек останова нет, то выполнение просто продолжается и отладчик теряет управление.
Вот что мы можем увидеть после клика по нему:
Выполнение возобновилось, достигло другой точки останова внутри say() и остановилось там. Взгляните на «Стек вызовов» справа. Оно увеличилось еще на один звонок. Мы сейчас внутри say() .
– «Шаг»: выполнить следующую команду, горячая клавиша F9 .
Запустите следующий оператор. Если мы нажмем на нее сейчас, появится alert .
Нажатие на эту кнопку снова и снова приведет к пошаговому прохождению всех операторов сценария один за другим.
– «Перешагнуть»: выполнить следующую команду, но не заходить в функцию , горячая клавиша F10 .
Похожа на предыдущую команду «Шаг», но ведет себя иначе, если следующим оператором является вызов функции (не встроенной, как alert , а нашей собственной функции).
Если сравнить их, то команда «Шаг» переходит к вызову вложенной функции и приостанавливает выполнение на ее первой строке, а «Шаг через» незаметно для нас выполняет вызов вложенной функции, пропуская внутренности функции.
Затем выполнение приостанавливается сразу после вызова функции.
Это хорошо, если нам не интересно видеть, что происходит внутри вызова функции.
– «Вступить», горячая клавиша F11 .
Это похоже на «Шаг», но ведет себя по-другому в случае асинхронных вызовов функций. Если вы только начинаете изучать JavaScript, то можете игнорировать разницу, поскольку у нас пока нет асинхронных вызовов.
На будущее обратите внимание, что команда «Шаг» игнорирует асинхронные действия, такие как setTimeout (запланированный вызов функции), которые выполняются позже. «Шаг в» входит в их код, ожидая их, если необходимо. Дополнительную информацию см. в руководстве DevTools.
– «Выйти»: продолжить выполнение до конца текущей функции, горячая клавиша Shift + F11 .
Продолжите выполнение и остановите его на самой последней строке текущей функции. Это удобно, когда мы случайно ввели вложенный вызов, используя , но нас это не интересует, и мы хотим как можно скорее продолжить его до конца.
– включить/отключить все точки останова.
Эта кнопка не перемещает выполнение. Просто массовое включение/выключение точек останова.
– включить/выключить автоматическую паузу в случае ошибки.
При включении, если инструменты разработчика открыты, ошибка во время выполнения скрипта автоматически приостанавливает его. Затем мы можем проанализировать переменные в отладчике, чтобы увидеть, что пошло не так. Поэтому, если наш скрипт завершает работу с ошибкой, мы можем открыть отладчик, включить эту опцию и перезагрузить страницу, чтобы увидеть, где он завершает работу и каков контекст в этот момент.
Продолжить здесь
Щелчок правой кнопкой мыши по строке кода открывает контекстное меню с отличной опцией «Продолжить здесь».
Это удобно, когда мы хотим продвинуться к строке на несколько шагов вперед, но нам лень устанавливать точку останова.
Чтобы вывести что-то из нашего кода на консоль, есть функция console.log .
Например, это выводит на консоль значения от 0 до 4 :
// открываем консоль, чтобы увидеть
для (пусть я = 0; я <5; я++) {
console.log("значение", я);
}Обычные пользователи не видят этот вывод, он находится в консоли. Чтобы увидеть это, либо откройте панель инструментов разработчика «Консоль», либо нажмите Esc, находясь на другой панели: это откроет консоль внизу.
Если у нас достаточно логирования в нашем коде, то мы можем видеть, что происходит по записям, без отладчика.
Как мы видим, есть три основных способа приостановить скрипт:
Точка останова.
Операторы debugger .
Ошибка (если инструменты разработчика открыты и кнопка «включено»).
Во время паузы мы можем выполнять отладку: проверять переменные и отслеживать код, чтобы увидеть, где выполнение идет не так, как надо.
В инструментах разработчика гораздо больше возможностей, чем описано здесь. Полное руководство находится по адресу https://developers.google.com/web/tools/chrome-devtools.
Информации из этой главы достаточно, чтобы начать отладку, но позже, особенно если вы много работаете с браузером, зайдите туда и просмотрите более продвинутые возможности инструментов разработчика.
Да, и еще вы можете щелкнуть в разных местах инструментов разработчика и просто посмотреть, что появится. Вероятно, это самый быстрый путь изучения инструментов разработки. Не забывайте про правый клик и контекстное меню!