Как стать мастером в отладке JavaScript ?

Моя компания занимается разработкой на JS, Golang и PHP. Подготовили статью для Вас, будет полезно.

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

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

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

Такие ошибки называются регрессионными.

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

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

Но всегда что-то ускользает из внимания. Никто не внедряет ошибки специально. Часто ошибки проявляются только тогда, когда программа используется клиентами. И... как только вы узнали, что есть ошибка, как вы ее решаете? Ну, самое сложное - это определить, откуда взялась ошибка.

Затем вторая самая сложная часть - выяснить, почему эта ошибка возникает. Решить проблему обычно легко, как только вы узнаете всё вышеперечисленное. Как правило, мы можем сделать две вещи, чтобы решить проблему.

Один приём является очень простым и включает в себя попытку выяснить значения состояния (содержимое переменных) и поток программы, а также фиксацию этих переменных в логах или на выходе вашей программы.

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

Иногда мы прекрасно делаем свою работу, но программа работает неправильно, например, крашится (падает), работает медленно или выводит неверную информацию. Что вы делаете, когда написанная вами программа ведет себя не так, как вы ожидаете?

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

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

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

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

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

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

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

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

При выполнении кода браузер откроет две панели с алертами:

Это хорошо работает, если то, что вы передаете в alert(), является строкой или числом.

Как только у вас появляется массив или объект, все становится слишком сложным для alert(), и вы можете использовать console.log():

Значение выводится в консоль JavaScript инструментов разработчика браузера.

Допустим, у нас есть объект car, но мы не знаем его содержимого и хотим его осмотреть:

У нас есть несколько способов сделать это.

console.log

console.dir

В Node.js вы можете использовать свойство colors для отображения цветов в терминале:

Это выведет объект в виде строкового представления:

Добавив эти параметры:

вы можете сделать вывод более красивым. Последнее число определяет количество пробелов в отступах:

Преимущество JSON.stringify() заключается в том, что она работает вне консоли, поскольку вы можете вывести объект и на экран.

Цикл for...in удобен для печати всех свойств объекта, используемого таким образом:

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

Отладчик - это инструмент, который может быть предоставлен либо компилятором вашего языка программирования, либо инструментарием, созданным вокруг него. Например, редактор Visual Studio Code от Microsoft предоставляет отладчик JavaScript.

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

В браузере добавление оператора debugger в ваш код приостановит отображение страницы браузером и запустит отладчик.

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

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

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

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

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

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

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

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

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

Существуют и другие типы точек останова:

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

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

Прямо на панели Scope находится панель Watch.

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

Теперь все скрипты остановлены, так как точка останова остановила выполнение. Над баннером "Paused on breakpoint" есть набор кнопок, которые позволяют изменить это состояние.

Первая из них выделена синим цветом. Нажатие на нее возобновляет нормальное выполнение сценария. Вторая кнопка - пошаговое выполнение (step over), она возобновляет выполнение до следующей строки и снова останавливается.

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

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

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

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

Бывают случаи, когда полезно вывести трассировку стека вызовов функции, возможно, чтобы ответить на вопрос, как вы достигли этой части кода?

Это можно сделать с помощью функции console.trace():

Как мы видели ранее, console.log отлично подходит для отображения сообщений в консоли. Теперь мы откроем для себя еще три удобных метода, которые помогут нам в отладке, поскольку они неявно указывают на различные уровни ошибок.

Первый, console.info() Как вы можете видеть, рядом с ним отображается маленькая буква "i", давая понять, что сообщение журнала - это просто информация.

Второй, console.warn()

Отображает желтый восклицательный знак.

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

Третья функция - console.error()

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

Сообщения консоли очищаются при каждом переходе по странице, если вы не отметили опцию Сохранять логи (Preserve log) в настройках консоли:

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

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

Вы можете сделать то же самое, но вывести свернутое сообщение, которое можно открывать по требованию, чтобы еще больше ограничить шум:

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

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

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

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

Откройте свой терминал и запустите

node --inspect

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

Нажмите на ссылку Open dedicated DevTools for Node рядом с целью Node, и вы получите доступ к Node.js в браузере DevTools: