Отладка – это один из тех навыков, которые лежат в основе деятельности программиста.
Иногда мы делаем нашу лучшую работу, но программа работает неправильно, например, она выходит из строя, просто медленно или печатает неправильную информацию.
Что вы делаете, когда написанная вами программа ведет себя не так, как вы ожидаете?
Вы начинаете его отлаживать.
Выяснение того, где может быть ошибка
Первый шаг – всегда смотреть на то, что происходит, и пытаться определить, откуда исходит проблема. Является ли это проблемой в окружающей среде? Это проблема во вводе, который вы дали программе? Это одноразовый сбой из-за слишком большого использования памяти? Или это происходит каждый раз, когда вы запускаете его?
Все это ключевая информация для того, чтобы начать двигаться в правильном направлении при выяснении проблемы.
Как только у вас появится какое-то представление о том, откуда берется ошибка, вы можете начать проверять эту конкретную часть кода.
Прочитайте код
Самый простой способ отладки, по крайней мере с точки зрения инструментов, – это чтение написанного вами кода. Вслух. Есть какая-то волшебная вещь в том, чтобы слышать наш собственный голос, чего не происходит, когда вы читаете в тишине.
Часто я сталкивался с проблемами таким образом.
Использование консоли
Если чтение кода ничего вам не открывает, следующий логический шаг – начать добавлять в свой код несколько строк, которые могут пролить некоторый свет.
В интерфейсном коде JavaScript вы часто будете использовать alert() и console.log (и его крутые друзья).
Рассмотрим эту строку:
const a = calculateA() const b = calculateB() const result = a + b
Каким-то образом результат вычисляется неправильно, поэтому вы можете начать с добавления alert(a) и предупреждение (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
Инструменты разработчика Chrome
Результат вызовов console.log() выводится на консоль JavaScript. Это инструмент, который более или менее распространен в каждом браузере:
Инструмент очень мощный и позволяет печатать сложные объекты или массивы, и вы можете проверять каждое их свойство.
В посте API консоли вы можете увидеть все опции и детали работы с ним, поэтому я не буду здесь объяснять все детали.
Отладчик
Отладчик является самым мощным инструментом в инструментах разработчика браузера, и он находится в Источники панель:
В верхней части экрана отображается навигатор файлов.
Вы можете выбрать любой файл и просмотреть его справа. Это очень важно для установки точек останова, как мы увидим позже.
Нижняя часть – это собственно отладчик.
Точки останова
Когда браузер загружает страницу, код JavaScript выполняется до тех пор, пока не будет достигнута точка останова.
На этом этапе выполнение приостанавливается, и вы можете проверить все о своей запущенной программе.
Вы можете проверить значения переменных и возобновить выполнение программы по одной строке за раз.
Но сначала, что такое точка останова? В своей простой форме точка останова – это точка останова инструкция, введенная в ваш код. Когда браузер встречает его, он останавливается.
Это хороший вариант при разработке. Другой вариант – открыть файл на панели “Источники” и щелкнуть номер в строке, в которую вы хотите добавить точку останова:
Повторное нажатие на точку останова приведет к ее удалению.
После добавления точки останова вы можете перезагрузить страницу, и код остановится в этой точке выполнения, когда найдет точку останова.
При добавлении точки останова вы можете увидеть на панели Точки останова , что form.js в режиме онлайн 7 имеет точку останова. Там вы можете увидеть все свои точки останова и временно отключить их.
Существуют и другие типы точек останова:
- XHR/точки останова выборки : срабатывает при отправке любого сетевого запроса
- Точки останова DOM : срабатывает при изменении элемента DOM
- Точки останова прослушивателя событий : срабатывает, когда происходит какое-либо событие, например щелчок мыши
Масштаб
В этом примере я установил точку останова внутри прослушивателя событий, поэтому мне пришлось отправить форму, чтобы запустить ее:
Теперь все переменные, находящиеся в области, печатаются с соответствующими значениями. Вы можете редактировать эти переменные, дважды щелкнув по ним.
Наблюдайте за переменными и выражениями
Справа от панели Область есть панель Смотреть .
В нем есть кнопка + , которую вы можете использовать для добавления любого выражения. Например, при добавлении name будет выведено значение переменной name , в примере Флавио . Вы можете добавить имя.прописные буквы() и он напечатает ФЛАВИО :
Возобновите выполнение
Теперь все сценарии остановлены, так как точка останова остановила выполнение.
Над баннером “Приостановлено на точке останова” есть набор кнопок, которые позволяют изменить это состояние.
Первый – в синем цвете. Нажатие на нее возобновляет обычное выполнение скрипта.
Вторая кнопка – перешагнуть , и она возобновляет выполнение до следующей строки и снова останавливается.
Следующая кнопка выполняет шаг в операцию: переходит к выполняемой функции, позволяя вам ознакомиться с ее деталями.
Шаг противоположен: возвращается к внешней функции, вызывающей эту.
Это основные способы управления потоком во время отладки.
Редактирование сценариев
На этом экране devtools вы можете редактировать любой сценарий, в том числе во время остановки его выполнения. Просто отредактируйте файл и нажмите cmd-S на Mac или ctrl-S в Windows/Linux.
Конечно, изменения не сохраняются на диске, если вы не работаете локально и не настраиваете рабочие области в devtools, более продвинутом разделе.
Проверьте стек вызовов
Стек вызовов отлично подходит для того, чтобы увидеть, сколько уровней функций вы глубоко изучили в коде JavaScript. Это также позволяет вам перемещаться вверх по стеку, щелкая по имени каждой функции:
Сценарии черного ящика
Часто вы работаете с библиотеками, в которые не хотите “входить”, вы доверяете им и, например, не хотите видеть их код в стеке вызовов. Как и в приведенном выше случае для validator.min.js , который я использую для проверки электронной почты.
Я верю, что он делает хорошую работу, поэтому я могу щелкнуть его правой кнопкой мыши в стеке вызовов и нажать Сценарий черного ящика . С этого момента невозможно войти в этот код скрипта, и вы с радостью работаете только над своим собственным кодом приложения.
Используйте средства разработки браузера для отладки Node.js
С тех пор как Node.js построен на том же движке Chrome, v8, вы можете связать 2 и использовать Chrome DevTools для проверки выполнения Node.js приложения.
Откройте свой терминал и запустите
node --inspect
Затем в Chrome введите этот URL-адрес: о программе://проверка .
Щелкните ссылку Открыть выделенные средства разработки для узла рядом с целью анода, и у вас будет доступ к Node.js в браузере DevTools:
Убедитесь, что вы нажали на это, а не на ссылку проверить ниже, так как для этого потребовалось автоматическое переподключение к Node.js пример, когда мы перезапускаем его – довольно удобно!
Оригинал: “https://flaviocopes.com/javascript-debugging/”