Приостановка кода с точки останова в Microsoft Edge DevTools

Используйте точки останова для приостановки кода JavaScript. В этом руководстве описаны все типы точек останова, доступные в DevTools, а также способы их использования и настройки каждого типа. Практические руководства по отладке можно найти в разделе Начало отладки JavaScript в Microsoft Edge DevTools.

Общие сведения о том, когда использовать каждый тип точки останова

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

Тип точки останова Используйте этот параметр, если вы хотите приостановить...
Строка кода В определенном регионе кода.
Условный текст В определенном регионе кода, но только в том случае, если истинно какое – либо другое условие.
DOM В коде, который изменяет или удаляет определенный узел DOM или дочерние элементы.
XHR Если URL-адрес XHR имеет строковый шаблон.
Прослушиватель событий В коде, который выполняется после события, например click , выполняется.
Ошибка В строке кода, которая вызывает перехваченное или неперехваченное исключение.
Функция Каждый раз, когда выполняется определенная команда, функция или метод.

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

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

Установка точки останова в коде строки в DevTools:

  1. Откройте вкладку источники .
  2. Откройте файл с той строкой, в которой вы хотите прервать ее.
  3. Перейдите к строке кода.
  4. Слева от строки кода находится столбец номер строки. Щелкните по нему. Рядом со столбцом номер строки появится красный значок.
Рис. 1

Точка останова, установленная на строке 30
Точка останова строки кода

Точки останова в коде для строк кода

Выполняйте debugger метод из вашего кода, чтобы приостановить его на этой линии. Это эквивалентно точке останова строки кода, за исключением того, что точка останова задается в коде, а не в пользовательском интерфейсе DevTools.

console.log('a');
console.log('b');
debugger;
console.log('c');

Зависимые точки останова для строк кода

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

Установка условной точки останова для строки кода:

  1. Откройте вкладку источники .
  2. Откройте файл с той строкой, в которой вы хотите прервать ее.
  3. Перейдите к строке кода.
  4. Слева от строки кода находится столбец номер строки. Щелкните правой кнопкой мыши номер строки.
  5. Нажмите кнопку добавить условную точку останова. Под строкой кода появится диалоговое окно.
  6. Введите условие в диалоговом окне.
  7. Нажмите Enter , чтобы активировать точку останова. Значок рядом со столбцом "номер строки".
Рисунок 2

В строке 34 задана зависимая точка останова для кода строки.
Условная точка останова для строки кода

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

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

Рисунок3

Панель " точки останова ", в которой отображаются две точки останова с двумя строками: один на строке 16 get-started.js , другой в строке 33
Панель «точки останова»

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

Деактивированные точки останова на панели " точки останова " отключены и прозрачны
![Деактивированные точки останова на панели "точки останова"][ImageDeactivatedBreakpoints]

Точки останова по изменению модели DOM

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

Настройка точки останова для изменения модели DOM.

  1. Откройте вкладку элементы .
  2. Перейдите к элементу, для которого вы хотите установить точку останова.
  3. Щелкните элемент правой кнопкой мыши.
  4. Наведите указатель мыши на пункт разрыв, а затем выберите изменения поддерева, изменения атрибутовили Удаление узла.
Рисунок 5

Контекстное меню для создания точки останова по изменению модели DOM
![Контекстное меню для создания точки останова по изменению модели DOM][ImageDomChangeBreakpoint]

Типы точек останова для изменения модели DOM

  • Изменения поддерева. Вызывается при удалении или добавлении дочернего узла, выбранного в данный момент, или изменении содержимого дочернего элемента. Не инициируется для изменений атрибутов дочернего узла или при любых изменениях в выбранном в данный момент узле.

  • Изменения атрибутов: активируется при добавлении или удалении атрибута на текущем выбранном узле или изменении значения атрибута.

  • Удаление узла: активируется при удалении текущего выбранного узла.

Точки останова XHR и FETCH

Используйте точку останова XHR, когда нужно прервать, когда URL-адрес запроса XHR содержат указанную строку. DevTools приостанавливается на строке кода, где XHR запускает send() метод.

Примечание

Эта функция также работает для запросов API FETCH .

Это может быть полезно, если вы видите, что ваша страница запрашивает неверный URL-адрес, и вам нужно быстро найти исходный код AJAX или FETCH, вызывающий неверный запрос.

Чтобы установить точку останова XHR, выполните указанные ниже действия.

  1. Откройте вкладку источники .
  2. Разверните область точки останова XHR .
  3. Нажмите кнопку Добавить точку останова.
  4. Введите строку, на которой вы хотите приостановить. DevTools приостанавливает работу, когда эта строка отображается в любом месте URL-адреса запроса XHR.
  5. Нажмите кнопку Enter , чтобы подтвердить.
Рисунок6

Создание точки останова XHR в точках останова XHR для любого запроса, содержащегося org в URL-адресе.
![Создание точки останова XHR][ImageXhrBreakpoint]

Точки останова прослушивателя событий

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

  1. Откройте вкладку источники .
  2. Разверните область точки останова для прослушивателя событий . DevTools отображает список категорий событий, например анимацию.
  3. Отметьте одну из этих категорий, чтобы приостановить любое событие из этой категории, или развернуть категорию и проверить определенное событие.
Рисунок7

Создание точки останова прослушивателя событий для deviceorientation
![Создание точки останова для прослушивателя событий][ImageEventListenerBreakpoint]

Точки останова для исключений

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

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

  2. Нажмите кнопку Пауза на вкладке исключения  приостановить выполнение . При включении значок становится синей.

    Рисунок8

    Кнопка " Пауза при исключениях "
    ![Кнопка "Пауза при исключениях"][ImagePauseExceptionsHighlight]

  3. Необязательный. Установите флажок приостановить на перехваченных исключениях , если вы также хотите приостанавливать на перехваченных исключениях помимо неперехваченных.

Рисунок9

Приостановлено при неперехваченном исключении
![Приостановлено при неперехваченном исключении][ImageUncaughtException]

Точки останова по функциям

Выполняйте debug(method) метод, где method — команда, функция или метод, для которого нужно выполнить отладку, когда вы хотите приостановить каждый раз при запуске определенной функции. Вы можете вставить debug() в код (например, console.log() инструкцию) или запустить метод из консоли DevTools. debug() эквивалентно установке точки останова строки кода в первой строке функции.

function sum(a, b) {
    let result = a + b; // DevTools pauses on this line.
    return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Проверка того, что Целевая функция находится в области

DevTools создает исключение, ReferenceError Если функция, которую вы хотите отладить, не находится в области действия.

(function () {
    function hey() {
        console.log('hey');
    }
    function yo() {
        console.log('yo');
    }
    debug(yo); // This works.
    yo();
})();
debug(hey); // This does not work.  hey() is out of scope.

Убедитесь в том, что Целевая функция находится в области действия, если вы запускаете debug() метод из консоли DevTools. Ниже описана одна из стратегий.

  1. Установите точку останова для строки кода , где находится функция в области.
  2. Активация точки останова.
  3. Выполняйте debug() метод на консоли DevTools, когда код по-прежнему придерживается в точке останова кода.

[ImageDeactivatedBreakpoints]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-page-js-breakpoints-deactivate-breakpoints.msft.png "Рисунок 4: отключенные точки останова в области "точки останова""
[ImageDomChangeBreakpoint]: /microsoft-edge/devtools-guide-chromium/media/javascript-elements-break-on-subtree-modifications.msft.png "Рисунок 5: контекстное меню для создания точки останова по изменению модели DOM"
[ImageXhrBreakpoint]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-page-js-xhr-fetch-breakpoints-org.msft.png "Рисунок 6: создание точки останова XHR"
[ImageEventListenerBreakpoint]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-page-js-event-listener-breakpoints-device-deviceorientation.msft.png "Рисунок 7: создание точки останова для прослушивателя событий"
[ImagePauseExceptionsHighlight]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-page-js-pause-on-exceptions.msft.png "Рисунок 8: кнопка "Пауза при исключениях""
[ImageUncaughtException]: /microsoft-edge/devtools-guide-chromium/media/javascript-sources-page-js-paused-on-exception.msft.png "Рис. 9: приостанавливается на неперехваченном исключении"

Примечание

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