Отладка javascript в google chrome

Обновлено: 26.01.2025

Очень много сервисов сейчас позволяют дебажить код над фронтенде. Chrome DevTools и Firefox Developer Tools среди них самые популярные, но и в других браузерах тоже есть свои тулзы. Мы будем использовать Chrome DevTools для примеров.

Дебажим JavaScript

Откровенно говоря, отладка кода может занимать много времени. Особенно, если использовать такие простые команды как console.log() или window.alert().

Нужно писать, а потом удалять дополнительный код, а иногда эти команды все равно попадают в коммит (даже если вы думали, что все их забрали). А если при этом использовать линты (статические отладчики), то команды console или alert будут подсвечиваться в коде.

И на этом моменте в игру вступает Chrome DevTools, позволяя нам дебажить код без утомительных команд. Среди фишек этой тулзы, редактирование CSS и HTML, тестирование сети и проверка скорости сайта — наши любимые.

Чтобы на практике познакомиться с этой тулзой, давайте создадим простенькую страничку на JavaScript с getData() методом. Этот метод будет просто собирать данные с поля ввода, создавать DOM элемент с dataSpan ID и добавлять значение с поля ввода в этот элемент.

Вот как наша страничка будет выглядеть:

В JavaScript:

Сохраним ее как app.js.

Вот как наша страничка будет выглядеть в браузере:

Чтобы проверить как метод работает до того, как сохранять данные в dataSpan, можно использовать старомодные console.log(data) или window.alert(data). Вот что мы увидим запустив файл в VS Code:

Это самый примитивный подход.

Вместо этого, мы используем брейкпоинты (точки останова) вChrome DevTools чтобы убедиться, что все работает как надо.

Брейкпоинт — это строка кода, на которой мы хотим приостановить прогонку кода, чтобы изучить как он работает (или не работает).

Возвращаясь к примеру, давайте запустим страницу в Google Chrome и сделаем следующее:

Чтобы открыть Chrome Developer Tools, в правом верхнем углу браузера, кликнем чтобы открыть меню настроек.
В этом меню, выберем Дополнительные инструменты (в английском меню — More tools), а потом Инструменты разработчика (Developer tools).

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

Выберите вкладку Sources.
В Sources, в панели Page, выберите app.js (который мы создали чуть раньше).
В редакторе кода, кликните на номер строки let data =document.getElementById('name').value;

Управление интервалами выполнения кода

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

Первая кнопка, Resume script execution () продолжит выполнение кода до конца или до следующего брейкпоинта.

Давайте введем hello world в поле ввода. В строку добавится data = “hello world”. Теперь давайте кликнем на кнопку Step over next function call ().

Выбранная строка с брейкпоинтом будет выполнена и дебаггер выберет следующую. Откройте вкладку Scope чтобы посмотреть значение переменной data. Оно изменилось на “hello world”, которое мы ввели ранее и просто показывает значение нашей переменной на конкретной строке кода. Кликните Step over next function call еще раз чтобы выполнить выбранный метод и перейти на следующую строку.

Если обновить страницу, значение переменной out также обновится в DOM элементе. Чтобы посмотреть значение переменной, можно кликнуть на Expand () слева от нее. Если же еще раз кликнуть Step over next function call, то текст “hello world” еще раз добавится в dataSpan.

Более сложная отладка

Предположим, что мы выполняем функцию посложнее, которую точно не помешает отладить. К примеру, мы хотим, чтобы пользователи вводили числа через пробел. Функция затем будет обрабатывать и выводить эти числа, их сумму, и результат умножения.

Для этого мы обновим код app.js как на скриншоте выше. Обновляем страницу и приступаем непосредственно к дебаггингу.

Кликните 3 (номер строки of let data = document.getElementById('name').value;) чтобы поставить брейкпоинт.
Введите 23 24 е в строке ввода в браузере.
Кликните Step over next function call.

Как еще можно поставить брейкпоинты

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

Для этого в DevTools есть классный инструмент для установки брейкпоинтов на разные типы интеракции с браузером. На панели JavaScript Debugging, кликните Event Listener Breakpoints чтобы посмотреть доступные категории.

Как вы видите, можно поставить брейкпоинт на событие Mouse > click (клик мышкой) в любом месте нашего кода. Это означает, что, если кликнуть Get Input Data, выполнение кода остановится на событии onclick. И не нужно вручную ничего добавлять.

Клик на Step over next function call будет последовательно вести нас через код, используемый чтобы обработать клики.

Используя Event Listener Breakpoints, можно поставить брейкпоинты на кучу разных типов событий, таких как Keyboard, Touch, и XHR.

Ключевое слово “debugger”

Если ввести debugger в любом месте кода, Chrome DevTools приостановит выполнение кода на этой строке и подсветит ее также, как и брейкпоинты. Можно использовать этот инструмент чтобы дебажить JavaScript в Chrome или других браузерах. Только не забудьте удалить его, когда закончите отладку.

Код на скриншоте выше остановится на строке, которая содержит ключевое слово debugger и автоматически запустит Chrome DevTools. По сути, это то же самое, что и поставить брейкпоинт на эту строку. Также выполнением кода можно управлять с помощью кнопок Step into next function call и Step over next function call.

Выжимка

В начале мы рассмотрели команды console.log() и window.alert() и поняли, что они не слишком удобны. Нужно было их часто использовать по всему коду, что могло сделать код «тяжелее» и медленнее, если бы мы забыли их удалить перед коммитом.

Когда количество строк растет, Chrome Developer Tools намного более эффективен для отлова багов и оценки работы в целом.

Дебажим Angular

Легче всего отладить код Angular — использовать Visual Studio Code (VS Code). Чтобы начать дебаггинг, вам нужно будет установить расширение Debugger для Chrome:

Запустите проект на VS Code и откройте вкладку Extensions. Или нажмите Ctrl+Shift+X на клаве.
В строке поиска введите Chrome.
Выберите Debugger for Chrome и кликните Install.
После того как установите расширение, появится кнопка Reload. Кликните ее, чтобы завершить инсталляцию и активировать Debugger.

Настраиваем дебаггер

Для начала, нам нужно будет настроить дебаггер:

1. С File Explorer перейдите на Debug вкладку.
Также можно использовать для этого Ctrl+Shift+D.

2. Кликните на иконку Settings чтобы создать launch.json.
Это файл с настройками, который мы будем использовать.

3. С выпадающего меню Select Environment выберите Chrome.
Это создаст новую папку .vscode и файл launch.json для вашего проекта.

4. Запустите этот файл.

5. Чтобы использовать этот файл для наших целей, в методе url замените localhost порт с 8080 на 4200.

6. Сохраните изменения.

Вот как должен выглядеть файл:

7. Нажмите F5 или кликните кнопку Start Debugging чтобы запустить Debugger.

8. Запустите Chrome.

9. Чтобы приостановить выполнение кода на брейкпоинте, обновите страницу.

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

README

В расширении Debugger для Chrome есть множество дополнительных конфигураций, работа з source maps и устранений всяческих неполадок. Чтобы просмотреть их прямо в VS Code, кликните на расширение и выберите вкладку Details.

Отладка бекенда (Node.js)

Здесь вы узнаете как дебажить код на Node.js. Вот самые распространённые подходы:

• Используя Chrome DevTools
На даный момент, это наш любимый подход.

• Используя IDE-шки типаVisual Studio Code, Visual Studio, WebStorm, и т.д.

Для примеров мы будем использовать VS Code и Chrome DevTools.

Chrome и Node.js используют тот же JavaScript-движок, Google V8, и это значит, что для бекенда мы будем использовать те же инструменты, что и для фронта.

1. Запустите свой проект в VS Code.

2. Перейдите на вкладку Console.

3. Введите команду npm start --inspect и нажмите Enter.

4. Проигнорируйте предлагаемый “chrome-devtools://…” URL (существует метод получше).

5. Запустите Chrome и введите “about:inspect”.

Это перенаправит вас на вкладку Devices на DevTools.

6. Кликните линк Open dedicated DevTools for Node.

Процесс отладки такой же, как и для фронтенда, то есть с использованием брейкпоинтов. На самом деле, очень удобно то, что не нужно переключаться на IDE. Таким образом, можно дебажить и фронт- и бекенд на одном интерфейсе.

Спасибо за чтение и надеемся, что вам понравился этот пост. Подписывайтесь на обновления — у нас в рукавах еще полно полезностей :-)

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

К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере — на первый взгляд.

В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js (как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

Примечание переводчика: видео на английском языке.

В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью - вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова (breakpoints) для того, чтобы остановить выполнение программы в определенном месте.

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

После установки точки останова (breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:

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

У вас также будет доступ к просмотру стека вызовов (call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:

Когда выполнение программы дойдет до строки с оператором debugger , приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources .

Вкладка Sources

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

Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:

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

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

Точка останова — преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local), глобальная область видимости (Global) и раздел сценариев (Script).

В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:

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

Вкладка Watch

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

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack) и т. д.

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

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

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.

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

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

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

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :

Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

Теперь, когда мы познакомились с вкладкой Debug , нам необходимо создать конфигурацию, которая укажет редактору VS Code, как ему отлаживать наше приложение.

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

Поиск и исправление ошибок может быть затруднительным для новичков. Если думаете, что использовать console.log () для отладки кода лучшее решение, то вы неправы.

В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.

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

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

Чтобы самому проделать действия из этого туториала, сделайте следующее:

Введите число 5 в поле «Number 1»;
Введите число 1 в поле «Number 2»;
Кликните на кнопку «Add»;
Посмотрите, вам говорят, что 5+1=51;

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

DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:

Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
Перейдите к вкладке «Sources»;
Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
Поставьте флажок в ячейке «click»;

Когда вы выбираете «click», вы устанавливаете брейкпоинты, зависящие от событий типа click к каждому элементу, который имеет для него обработчик.

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

На панели «Sources» нажмите «Step into next function call button»

Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

Теперь нажмите кнопку «Step over next function call button»;

Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.

Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:

Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.

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

Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:

На панели «Sources» выберите вкладку «Watch»;
Затем нажмите «Add Expression»;
Введите typeof sum;
Нажмите enter. DevTools покажет typeof sum: "string". Это значение является результатом Watch Expression.

Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.

Если вы не открыли панель с консолью, нажмите Escape, чтобы открыть его. Он открывается в нижней части окна DevTools;
В консоли введите parseInt (addend1) + parseInt (addend2);
Нажмите enter. DevTools выводит число 6, что и является ожидаемым результатом.

В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
Нажмите «Deactivate breakpoints»

Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.

Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!

Эта статья будет посвящена отладке JavaScript-кода с помощью инструментов для разработчиков от Google Chrome. Мы рассмотрим следующее:

1. Пример реализации проекта;
2. Анализ отчета об ошибках Raygun;
3. Подробное рассмотрение инструментов для разработчиков;
4. Добавление в код точек остановки;
5. Пересмотр кода;
6. Определение состояния приложения;
7. Исправление ошибок.

Шаг 1. Пример реализации проекта

Чтобы продемонстрировать, как отлаживать приложение с помощью инструментов для разработчиков в Chrome, я использую форму «Добавить пользователя». Она позволяет вводить имя, отчество и фамилию. При нажатии кнопки «Сохранить» форма отправляет данные для обработки на сервер.

Код для этой формы включает в себя три функции:

Обработчик кликов;
Функция преобразования первых букв строк в заглавные;
Функция сохранения.

Шаг 2. Анализ отчета об ошибках Raygun

Информация, необходимая для отладки ошибки, находится в модуле Stacktrace . Это краткий обзор того, что работает не так. В этом случае метод toUpperCase вызывается с неопределенным значением.
Stacktrace сообщает, где именно произошла ошибка: в функции capitalizeString в строке 20 файла index.js .

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

Шаг 3: Подробное рассмотрение инструментов для разработчиков

Первым делом нужно запустить приложение в Chrome и открыть инструменты для разработчиков. Вы можете сделать это с помощью клавиатуры, используя комбинацию клавиш CMD-OPT-I (в операционной системе OSX) или CTRL-SHIFT-I (в операционной системе Windows).

Чтобы приступить к отладке кода, нужно иметь возможность перемещаться по исходному коду. Это осуществляется на вкладке «Sources».

Левая панель этой вкладки содержит древовидное представление всех исходных файлов, загруженных на веб-странице. Вы можете перемещаться по файлам так же, как в IDE. При этом их содержимое будет отображаться в центральной панели. В нижней панели будут представлены все параметры отладки, о которых я расскажу позже.
Если много файлов, можно выполнить поиск, воспользовавшись клавиатурной комбинацией CMD-P (для операционной системы OSX) или CTRL-P (для Windows).
В нашем приложении проблема возникла в файле index.js . Выберите его из списка слева, чтобы просмотреть содержимое файла.

Шаг 4. Добавление в код точек остановки

Теперь нужно просмотреть код построчно, чтобы увидеть, где все пошло не так. Для этого мы используем точки остановки ( breakpoints ). Это маркеры в определенных местах кода, которые останавливают его выполнение.Это позволяет проверить состояние кода в этот момент времени и продолжить выполнение программы.

Есть несколько способов добавить точки остановки:

Точки остановки события

Вы можете прервать выполнение кода, когда на странице происходит определенное событие. Используя раздел «Event Listener Breakpoints» в панели отладки, можно развернуть соответствующую группу и найти событие, после которого нужно прекратить выполнения кода. Например, можно отметить событие клика.Это остановит выполнение программы, когда в любом месте страницы будет выполнен клик.

Точки остановки строки

Также можно просто найти конкретную строку и добавить для нее контрольную точку. Перейдите к интересующему вас файлу и строке, а затем кликните по номеру строки. Для этой строки будет добавлен синий маркер, и выполнение кода будет останавливаться в этой строке. На скриншоте, приведенном ниже, маркер установлен на строке 7файла index.js .

Программные точки остановки

Также можно добавить точки остановки программно, если будете отлаживать код в среде IDE. Вы можете использовать этот подход для условного введения точек остановки. Например, при определенных итерациях циклов, или если код выполняется при загрузке страницы, и нет времени о, чтобы добавить Event breakpoints в ручную.
Для этого необходимо добавить оператор debugger в позиции, на которой вы хотите прервать выполнение. Приведенный ниже код даст тот же результат.

Точки остановки ошибки

В инструментах для разработчиков есть удобная функция, которая прекращает выполнение кода, когда встречает исключение. Это позволяет изучить, что происходит во время ошибки.
Также можно задать остановку исполнения на исключениях, которые обрабатываются оператором try / catch .

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

Шаг 5: Пересмотр кода

Сначала установите точку остановки на строке 7? прямо внутри обработчика клика кнопки «Добавить», чтобы мы могли начать с самого начала.

Ошибка возникла в методе capizeizeString . Он вызывается три раза. Но какой его экземпляр выдает ошибку? Вы можете внимательнее рассмотреть Stacktrace и увидеть, что это был вызов из строки 13.

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

Заполните поля формы «First Name» и «Last Name», но оставьте поле «Middle Name» пустым, чтобы увидеть, вызовет ли это ошибку.

Вам нужно использовать эти кнопки, чтобы полностью пройти всю функцию capitalizeString . Поэтому, начиная со строки 7, используйте кнопку «Step over Current Line» до тех пор, пока не перейдете к строке 13. Активная строка помечается линиями сверху и снизу.

Теперь можно использовать кнопку «Step into Function», чтобы перейти к вызову функции capitalizeString.

Перемещение в стеке вызовов

Можно вернуться к родительской функции, чтобы проверить, что именно происходит в этот момент. Для этого используйте раздел « Call Stack », в котором перечислены все вызванные функции.

Можно кликнуть по элементу в списке и вернуться к функции. Имейте в виду, что текущая позиция в выполнении не изменяется. Поэтому, используя кнопку « Step Over », мы будем перемещаться дальше от верхней части стека вызовов.

Шаг 6: Определение состояния приложения

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

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

Наведение мыши

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

Наблюдатели

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

Их можно добавить нажав кнопку « + ». А также кликнув по выражению правой кнопкой мыши и выбрав пункт «Add selected text to watches».

Область действия

Панель « Scope » отображает список переменных, находящихся в пределах области действия, а также связанных с ними значений. Она похожа на панель « Watch ». Но она автоматически создается инструментами для разработчиков. Панель «Watch» может использоваться для идентификации локальных переменных и позволяет добавлять их в список « Watch list ».

Консоль

Шаг 7: Исправьте ошибку

Перейдите на вкладку « Console » и найдите строку, которая вызвала ошибку. Сначала проверьте alue.split(‘’) , чтобы получить первый символ, а затем вызвать функцию toUpperCase .

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

Вы можете проверить это, введя полное выражение в консоль:

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

Заключение

На этом мы завершаем краткое руководство по отладке JavaScript с помощью инструментов для разработчиков от GoogleChrome. Это мощный функционал!

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

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

Читайте также: