Приостановите свой код с помощью точек останова

Kayce Basques

Sofia Emelianova

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

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

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

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

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

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

Чтобы установить точку останова на строке кода в DevTools:

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

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

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

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

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

Условные точки останова на строке кода

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

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

Чтобы установить условную точку останова на строке кода:

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

В этом примере показана условная точка останова на строке кода, которая срабатывает только тогда, когда x превышает 10 в цикле на итерации i=6 .

Записывать точки останова по строкам кода

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

Чтобы установить точку журнала:

1. Откройте панель «Источники» .
2. Откройте файл, содержащий строку кода, на которой вы хотите прервать работу.
3. Перейдите к строке кода.
4. Слева от строки кода находится столбец с номером строки. Щелкните его правой кнопкой мыши.
5. Выберите Добавить точку журнала . Под строкой кода отображается диалоговое окно.

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

   Например, вы можете войти:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   В этом случае зарегистрированное сообщение:

   // str = "test"
   // num = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

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

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

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

Используйте раздел «Точки останова» , чтобы отключить, изменить или удалить точки останова на строке кода.

Редактировать группы точек останова

В разделе «Точки останова» точки останова группируются по файлам и упорядочиваются по номерам строк и столбцов. С группами можно делать следующее:

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

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

Группы имеют контекстные меню. В разделе «Точки останова» щелкните группу правой кнопкой мыши и выберите:

• Удалить все точки останова в файле (группе).
• Отключите все точки останова в файле.
• Включите все точки останова в файле.
• Удалить все точки останова (во всех файлах).
• Удалите другие точки останова (в других группах).

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

Чтобы отредактировать точку останова:

• Нажмите рядом с точкой останова, чтобы включить или отключить ее. Когда вы отключаете точку останова, на панели «Источники» маркер рядом с номером строки становится прозрачным.
• Наведите курсор на точку останова и нажмите редактировать и чтобы удалить его.

• При редактировании точки останова измените ее тип из раскрывающегося списка во встроенном редакторе.

  

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

  

  • Раскрыть местоположение.
  • Измените условие или точку журнала.
  • Включите все точки останова.
  • Отключите все точки останова.
  • Удалить точку останова.
  • Удалите другие точки останова (во всех файлах).
  • Удалить все точки останова (во всех файлах).

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

Пропускайте точки останова с помощью «Никогда не делайте пауз здесь»

Используйте точку останова «Никогда не делать паузу здесь », чтобы пропустить паузы, которые могут произойти по другим причинам. Это может быть полезно, если вы включили точки останова для исключений , но отладчик продолжает останавливаться на особенно шумном исключении, в отладке которого вы не заинтересованы.

Чтобы отключить звук места разрыва:

1. На панели «Источники» откройте исходный файл и найдите строку, на которой вы не хотите прерываться.
2. Щелкните правой кнопкой мыши номер строки в столбце номера строки слева, рядом с оператором, вызывающим разрыв.
3. В раскрывающемся меню выберите Никогда не делать паузу здесь . Рядом со строкой появится оранжевая (условная) точка останова.

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

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

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

Ключевой момент: точки останова на строке кода переопределяют другие причины останова, возникающие из того же оператора. Это означает, что для предотвращения остановки вы также можете использовать точки журнала и условные точки останова, условие которых оценивается как ложное. Фактически, точка останова « Никогда не делать паузу здесь» — это просто условная точка останова с false условием.

Точки останова изменения DOM

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

Чтобы установить точку останова изменения DOM:

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

В этом примере показано контекстное меню для создания точки останова изменения DOM.

Список точек останова изменения DOM можно найти здесь:

• Панель «Элементы» > «Точки останова DOM» .
• Источники > Боковая панель «Точки останова DOM» .

Там вы можете:

• Включите или отключите их с помощью .
• Щелкните правой кнопкой мыши > Удалить или показать их в DOM.

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

• Модификации поддеревьев . Срабатывает, когда дочерний элемент выбранного в данный момент узла удаляется или добавляется или содержимое дочернего узла изменяется. Не срабатывает при изменении атрибутов дочернего узла или при любых изменениях текущего выбранного узла.
• Изменения атрибутов : срабатывает, когда атрибут добавляется или удаляется в выбранном в данный момент узле или когда изменяется значение атрибута.
• Удаление узла : срабатывает, когда выбранный в данный момент узел удаляется.

XHR/точки останова выборки

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

Одним из примеров того, когда это полезно, является ситуация, когда вы видите, что ваша страница запрашивает неверный URL-адрес, и вы хотите быстро найти исходный код AJAX или Fetch, вызывающий неправильный запрос.

Чтобы установить точку останова XHR/выборки:

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

В этом примере показано, как создать точку останова XHR/fetch в точках останова XHR/fetch для любого запроса, который содержит org в URL-адресе.

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

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

1. Щелкните панель «Источники» .
2. Разверните панель «Точки останова прослушивателя событий» . DevTools отображает список категорий событий, например «Анимация» .
3. Установите флажок в одной из этих категорий, чтобы приостанавливать выполнение любого события из этой категории, или разверните категорию и проверьте конкретное событие.

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

Кроме того, отладчик приостанавливает работу на событиях, происходящих в веб-воркерах или рабочихлетах любого типа, включая рабочиелеты общего хранилища .

В этом примере показано, что отладчик приостановил работу по событию setTimer , произошедшему в сервисном работнике.

Список прослушивателей событий также можно найти на панели «Элементы» > «Прослушиватели событий» .

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

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

Ключевой момент: в настоящее время в сеансе отладки Node.js вы можете делать паузу на перехваченных исключениях, только если вы также делаете паузу на неперехваченных исключениях. Подробности см. в разделе «Ошибка Chromium № 1382762» .

В разделе «Точки останова» на панели «Источники» включите один или оба следующих параметра, а затем выполните код:

• Проверять Пауза на неперехваченных исключениях .

  

  В этом примере выполнение приостанавливается из-за неперехваченного исключения.

• Проверять Пауза на пойманных исключениях .

  

  В этом примере выполнение приостанавливается из-за перехваченного исключения.

Исключения в асинхронных вызовах

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

Перехваченные исключения и проигнорированный код

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

В следующем примере показано, как отладчик приостановил работу из-за перехваченного исключения, выданного игнорируемым library.js , которое проходит через неигнорируемый mycode.js .

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

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

Вызовите debug(functionName) , где functionName — это функция, которую вы хотите отладить, если вы хотите приостановить работу при каждом вызове определенной функции. Вы можете вставить 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 doesn't work. hey() is out of scope.

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

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

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

API доверенного типа обеспечивает защиту от эксплойтов безопасности, известных как атаки межсайтового скриптинга (XSS).

Ключевой термин: межсайтовый скриптинг на основе DOM происходит, когда данные из источника , контролируемого пользователем (например, имени пользователя или URL-адреса перенаправления, взятого из фрагмента URL-адреса), достигают приемника , который представляет собой функцию, подобную eval() или средство установки свойств, например .innerHTML , который может выполнять произвольный код JavaScript.

В разделе «Точки останова» на панели «Источники» перейдите в раздел «Точки останова нарушения CSP» и включите один из следующих параметров или оба, а затем выполните код:

• Проверять Нарушения раковины .

  

  В этом примере выполнение приостанавливается из-за нарушения приемника.

• Проверять Нарушения политики .

  

  В этом примере выполнение приостанавливается из-за нарушения политики. Политики доверенных типов настраиваются с помощью trustedTypes.createPolicy .

Более подробную информацию об использовании API вы можете найти:

• Для достижения целей безопасности посетите страницу Предотвращение уязвимостей межсайтового скриптинга на основе DOM с помощью доверенных типов .
• Для отладки см. раздел Реализация отладки CSP и доверенных типов в Chrome DevTools .