Как перестать употреблятьconsole.log()Переключиться на браузерdebugger
Оригинальный адрес:Как перестать использовать console.log() и начать использовать отладчик вашего браузера Оригинальный автор:Parag Zaveri Переводчик: нубаконг
Когда я начинал как разработчик программного обеспечения, я столкнулся с множеством трудностей. Самая распространенная проблема, с которой сталкивается большинство новых разработчиков, — это отладка. Сначала, когда я понял, что могу открыть консоль браузера (console)Потомconsole.log()Когда я вышел, чтобы найти жука, я подумал, что нашел Святой Грааль. Это оказалось очень неэффективным.
Ради юмора, вот несколько моих любимых примеров:
console.log(‘Total Price:’, total) // 查看值是否已经储存
console.log(‘Here’) // 判断程序是否执行某一个函数
Я думаю, что большинство разработчиков начинают понимать, что на практике это не лучший способ отладки программы. Должен быть лучший способ.
К счастью, для вашего браузера есть инструменты отладки. Чтобы быть точным, я подробно расскажу об инструментах разработчика Chrome ниже.
В этой статье в Chrome DevTools я расскажу об использовании точек останова, пошаговом выполнении кода, настройке выражений отслеживания и сосредоточении внимания на позиционировании.
Чтобы следовать этому руководству, вам нужно будет использовать образцы кода репозитория, которые я создал (онлайн-демонстрация),кликните сюда(может потребоваться некоторое время для загрузки)
Шаг 1. Воспроизведите ошибку
Сначала выполняем ряд действий, чтобы баг воспроизводился постоянно
- В нашем случае мы будем использовать бортовой счетчик, если вы не открыли корпус,пожалуйста, нажмите здесь
- существует
Entree1Вход12 - существует
Entree2Вход8 - существует
Entree3Вход10 - существует
TaxВход10 - существует
Tipвыберите20% - нажмите
Calculate Bill, сумма должна быть 39,6, но мы получаем другой результат, 14105,09... ! ! !
Примечание. Не нужно беспокоиться о том, сколько чисел здесь, просто отличается от того, что вы ожидали.
Шаг 2: Научитесь использоватьSourcesпанель
Для отладки в браузере нужно привыкнуть пользоваться инструментами разработчика (DevTools), открыть инструменты разработчика браузера, нажать кнопку MacCommand+Option+I, Линукс прессControl+Shift+I
Почему бы не использовать F12, ахаха. .
Нажмите на панельsourcesОпции панели, у вас должен быть доступ к трем панелям для отладки. соответственно文件导航,源代码编辑器,调试面板. Прежде чем перейти к шагу 3, нажмите «Ознакомиться» и повеселитесь.
Шаг 3: установите первую точку останова
Прежде чем показать, как установить первую точку останова, позвольте мне продемонстрировать использованиеconsole.log()Применение. Очевидно, что часть вычислений проблематична только во время выполнения нашей программы. Это можно сделать для отладки программы:
К счастью, в наших инструментах разработки браузера в этом больше нет необходимости, вместо этого мы можем просто установить точку останова и выполнить код, чтобы найти значение во время просмотра браузера.
Давайте поговорим о том, как установить точку останова в исходном виде. Точки останова — это то, что ваш браузер может определить, когда приостановить код, чтобы дать вам возможность отладить его.
Для наших целей мы установим точку останова на первом шаге выполнения нашей программы, установив события мыши.
Развернуть в панели отладки
Event Listener Breakpointsпросмотр опций. снова расширитьMouse,выберитеclickкнопка.
Теперь, когда вы нажимаете на страницуCalculate Billкнопку, отладчикonClick()Первая строка метода приостанавливает выполнение, и если отладчик доступен в другом месте, нажмите кнопку воспроизведения, и отладчик перейдет к нему.
Шаг 4. Пройдитесь по коду
Во всех инструментах отладки есть два варианта навигации во время выполнения кода. Пользователь может выбратьstep intoа такжеstep overОдин из них переходит к следующему шагу выполнения функции действия.
step intoОговорено, что каждая строка кода выполняется одна за другой внутри каждой функции.
step overэто правило пропуска всей функции, которая выполняется заданием
Примечание: разница между ними
step into:Введите и продолжите пошаговое выполнение, когда встретится подфункцияstep over:Когда в функции встречается подфункция, она не входит в подфункцию и не выполняет одношаговое выполнение, а останавливает выполнение всей подфункции, то есть обрабатывает подфункцию как один шаг.
Ниже приведен пример пошагового выполнения моего кода, вScopeвкладка, первые триentreeЗначение отображается справа
Шаг 5: Установите точку останова на первой строке кода
Действительно~ возможность выполнять код шаг за шагом невероятно, но немного громоздко и громоздко, верно? Обычно я просто хочу узнать стоимость определенной области. Точки останова строки кода являются решением этой проблемы.
Строка точки останова кода - это место, где я прекращаю использоватьconsole.log()И причина выбора инструментов разработки Chrome. Просто щелкните строку кода, для которой вы хотите просмотреть дополнительную информацию, чтобы установить для нее точку останова строки кода. Запустите код как обычно, и программа остановится в точке, где вы установили точку останова строки кода, вместо того, чтобы выполнять пошагово каждую строку каждой функции.
Если у вас возникли проблемы, снимите флажок
MouseвнизclickОпции
Как вы можете видеть мойsubtotalЗначение отображается в соответствии с моим требованием10812, несколько моих входных значений такжеScopeОтображается на блоке наведения на панели и сам код.
хм эмм. . Я думаю, что, возможно, понял причину этой ошибки, связана ли она с конкатенацией строк? ?
Давайте установим некоторые выражения для прослушивания, чтобы подтвердить это.
Шаг 6: Создайте выражение слушателя
Теперь, когда мы знаем, что значения нашего входа добавляются неправильно, давайте настроим выражение прослушивателя для каждого значения. Выражение наблюдения позволяет нам получить больше информации из любого выражения или переменной в нашем коде.
Чтобы определить отслеживаемое значение, щелкните самый верхний
watchокно и нажмите+кнопку для ввода имен переменных или других выражений.
Для этого примера я приведу свой первыйentreeи его значение типа установленоwatch
woohoo, я думаю, что нашел проблему, это похоже на мой первыйentreeЗначение сохраняется в виде строки. Возможно, у меня были проблемы с его получением. Может быть,querySelector()является виновником. Также могут быть затронуты несколько других значений, давайте дальше отлаживать наш код в инструментах разработчика.
Шаг 7. Исправьте код
Как показано ниже,querySelector()Должен быть виновником!
Итак, как мы это исправим? Мы можем просто использоватьNumber(getEntree1())Приведите строку к числу, как показано в строке 74.
Чтобы на самом деле написать код, вам нужно перейти кsourcesпанель слеваelementsпанель. Если вы не видите код JavaScript, разверните вкладку «Сценарий», щелкните правой кнопкой мыши и выберитеedit as HTML
Если вы находитесь в рабочей среде, очень легко сохранить код. Если это не так, вам нужно использовать
Command+Sилиcontrol+Sдля сохранения локальной копии веб-страницы, которую можно открыть для просмотра изменений редактирования.
хорошо~
Demo Code: GitHub.com/par Разнообразие сред…
На самом деле, как фронтенд-разработчик, вы можете использовать только
console.logДля отладки кода очень низкоуровневый, хотя я им часто пользуюсь хахаха, вот статья проdebuggerВступительная статья, браузерdebuggerи редакторы (VSCODE и т.д.)debuggerТочно так же можно попробовать попасть в точку останова в разработке и испытать это调试удовольствие от. прикрепи мойличный блога такжеgithub, непрерывный вывод и общий прогресс. 🚲