- Лучшее использование Chrome DevTools
оригинал:Debugging Javascript Like a Pro
Когда ваш код не работает должным образом, вы все еще используетеconsole.logотлаживать? Если да, то эта статья для вас.
Моя цель при написании этой статьи — дать вам представление об эффективных инструментах, которые Chrome Dev Tools предоставляет для лучшей и быстрой отладки кода Javascript.
В этой статье в основном обсуждаются следующие моменты:
- Установите точки останова для отладки определенных строк кода
- Просмотр стека вызовов
- Приостановка/возобновление выполнения скрипта
- установить выражение
- Советы и рекомендации по повышению производительности для инструментов разработки
Отладка кода времени выполнения
Когда в коде есть ошибки или он работает не так, как ожидалось, мы обычно обращаемся к инструментам разработчика.Sourcesвкладку, а затем более подробно рассмотрим этот функциональный модуль в различных сценариях.
точка останова
До прочтения этой статьи вы, вероятно, привыкли отлаживать свой код, используя консоль для вывода значения. Но я хочу познакомить вас с более эффективным методом, позволяющим глубже погрузиться в ваш код: точками останова.
Установка точек останова обычно является первым шагом в процессе отладки. Хотя большинство современных браузеров имеют встроенные инструменты разработки, которые позволяют отлаживать просматриваемую страницу, останавливать выполнение кода в определенной строке кода или выполнять код в определенном операторе, в этой статье мы сосредоточимся на Chrome. инструменты разработчика.
Что такое точка останова?
Часто вам может понадобиться остановить выполнение кода, чтобы просмотреть конкретный контекст построчно.
Как только код останавливается в точке останова, мы можем отлаживать его, обращаясь к области видимости, просматривая стек вызовов и даже изменяя код во время выполнения.
Как установить точки останова?
Поскольку не имеет значения, какая технология интерфейса используется для отладки, чтобы вам было проще объяснить точки останова, я буду отлаживать проект Angular, используемый для обучения.
- Сначала откройте инструменты разработчика и перейдите к
SourcesВкладка - Затем откройте файл, который мы хотим отлаживать.
- После открытия файла мы можем установить точку останова, щелкнув строку кода, которую необходимо остановить.
Совет: на Mac используйте сочетания клавиш⌘ + OМожно открыть селектор файлов, где вы можете найти файл, который нужно отладить. В Windows вы можете использоватьCTRL + O
Как показано на изображении выше, мы можем устанавливать точки останова глубже в строке кода, например, разные операторы в строке кода.
Ставим 3 точки останова:
- Первая точка останова останавливает выполнение, когда код определен
- Вторая точка останова будет в
priceReceivedостановить перед выполнением функции - Третья точка останова будет в
priceReceivedостанавливается сразу после вызова, поэтому мы также можем проверить возвращаемое значение стрелочной функции
При вызове функции стрелки выполнение останавливается, правая панельScopeпокажет текущий контекст и позволит нам получить доступ ко всем значениям, которые мы хотим видеть.
Как показано на изображении ниже, мы видим переменнуюpriceценность .
На приведенной ниже схеме один разpriceReceivedвыполнить, будет использована третья точка останова.
На правой панели вы можете использоватьReturn valueПросмотрите возвращаемое значение анонимной функции.
Временно отменить точку останова
Сценарий: вы установили кучу точек останова в своем коде.
При отладке очень часто приходится обновлять страницу несколько раз.
Код, который вы сейчас отлаживаете, может иметь различные точки останова, иногда сотни. Эти сотни точек останова могут отнять у вас много времени.
В этом случае выполнение всех точек останова можно временно приостановить, что можно сделать, переключив значки на изображении ниже:
остановиться на ошибке
Сценарий: при выполнении вашего кода возникает ошибка, но вы не хотите устанавливать точки останова, поскольку не знаете, когда будет выдана ошибка.
Выбрасывайте ошибки в свой код, чтобы вы могли видеть, что не так с вашим кодом.
Условные точки останова
Как следует из названия, условная точка останова — это точка останова, которая срабатывает только тогда, когда условие истинно.
Например, в приведенном выше примере пользователь может ввести значения в нетекстовой области. Поскольку совместимость JS только показывает NAN вместо ошибок.
Сценарий: Ваш код более сложен, чем приведенный выше, и невозможно определить, когда возникают NaN.
Конечно, вы можете установить точку останова, но воспроизвести ошибку непросто, и на выполнение кода может уйти полчаса. В этом случае вы можете использовать условную точку останова и останавливать выполнение кода только при возникновении NaN.
Как показано ниже:
- Щелкните правой кнопкой мыши строку кода, в которую вы хотите добавить точку останова.
- Нажмите «Добавить условную точку останова…».
- Добавьте допустимые выражения JS. Конечно, при вызове выражения можно ссылаться на параметры x и y
- Точка останова сработает, когда выражение истинно
пошаговый код
Чтобы получить максимальную отдачу от инструментов разработчика, стоит уделить немного времени изучению того, как инструменты разработчика могут помочь нам быстро выполнить код, не устанавливая точки останова в каждой строке.
Используйте навигатор в Dev Tools для последовательного выполнения кода, строка за строкой.
я представлю нижеStep over next function callа такжеStepс разница. Во время отладки асинхронного кода нажмитеStepКнопка переместит на следующую строку в хронологическом порядке.
пропустить следующий вызов функции
Step over next function callКнопки также выполняют код последовательно, но не переходят в вызовы функций. То есть вызов функции будет пропущен, и отладчик не остановится в этой функции, пока вы не установите точку останова в этой функции.
Если вы внимательно посмотрите на приведенное выше изображение, вы обнаружите, что два методаmultiBy и renderToDOM не выполняются, какStepЭто идет внутри функции.
перейти к следующему вызову функции
Начиная с Chrome 68,Step Into Next function callРоль кнопки изменилась. Он похож на упомянутый вышеStep. Разница в том, что при вводе асинхронного кода он остановится на асинхронном коде, а не на хронологически работающем коде.
Как показано на изображении выше: строка 32 должна была бы выполняться, если бы она была в хронологическом порядке, но это не так. Отладчик ждет 2 секунды, прежде чем перейти к строке 29
- выход из вызова функции
Предположим, вы не хотите заходить внутрь функции при отладке своего кода,Step Out of function callОн позволяет выйти из функции и останавливается на следующей строке после вызова функции.
Что произошло на картинке выше?
- Код останавливается в точке останова в строке 36.
- затем выпрыгнуть из функции
renderToDOM - Отладчик переходит сразу к строке 29 и пропускает
renderToDOMостальная часть функции
Глобальные переменные и немедленный вывод
Иногда бывает полезно хранить определенные значения в глобальной области видимости, например, классы компонентов, большие массивы или сложные объекты.
Например, если вы хотите передать различные параметры методу компонента, добавление этих параметров в глобальную область во время отладки может сэкономить много времени.
На изображении выше я поместил массив[previous, current]Сохранить как глобальную переменную. Инструменты разработчика автоматически назначают файл с именемtemp{n}переменных, n основано на количестве ранее сохраненных переменных.
Как вы можете видеть на изображении выше, переменная называется temp2, и вы можете использовать ее в консоли, потому что теперь это глобальная переменная!
Немедленный вывод — это функция, выпущенная в Chrome 68, которая позволяет инструментам разработки отображать результаты выполнения в консоли по мере ввода кода.
Если вы внимательно посмотрите на изображение выше, когда я сопоставляю сохраненную переменную с массивом строк, я не нажимаю Enter, но результат сразу появляется на следующей строке.
Просмотр стека вызовов
Просмотр стека вызовов — один из самых полезных инструментов, предоставляемых инструментами разработчика: вы можете не только перемещаться вперед и назад по вызывающим их функциям, но и проверять их область действия на каждом этапе.
Предположим, у нас есть простая страница и сценарий, который вводит число и отображает на странице число, умноженное на 10. Мы вызовем две функции: одну для выполнения умножения, а другую для отображения результата на странице.
Как показано на изображении выше, мы можем просмотреть их области, просто щелкнув имена функций на панели стека вызовов.
Если присмотреться, то каждый раз, когда мы перескакиваем с одного вызова функции на другой, область видимости сохраняется, и мы можем здесь проанализировать каждый шаг!
Скрипт Blackbox для выравнивания стека
Сценарии «черного ящика» будут фильтровать стек вызовов, исключая из стека определенные сценарии или сценарии, соответствующие определенным шаблонам.
Например, если меня интересует только отладка кода в пользовательской среде в 99% случаев, я могу добавить шаблон в Blackbox, который отфильтровывает все сценарии в папке node_modules.
Есть два способа отфильтровать скрипт по Blackbox:
- Щелкните правой кнопкой мыши
SourcesJS script во вкладке и нажмите Blackbox Script - Перейдите на страницу настроек Chrome, затем перейдите в Blackboxing и нажмите
Add Pattern...и введите регулярное выражение, которое вы хотите добавить в черный ящик, полезно, когда вы хотите отфильтровать множество скриптов.
смотреть выражение
С помощью выражений наблюдения вы можете определить некоторые операторы Javascript и запустить инструменты разработчика для отображения результатов этих операторов. Это особенно интересный инструмент, потому что вы можете написать любой фиктивный случай, который вы хотите, если это правильное выражение Javascript.
Например, вы можете написать выражение, которое всегда имеет значение true, а когда выражение оценивается как false, вы можете обнаружить проблему с текущим состоянием операции.
Есть одна проблема, о которой нужно знать:
- Когда мы используем точки останова для отладки, выражения наблюдения будут выполняться немедленно, без обновления страницы.
- Если код работает нормально, вам нужно вручную нажать кнопку обновления
Эпилог
Инструменты разработчика браузера — отличные инструменты для отладки сложного кода. Иногда вам может понадобитьсяconsole.logСделав еще один шаг вперед, упомянутые выше функции обеспечат отладку глубоко в коде. Эти инструменты требуют некоторой практики, чтобы полностью освоить их, поэтому, если вы новичок в некоторых функциях, не сдавайтесь и продолжайте их использовать.
материал
Вот некоторые материалы, которые помогут вам полностью понять все функции, которые могут предложить инструменты разработки:
Добро пожаловать на перепечатку, не забудьте указать автора и источник~~