Начало работы с отладкой JavaScript в Microsoft Edge DevTools

В этом учебнике вы научитесь основным рабочим процессом для отладки проблем JavaScript в DevTools.

Шаг 1: воспроизведение ошибки

Поиск серии действий, которые постоянно воспроизводит ошибки, всегда является первым этапом отладки.

  1. Нажмите кнопку Открыть демонстрацию. Удерживайте клавишу Control \ (Windows ) или Command \ (macOS ) и открывайте демонстрацию на новой вкладке.

    [Открыть демонстрацию] OpenDebugJSDemo

  2. Введите 5 текст в текстовом поле число 1 .

  3. Введите 1 текст в текстовое поле число 2 .

  4. Нажмите кнопку Добавить номер 1 и номер 2. Надпись под кнопкой содержит сообщение 5 + 1 = 51 . Результат должен быть 6 . Это ошибка, которую вы собираетесь исправить.

    Рис. 1

    Результат состоит в 5 + 1 том 51 , что 6
    Результатом 5 + 1 является 51, а должно быть 6.

Шаг 2: знакомство с пользовательским интерфейсом панели «источники»

DevTools предоставляет множество различных инструментов для различных задач, таких как изменение CSS, профилирование нагрузки страниц и мониторинг сетевых запросов. На панели « источники » можно выполнить отладку JavaScript.

  1. Откройте DevTools, нажав клавиши Control + Shift + J \ (Windows ) или Command + Option + J \ (macOS ). С помощью этого ярлыка открывается панель консоли .

    Рисунок 2

    Панель консоли
    Панель консоли

  2. Откройте вкладку источники .

    Рисунок3

    Панель « источники »
    Панель «источники»

Пользовательский интерфейс панели « источники » состоит из трех частей:

Рисунок4

3 части пользовательского интерфейса панели « источники »
3 части пользовательского интерфейса панели «источники»

  1. Область " Навигатор файлов " \ (раздел 1 на рис. 4). Здесь перечислены все файлы, на которые поступают запросы страниц.
  2. Область редактора кода \ (раздел 2 на рисунке 4). После того как вы выберете файл в области навигатора по файлам , здесь отображается содержимое этого файла.
  3. Область отладки JavaScript \ (раздел 3 на рис. 4). Различные инструменты для проверки JavaScript на странице. Если окно DevTools имеет ширину, эта область отображается справа от области редактора кода .

Шаг 3: Приостановка кода с помощью точки останова

Наиболее распространенный способ отладки такого сбоя — Вставка в код большого количества инструкций для console.log() проверки значений по мере выполнения сценария. Пример

function updateLabel() {
    var addend1 = getNumber1();
    console.log('addend1:', addend1);
    var addend2 = getNumber2();
    console.log('addend2:', addend2);
    var sum = addend1 + addend2;
    console.log('sum:', sum);
    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
}

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

  • Кроме console.log() того, необходимо вручную открыть исходный код, найти нужный код, вставить console.log() инструкции, а затем снова загрузить страницу, чтобы просмотреть сообщения на консоли. С помощью точек останова вы можете приостановить выполнение нужного кода, даже не зная структуру кода.
  • В console.log() инструкции Вам необходимо явным образом указать каждое значение, которое нужно проверить. С помощью точек останова DevTools показывает значения всех переменных в данный момент времени. Иногда есть переменные, влияющие на ваш код, на который вы еще не осведомлены.

Короче говоря, точки останова могут помочь вам находить и устранять ошибки быстрее, чем console.log() метод.

Если вы перейдете на шаг назад и хотите подумать о том, как работает приложение, вы можете сделать обоснованную оценку того, что в 5 + 1 = 51 click прослушиватель событий, связанный с кнопкой " добавить число 1" и "номер 2 ", вычисляется неправильное значение Sum (). Таким образом, вам, возможно, потребуется приостановить код на время click выполнения слушателя. Точки останова для прослушивателей событий позволяют точно так:

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

  2. Рядом с категорией событие мыши нажмите кнопку развернуть значок "развернуть"  . DevTools открывает список событий мыши, например Click и MouseDown. Рядом с каждым событием установлен флажок.

  3. Установите флажок щелкнуть . DevTools теперь настроен на автоматическую приостановку при запуске любого click прослушивателя событий.

    Рисунок 5

    Флажок " Нажатие кнопки " включен
    ![Флажок "нажатие кнопки" включен][ImageJSClickCheckbox]

  4. Вернитесь на демонстрацию, нажмите кнопку Добавить номер 1 и номер 2 еще раз. DevTools приостанавливает демонстрацию и выделяет строку кода на панели « источники ». DevTools должен быть приостановлен в строке 16 get-started.js .

    if (inputsAreEmpty()) {
    

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

    Примечание

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

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

Шаг 4: пошаговое руководство по коду

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

  1. Нажмите кнопку Перейти к следующей функции  , чтобы перейти к следующему вызову функции . DevTools запускает следующий код без пошагового выполнения.

    if (inputsAreEmpty()) {
    

    Примечание

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

  2. На панели источники DevTools нажмите кнопку шаг с заходом в следующий вызов функции  , чтобы пошагово пройти среду выполнения updateLabel() функции, по одной строке за раз.

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

Шаг 5. Установка точки останова в коде строки

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

  1. Рассмотрим последнюю строку кода updateLabel() :

    label.textContent = addend1 + ' + ' + addend2 + ' = ' + sum;
    
  2. Слева от кода отображается номер строки данной строки кода, 33. Щелкните 33. DevTools помещает красный значок слева от 33. Это означает, что в этой строке есть точка останова из строки кода. DevTools теперь всегда задерживается перед выполнением этой строки кода.

  3. Нажмите кнопку возобновить  выполнение скрипта . Сценарий продолжит работу, пока не достигнет строки 33. В строках с 30, 31 и 32 DevTools распечатывает значения и addend1 addend2 sum справа от точки с запятой в каждой строке.

    Рисунок6

    DevTools приостанавливается на точке останова строки кода в строке 32
    ![DevTools приостанавливается на точке останова строки кода в строке 32][ImageJSLineOfCodeBreakpoint]

Шаг 6: Проверка значений переменной

Значения addend1 addend2 и sum вид подозрительных. Они заключены в кавычки, что означает, что они являются строками. Это хорошая гипотеза, объясняющая причину ошибки. Теперь пора собрать дополнительные сведения. DevTools предоставляет множество инструментов для проверки значений переменных.

Способ 1: область "область"

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

Рисунок7

Область " область "
![Область "область"][ImageJSScope]

Способ 2: контрольные выражения

С помощью вкладки " выражения контрольного значения " можно отслеживать значения переменных с течением времени. Как и названия, выражения контрольного значения не ограничиваются только переменными. Вы можете хранить любое допустимое выражение JavaScript в выражении Watch. Попробуйте вот так:

  1. Откройте вкладку Контрольные значения .
  2. Нажмите кнопку Добавить выражение  .
  3. Введите typeof sum.
  4. Нажмите клавишу Enter . DevTools показан typeof sum: "string" . Значение справа от двоеточия является результатом вашего выражения контрольного значения.

Примечание

На панели "выражение для контрольного значения " (внизу справа) на рисунке 8 typeof sum отображается выражение Watch. Если окно DevTools велико, область выражения контрольных значений находится справа над областью точки останова прослушивателя событий .

Рисунок8

Область "выражение контрольного значения"
![Область "выражение контрольного значения"][ImageJSWatchExpression]

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

Способ 3: консоль

Помимо просмотра console.log() сообщений, вы также можете использовать консоль для оценки произвольных операторов JavaScript. С точки зрения отладки вы можете использовать консоль для проверки возможных исправлений ошибок. Попробуйте вот так:

  1. Если вы не открыли ящик консоли, нажмите, Escape чтобы открыть его. Она откроется в нижней части окна DevTools.
  2. В окне консоли введите parseInt(addend1) + parseInt(addend2) . Эта инструкция работает, так как вы придерживаетесь к строке кода, addend1 в которой и addend2 находятся в области.
  3. Нажмите клавишу Enter . DevTools оценивает оператор и печатает 6 результаты, что является результатом, который вы ожидаете.
Рисунок9

Входной ящик консоли после оценки parseInt(addend1) + parseInt(addend2)
![Входной ящик консоли после оценки parseInt (addend1) + parseInt (addend2)][ImageJSConsoleEvaluated]

Шаг 7: применение исправления

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

  1. Нажмите кнопку возобновить  выполнение скрипта .
  2. В редакторе кодазамените строку 32, var sum = addend1 + addend2 с var sum = parseInt(addend1) + parseInt(addend2) .
  3. Control + S Чтобы сохранить изменения, нажмите клавиши \ (Windows ) или Command + S \ (macOS ).
  4. Щелкните отключить точки останова  , чтобы отключить точки останова . Она изменится на синий, чтобы показать, что она активна. Несмотря на то, что этот параметр установлен, DevTools игнорирует любые точки останова, заданные вами.
  5. Попробуйте использовать демонстрационную версию с разными значениями. Демонстрация будет правильно рассчитывается.

Внимание!

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

Дальнейшие действия

Поздравляем! Теперь вы знаете, как максимально эффективно использовать Microsoft Edge DevTools при отладке JavaScript. Средства и методы, описанные в этом учебнике, помогут вам сэкономить бесчисленные часы.

В этом учебнике показано два способа задания точек останова. DevTools обладает многими другими способами, в том числе:

  • Условные точки останова, которые запускаются только в случае, если предоставленное условие истинно.
  • Точки останова в перехваченных или неперехваченных исключениях.
  • XHR точки останова, которые инициируются, когда запрашиваемый URL-адрес соответствует подстроке, которую вы задаете.

[ImageJSClickCheckbox]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-event-listener-breakpoint-mouse-click.msft.png "Рисунок 5: установлен флажок "щелкнуть"."
[ImageJSLineOfCodeBreakpoint]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-breakpoint-paused.msft.png "Рисунок 6: DevTools приостанавливается на точке останова кода строки в 32"
[ImageJSScope]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-breakpoint-paused-scope.msft.png "Рисунок 7: область "область""
[ImageJSWatchExpression]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-breakpoint-paused-watch.msft.png "Рисунок 8: область "выражение контрольного значения""
[ImageJSConsoleEvaluated]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-breakpoint-paused-console.msft.png "Входной ящик консоли после оценки parseInt (addend1) + parseInt (addend2)"

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

Лицензия Creative Commons
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.