Откройте для себя новые рабочие процессы отладки с помощью этого подробного справочника по функциям отладки Chrome DevTools.
См. раздел «Начало работы с отладкой JavaScript в Chrome DevTools», чтобы изучить основы отладки.
Приостановить код с точками останова
Установите точку останова, чтобы вы могли приостановить код в середине его выполнения. Чтобы узнать, как устанавливать точки останова, см. раздел «Приостановка кода с помощью точек останова» .
Проверка значений во время паузы
Пока выполнение приостановлено, отладчик оценивает все переменные, константы и объекты в текущей функции до точки останова. Отладчик отображает текущие значения рядом с соответствующими объявлениями.
Вы можете использовать консоль для запроса оцененных переменных, констант и объектов.
Предварительный просмотр свойств класса и функции при наведении курсора мыши
Пока выполнение приостановлено, наведите указатель мыши на имя класса или функции, чтобы просмотреть его свойства.
Шаг по коду
Как только ваш код будет приостановлен, пройдите по нему, по одному выражению за раз, исследуя попутно поток управления и значения свойств.
Перешагнуть строку кода
При приостановке выполнения строки кода, содержащей функцию, не имеющую отношения к отлаживаемой проблеме, нажмите «Перейти через Step_over» , чтобы выполнить функцию, не входя в нее.
Например, предположим, что вы отлаживаете следующий код:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name); // D
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name; // C
}
Вы приостановлены на A . После того, как вы нажали Step_over , DevTools выполнит весь код функции, которую вы выполняете, то есть B и C Затем DevTools останавливается на D
Шаг в строку кода
При приостановке вызова функции, связанной с отлаживаемой проблемой, нажмите «Вступить в процесс». 
исследовать эту функцию.
Например, предположим, что вы отлаживаете следующий код:
function updateHeader() {
var day = new Date().getDay();
var name = getName(); // A
updateName(name);
}
function getName() {
var name = app.first + ' ' + app.last; // B
return name;
}
Вы приостановлены на A . Нажимая Step In , DevTools выполняет эту строку кода, а затем делает паузу на B
Выйти за пределы строки кода
При приостановке выполнения функции, не связанной с отлаживаемой проблемой, нажмите «step_out» , чтобы выполнить оставшуюся часть кода функции.
Например, предположим, что вы отлаживаете следующий код:
function updateHeader() {
var day = new Date().getDay();
var name = getName();
updateName(name); // C
}
function getName() {
var name = app.first + ' ' + app.last; // A
return name; // B
}
Вы приостановлены на A . При нажатии на Step_out DevTools выполняет остальную часть кода в getName() (в этом примере это просто B , а затем делает паузу на C
Запуск всего кода до определенной строки
При отладке длинной функции может оказаться много кода, не связанного с отлаживаемой проблемой.
Вы можете пройти через все строки, но это может быть утомительно. Вы можете установить точку останова на интересующей вас строке, а затем нажать возобновить , но есть более быстрый способ.
Щелкните правой кнопкой мыши интересующую вас строку кода и выберите Продолжить здесь . DevTools запускает весь код до этого момента, а затем делает паузу на этой строке.
Возобновить выполнение скрипта
Чтобы продолжить выполнение скрипта после паузы, нажмите «Возобновить» . DevTools выполняет сценарий до следующей точки останова, если таковая имеется.
Принудительное выполнение скрипта
Чтобы игнорировать все точки останова и принудительно возобновить выполнение сценария, нажмите и удерживайте кнопку « Возобновить выполнение сценария» , а затем выберите «Принудительное выполнение сценария» play_arrow .
Изменить контекст темы
При работе с веб-воркерами или сервис-воркерами щелкните контекст, указанный на панели «Потоки» , чтобы переключиться на этот контекст. Значок синей стрелки указывает, какой контекст выбран.
Например, предположим, что вы остановились на точке останова как в основном сценарии, так и в сценарии сервисного работника. Вы хотите просмотреть локальные и глобальные свойства контекста сервисного работника, но на панели «Источники» отображается основной контекст сценария. Щелкнув запись сервисного работника на панели «Потоки», вы сможете переключиться на этот контекст.
Пошаговое рассмотрение выражений, разделенных запятыми
Вы можете отлаживать минифицированный код, проходя через выражения, разделенные запятыми. Например, рассмотрим следующий код:
function foo() {}
function bar() {
foo();
foo();
return 42;
}
bar();
При минимизации он содержит разделенное запятыми выражение foo(),foo(),42 :
function foo(){}function bar(){return foo(),foo(),42}bar();
Отладчик точно так же выполняет такие выражения.
Таким образом, поведение шага идентично:
- Между минифицированным и авторским кодом.
- При использовании исходных карт для отладки минимизированного кода с точки зрения исходного кода. Другими словами, когда вы видите точки с запятой, вы всегда можете ожидать, что их придется пройти, даже если исходный код, который вы отлаживаете, минимизирован.
Просмотр и редактирование локальных, замыкающих и глобальных свойств.
Во время приостановки выполнения строки кода используйте панель «Область» для просмотра и редактирования значений свойств и переменных в локальной, замыкающей и глобальной областях.
- Дважды щелкните значение свойства, чтобы изменить его.
- Неперечислимые свойства выделены серым цветом.
Просмотр текущего стека вызовов
Во время паузы на строке кода используйте панель «Стек вызовов» , чтобы просмотреть стек вызовов, который привел вас к этой точке.
Выберите запись, чтобы перейти к строке кода, в которой была вызвана эта функция. Значок синей стрелки показывает, какую функцию DevTools выделяет.
Перезапустить функцию (кадр) в стеке вызовов
Чтобы наблюдать за поведением функции и повторно запустить ее без необходимости перезапускать весь поток отладки, вы можете перезапустить выполнение отдельной функции, когда эта функция приостановлена. Другими словами, вы можете перезапустить кадр функции в стеке вызовов.
Чтобы перезапустить кадр:
- Приостановить выполнение функции в точке останова . Панель «Стек вызовов» записывает порядок вызовов функций.
На панели «Стек вызовов» щелкните функцию правой кнопкой мыши и выберите «Перезапустить кадр» в раскрывающемся меню.
Чтобы понять, как работает кадр перезапуска , обратите внимание на следующее:
function foo(value) {
console.log(value);
bar(value);
}
function bar(value) {
value++;
console.log(value);
debugger;
}
foo(0);
Функция foo() принимает 0 в качестве аргумента, регистрирует его и вызывает функцию bar() . Функция bar() , в свою очередь, увеличивает аргумент.
Попробуйте перезапустить кадры обеих функций следующим образом:
Скопируйте код примера в новый фрагмент и запустите его . Выполнение останавливается в точке останова строки кода
debugger.Обратите внимание, что отладчик показывает текущее значение рядом с объявлением функции:
value = 1.
Перезапустите фрейм
bar().
Выполните оператор увеличения значения, нажав
F9.
Обратите внимание, что текущее значение увеличивается: value = 2.При необходимости на панели «Область» дважды щелкните значение, чтобы отредактировать его и установить нужное значение.
Попробуйте перезапустить кадр
bar()и выполнить оператор приращения еще несколько раз. Стоимость продолжает расти.
Перезапустите кадр
foo()в стеке вызовов .
Обратите внимание, что значение снова равно 0.
Возобновите выполнение сценария (
F8), чтобы завершить работу с этим руководством.
Показать кадры из списка игнорируемых
По умолчанию на панели «Стек вызовов» отображаются только те кадры, которые относятся к вашему коду, и не учитываются любые сценарии, добавленные в настройки «Настройки» > «Список игнорирования» .
Чтобы просмотреть полный стек вызовов, включая сторонние кадры, включите «Показывать кадры из игнорируемого списка» в разделе «Стек вызовов» .
Попробуйте это в этой демонстрации :
- На панели «Источники» откройте файл
src>app>app.component.ts. - Установите точку останова в функции
increment(). - В разделе «Стек вызовов» установите или снимите флажок «Показать кадры из игнорируемого списка» и просмотрите соответствующий или полный список кадров в стеке вызовов.
Просмотр асинхронных кадров
Если это поддерживается используемой вами платформой, DevTools может отслеживать асинхронные операции, связывая обе части асинхронного кода вместе.
В этом случае стек вызовов отображает всю историю вызовов, включая кадры асинхронных вызовов.
Key Point DevTools реализует эту функцию «Асинхронная маркировка стека» на основе метода API console.createTask() . Реализация API зависит от фреймворков. Например, Angular поддерживает эту функцию .
Копировать трассировку стека
Щелкните правой кнопкой мыши в любом месте панели «Стек вызовов» и выберите «Копировать трассировку стека» , чтобы скопировать текущий стек вызовов в буфер обмена.
Вот пример вывода:
getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)
Навигация по дереву файлов
Используйте панель страниц для навигации по дереву файлов.
Группируйте созданные и развернутые файлы в дереве файлов.
При разработке веб-приложений с использованием фреймворков (например, React или Angular ) может быть сложно ориентироваться в источниках из-за минифицированных файлов, генерируемых инструментами сборки (например, webpack или Vite ).
Чтобы облегчить вам навигацию по источникам, на панели «Источники» > «Страница» файлы можно группировать по двум категориям:
- код Автор . Аналогично исходным файлам, которые вы просматриваете в своей IDE. DevTools генерирует эти файлы на основе исходных карт, предоставленных вашими инструментами сборки.
Развернуто . Фактические файлы, которые читает браузер. Обычно эти файлы минимизированы.
Чтобы включить группировку, нажмите more_vert > Группировать файлы по авторским/развернутым. 
в меню вверху дерева файлов.
Скрыть источники из списка игнорируемых из дерева файлов
Чтобы помочь вам сосредоточиться только на создаваемом вами коде, на панели «Источники» > «Страница» все скрипты или каталоги, добавленные в настройки «Настройки» > «Список игнорирования», по умолчанию отображаются серым цветом.
Чтобы полностью скрыть такие сценарии, выберите «Источники» > «Страница» > «more_vert» > «Скрыть источники из списка игнорируемых». 
.
Игнорировать сценарий или шаблон сценариев
Игнорируйте сценарий, чтобы пропустить его во время отладки. Если сценарий игнорируется, он скрывается на панели «Стек вызовов» , и вы никогда не вступаете в функции сценария при пошаговом выполнении кода.
Например, предположим, что вы выполняете этот код:
function animate() {
prepare();
lib.doFancyStuff(); // A
render();
}
A — сторонняя библиотека, которой вы доверяете. Если вы уверены, что проблема, которую вы отлаживаете, не связана со сторонней библиотекой, имеет смысл игнорировать скрипт.
Игнорировать скрипт или каталог из дерева файлов
Чтобы игнорировать отдельный скрипт или весь каталог:
- В разделе «Источники» > «Страница» щелкните правой кнопкой мыши каталог или файл сценария.
- Выберите «Добавить каталог/скрипт для списка игнорирования» .
Если вы не скрыли источники из игнорируемого списка , вы можете выбрать такой источник в дереве файлов и на баннере с предупреждением нажать «Удалить из игнорируемого списка» или «Настроить» .
В противном случае вы можете удалить скрытые и игнорируемые каталоги и скрипты из списка в настройках «Настройки» > «Список игнорирования» .
Игнорировать скрипт на панели редактора
Чтобы игнорировать скрипт на панели редактора :
- Откройте файл.
- Щелкните правой кнопкой мыши в любом месте.
- Выберите Добавить сценарий, чтобы игнорировать список .
Удалить скрипт из списка игнорируемых можно в настройках Настройки > Список игнорируемых .
Игнорировать сценарий на панели «Стек вызовов»
Чтобы игнорировать сценарий на панели «Стек вызовов» :
- Щелкните правой кнопкой мыши функцию из скрипта.
- Выберите Добавить сценарий, чтобы игнорировать список .
Удалить скрипт из списка игнорируемых можно в настройках Настройки > Список игнорируемых .
Игнорировать скрипт из настроек
См. настройки «Настройки» > «Список игнорирования» .
Запускайте фрагменты отладочного кода с любой страницы
Если вы снова и снова запускаете один и тот же код отладки в консоли, рассмотрите возможность использования фрагментов кода. Фрагменты — это исполняемые сценарии, которые вы создаете, сохраняете и запускаете в DevTools.
Дополнительную информацию см. в разделе «Запуск фрагментов кода с любой страницы» .
Следите за значениями пользовательских выражений JavaScript
Используйте панель «Контроль» для просмотра значений пользовательских выражений. Вы можете просмотреть любое допустимое выражение JavaScript.
- Нажмите «Добавить выражение» , чтобы создать новое контрольное выражение.
- Нажмите «Обновить » , чтобы обновить значения всех существующих выражений. Значения автоматически обновляются при выполнении кода.
- Наведите указатель мыши на выражение и нажмите «Удалить выражение».
чтобы удалить его.
Проверяйте и редактируйте сценарии
Когда вы открываете сценарий на панели «Страница» , DevTools показывает его содержимое на панели «Редактор» . На панели «Редактор» вы можете просматривать и редактировать свой код.
Кроме того, вы можете переопределить содержимое локально или создать рабочую область и сохранить изменения, внесенные в DevTools, непосредственно в локальные источники.
Сделать минифицированный файл читабельным
По умолчанию панель «Источники» печатает уменьшенные файлы. При красивой печати редактор может отображать одну длинную строку кода в нескольких строках со знаком - , чтобы указать, что это продолжение строки.
Чтобы просмотреть мини-файл в том виде, в котором он был загружен, щелкните data_object в левом нижнем углу редактора .
Сложите блоки кода
Чтобы свернуть блок кода, наведите указатель мыши на номер строки в левом столбце и нажмите стрелку_drop_down Свернуть .
Чтобы развернуть блок кода, нажмите {...} рядом с ним.
Чтобы настроить это поведение, см. настройки «Настройки» > «Настройки» > «Источники» .
Редактировать скрипт
Исправляя ошибку, вы часто хотите протестировать некоторые изменения в вашем JavaScript. Вам не нужно вносить изменения во внешнем браузере, а затем перезагружать страницу. Вы можете редактировать свой сценарий в DevTools.
Чтобы отредактировать скрипт:
- Откройте файл на панели «Редактор» панели «Источники» .
- Внесите изменения на панели редактора .
Нажмите Command + S (Mac) или Ctrl + S (Windows, Linux), чтобы сохранить. DevTools исправляет весь файл JavaScript в движке JavaScript Chrome.
Панель редактора выделена синим цветом.
Редактировать приостановленную функцию в реальном времени
Пока выполнение приостановлено, вы можете редактировать текущую функцию и применять изменения в реальном времени со следующими ограничениями:
- Вы можете редактировать только самую верхнюю функцию в стеке вызовов .
- Внизу по стеку не должно быть рекурсивных вызовов одной и той же функции.
Чтобы редактировать функцию в реальном времени:
- Приостановить выполнение с помощью точки останова .
- Отредактируйте приостановленную функцию.
- Нажмите Command / Control + S , чтобы применить изменения. Отладчик автоматически перезапускает функцию .
- Продолжайте выполнение.
Посмотрите видео, чтобы изучить этот рабочий процесс.
В этом примере переменные addend1 и addend2 изначально имеют неправильный string тип. Таким образом, вместо добавления чисел строки объединяются. Чтобы исправить это, во время живого редактирования добавляются функции parseInt() .
Поиск и замена текста в скрипте
Чтобы найти текст в скрипте:
- Откройте файл на панели «Редактор» панели «Источники» .
- Чтобы открыть встроенную панель поиска, нажмите Command + F (Mac) или Ctrl + F (Windows, Linux).
- В строке введите свой запрос.
По желанию вы можете:- Нажмите
Укажите регистр , чтобы сделать запрос чувствительным к регистру. - Нажмите
Используйте регулярное выражение для поиска с использованием выражения RegEx.
- Нажмите
- Нажмите Enter . Чтобы перейти к предыдущему или следующему результату поиска, нажмите кнопку вверх или вниз.
Чтобы заменить найденный текст:
- В строке поиска нажмите
Заменять . 
- Введите текст для замены, затем нажмите «Заменить» или «Заменить все» .