Полное руководство по отладке JavaScript

Узнайте, как отлаживать JavaScript с помощью отладчика DevTools в браузере

Отладка - один из тех навыков, которые лежат в основе деятельности программиста.

Иногда мы делаем все, что в наших силах, но программа работает некорректно, например дает сбой, работает медленно или выводит неверную информацию.

Что вы делаете, если написанная вами программа ведет себя не так, как вы ожидаете?

Вы начинаете его отлаживать.

Выяснение, где могла быть ошибка

Первый шаг - всегда смотреть на то, что происходит, и пытаться определить, в чем проблема. Это проблема окружающей среды? Проблема в вводе, которое вы дали программе? Это единовременный сбой из-за слишком большого использования памяти? Или это происходит каждый раз, когда вы его запускаете?

Все это ключевая информация, чтобы начать двигаться в правильном направлении при выяснении проблемы.

Как только вы поймете, откуда взялась ошибка, вы можете начать проверку этой конкретной части кода.

Прочтите код

Самый простой способ отладки, по крайней мере с точки зрения инструментов, - это прочитать написанный вами код. Вслух. В том, чтобы услышать наш собственный голос, есть нечто волшебное, чего не бывает, когда вы читаете в тишине.

Часто я обнаруживал проблемы таким образом.

Использование консоли

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

В коде внешнего интерфейса JavaScript вы часто будете использоватьalert()иconsole.log(и его крутые друзья).

Рассмотрим эту строку:

const a = calculateA()
const b = calculateB()
const result = a + b

Как-то неправильно рассчитывается результат, поэтому можно начать с добавленияalert(a)иalert(b)перед вычислением результата, и браузер откроет две панели предупреждений при выполнении кода.

const a = calculateA()
const b = calculateB()
alert(a)
alert(b)
const result = a + b

Это отлично работает, если вы переходите кalert()это строка или число. Как только у вас есть массив или объект, все становится слишком сложно дляalert(), и вы можете использоватьКонсольный API. Начиная сconsole.log():

const a = calculateA()
const b = calculateB()
console.log(a)
console.log(b)
const result = a + b

Значение печатается в консоли JavaScript инструментов разработчика браузера. Для удобства я объясняю здесь отладку в Chrome DevTools, но общие концепции применимы ко всем браузерам с некоторыми различиями в плане поддерживаемых функций.

Увидетьподробный обзор Chrome DevTools

Инструменты разработчика Chrome

Результатconsole.log()вызовы выводятся в консоль JavaScript. Это инструмент, более или менее распространенный в каждом браузере:

Browser console

Этот очень мощный инструмент позволяет печатать сложные объекты или массивы, а также проверять каждое их свойство.

вКонсольный APIpost вы можете увидеть все варианты и подробности работы с ним, поэтому я не буду здесь объяснять все подробности.

Отладчик

Отладчик - самый мощный инструмент в инструментах разработчика браузера, и его можно найти вИсточникипанель:

The debugger

В верхней части экрана отображается навигатор по файлам.

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

Нижняя часть - это собственно отладчик.

Контрольные точки

Когда браузер загружает страницу, код JavaScript выполняется до тех пор, пока не будет достигнута точка останова.

На этом этапе выполнение останавливается, и вы можете все проверить свою запущенную программу.

Вы можете проверить значения переменных и возобновить выполнение программы по одной строке за раз.

Но сначала, что такое точка останова? В своей простой форме точка останова - этоbreakpointинструкция вставьте в свой код. Когда браузер встречает это, он останавливается.

Это хороший вариант при разработке. Другой вариант - открыть файл на панели «Источники» и щелкнуть число в строке, в которой вы хотите добавить точку останова:

Added breakpoint

Повторный щелчок по точке останова удалит ее.

После добавления точки останова вы можете перезагрузить страницу, и код остановится в этой точке выполнения, когда найдет точку останова.

Когда вы добавляете точку останова, вы можете видеть вКонтрольные точкипанель, котораяform.jsонлайн7имеет точку останова. Вы можете увидеть все свои точки останова и временно отключить их.

Есть и другие типы точек останова:

  • Точки останова XHR / выборки: срабатывает при отправке любого сетевого запроса
  • Точки останова DOM: срабатывает при изменении элемента DOM
  • Точки останова прослушивателя событий: срабатывает, когда происходит какое-то событие, например, щелчок мышью

Breakpoints

Объем

В этом примере я установил точку останова внутри прослушивателя событий, поэтому мне пришлось отправить форму для его запуска:

Triggered breakpoint

Теперь все переменные, которые находятся в области видимости, напечатаны с соответствующими значениями. Вы можете редактировать эти переменные, дважды щелкнув по ним.

Следите за переменными и выражениями

Право наОбъемпанель естьСмотретьпанель.

Оно имеет+кнопку, которую вы можете использовать для добавления любого выражения. Например, добавивnameнапечатаетnameзначение переменной, в примереFlavio. Можете добавитьname.toUpperCase()и он напечатаетFLAVIO:

Watch expressions

Возобновить выполнение

Теперь все сценарии остановлены, так как точка останова остановила выполнение.

Над баннером «Приостановлено на точке останова» есть набор кнопок, которые позволяют изменять это состояние.

Первый - синим. Щелчок по нему возобновляет нормальное выполнение скрипта.

Вторая кнопкапереступить, и он возобновляет выполнение до следующей строки и снова останавливается.

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

Выйтинаоборот: возвращается к внешней функции, вызывающей эту.

Это основные способы управления потоком во время отладки.

Редактировать скрипты

На этом экране инструментов разработчика вы можете редактировать любой сценарий, даже когда выполнение сценария остановлено. Просто отредактируйте файл и нажмите cmd-S на Mac или ctrl-S в Windows / Linux.

Конечно, изменения не сохраняются на диске, если вы не работаете локально и не настраиваете рабочие области в инструментах разработчика, более сложная тема.

Проверьте стек вызовов

Встек вызововЗамечательно видеть, на скольких уровнях функций вы углубились в код JavaScript. Он также позволяет перемещаться вверх по стеку, щелкая имя каждой функции:

Call stack

Скрипты черного ящика

Часто вы работаете с библиотеками, в которые вы не хотите «вмешиваться», вы доверяете им и, например, не хотите видеть их код в стеке вызовов. Как и в предыдущем случае дляvalidator.min.js, который я использую для проверки электронной почты.

Я верю, что он выполняет свою работу хорошо, поэтому я могу щелкнуть его правой кнопкой мыши в стеке вызовов и нажатьСценарий черного ящика. С этого момента невозможно войти в этот код сценария, и вы с удовольствием работаете только над своим собственным кодом приложения.

Используйте инструменты разработчика браузера для отладки Node.js

Поскольку Node.js построен на том же движке Chrome,v8, вы можете связать 2 и использовать Chrome DevTools для проверки выполнения приложений Node.js.

Открыть свойТерминали беги

node --inspect

node-inspect

Затем в Chrome введите этот URL:about://inspect.

node-link-browser

Щелкните ссылку Открыть выделенный DevTools для узла рядом с целью узла, и вы получите доступ к Node.js в браузере DevTools:

node-console

Убедитесь, что вы щелкнули по нему, а не по ссылке внизу, так как инструмент автоматически переподключается к экземпляру Node.js, когда мы его перезапускаем - очень удобно!

Скачать мою бесплатнуюРуководство для начинающих по JavaScript


Больше руководств по js: