Справочник по отладке JavaScript

Kayce Basques

Sofia Emelianova

Откройте для себя новые рабочие процессы отладки с помощью этого подробного справочника по функциям отладки Chrome DevTools.

См. раздел «Начало работы с отладкой JavaScript в Chrome DevTools», чтобы изучить основы отладки.

Приостановить код с точками останова

Установите точку останова, чтобы вы могли приостановить код в середине его выполнения. Чтобы узнать, как устанавливать точки останова, см. раздел «Приостановка кода с помощью точек останова» .

Проверка значений во время паузы

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

Вы можете использовать консоль для запроса оцененных переменных, констант и объектов.

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

Предварительный просмотр свойств класса/функции при наведении

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

Шаг по коду

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

Перешагнуть строку кода

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

Например, предположим, что вы отлаживаете следующий код:

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

Выйти за пределы строки кода

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

Например, предположим, что вы отлаживаете следующий код:

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 выполняет сценарий до следующей точки останова, если таковая имеется.

Принудительное выполнение скрипта

Чтобы игнорировать все точки останова и принудительно возобновить выполнение сценария, нажмите и удерживайте кнопку «Возобновить выполнение сценария». а затем выберите Принудительное выполнение сценария .

Изменить контекст темы

При работе с веб-воркерами или сервис-воркерами щелкните контекст, указанный на панели «Потоки» , чтобы переключиться на этот контекст. Значок синей стрелки показывает, какой контекст выбран в данный момент.

Панель «Потоки» на скриншоте выше обведена синим цветом.

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

Пошаговое рассмотрение выражений, разделенных запятыми

Ключевой момент: начиная с Chrome версии 108, отладчик может выполнять выражения как через точку с запятой ( ; ), так и через запятую ( , ).

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

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

bar();

При минимизации он содержит разделенное запятыми выражение foo(),foo(),42 :

function foo(){}function bar(){return foo(),foo(),42}bar();

Отладчик точно так же выполняет такие выражения.

Таким образом, поведение шага идентично:

• Между минифицированным и авторским кодом.
• При использовании исходных карт для отладки минимизированного кода с точки зрения исходного кода. Другими словами, когда вы видите точки с запятой, вы всегда можете рассчитывать на то, что сможете пройти через них, даже если фактический источник, который вы отлаживаете, минимизирован.

Просмотр и редактирование локальных, замыкающих и глобальных свойств.

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

• Дважды щелкните значение свойства, чтобы изменить его.
• Неперечислимые свойства выделены серым цветом.

Панель «Область» на скриншоте выше обведена синим цветом.

Просмотр текущего стека вызовов

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

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

Панель «Стек вызовов» на скриншоте выше обведена синим цветом.

Примечание. Если на строке кода нет паузы, панель «Стек вызовов» пуста.

Перезапустить функцию (кадр) в стеке вызовов

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

Чтобы перезапустить кадр:

1. Приостановить выполнение функции в точке останова . Панель «Стек вызовов» записывает порядок вызовов функций.

2. На панели «Стек вызовов» щелкните функцию правой кнопкой мыши и выберите «Перезапустить кадр» в раскрывающемся меню.

   

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

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

function foo(value) {
    console.log(value);
    bar(value);
}

function bar(value) {
    value++;
    console.log(value);
    debugger;
}

foo(0);

Функция foo() принимает 0 в качестве аргумента, регистрирует его и вызывает функцию bar() . Функция bar() , в свою очередь, увеличивает аргумент.

Попробуйте перезапустить кадры обеих функций следующим образом:

1. Скопируйте приведенный выше код в новый фрагмент и запустите его . Выполнение останавливается в точке останова строки кода debugger .
   Внимание: когда выполнение приостановлено, не изменяйте программно порядок кадров стека вызовов. Это может вызвать непредвиденные ошибки.
2. Обратите внимание, что отладчик показывает текущее значение рядом с объявлением функции: value = 1 .
3. Перезапустите фрейм bar() .
4. Выполните оператор увеличения значения, нажав F9 . Обратите внимание, что текущее значение увеличивается: value = 2 .
5. При необходимости на панели «Область » дважды щелкните значение, чтобы отредактировать его и установить нужное значение.

6. Попробуйте перезапустить кадр bar() и выполнить оператор приращения еще несколько раз. Стоимость продолжает расти.

   Ключевой момент: почему значение не сбрасывается на 0 ?

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

Таким образом, текущее значение аргумента сохраняется в памяти при перезапуске одной и той же функции.

1. Теперь перезапустите кадр foo() в стеке вызовов . Обратите внимание, что значение снова равно 0 .
   Ключевой момент: почему значение сбрасывается на 0 ?

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

Показывать кадры из списка игнорируемых

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

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

Попробуйте это на этой демонстрационной странице :

1. На панели «Источники» откройте файл src > app > app.component.ts .
2. Установите точку останова в функции increment() .
3. В разделе « Стек вызовов» установите или снимите флажок «Показать кадры из игнорируемого списка» и просмотрите соответствующий или полный список кадров в стеке вызовов.

Просмотр асинхронных кадров

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

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

Ключевой момент: DevTools реализует эту функцию «Асинхронная маркировка стека» на основе метода API console.createTask() . Реализация API зависит от фреймворков. Например, Angular поддерживает эту функцию .

Копировать трассировку стека

Щелкните правой кнопкой мыши в любом месте панели «Стек вызовов» и выберите «Копировать трассировку стека», чтобы скопировать текущий стек вызовов в буфер обмена.

Ниже приведен пример вывода:

getNumber1 (get-started.js:35)
inputsAreEmpty (get-started.js:22)
onClick (get-started.js:15)

Навигация по дереву файлов

Используйте панель страниц для навигации по дереву файлов.

Группируйте созданные и развернутые файлы в дереве файлов.

Примечание: это функция предварительного просмотра доступна в Chrome версии 104.

При разработке веб-приложений с использованием фреймворков (например, React или Angular ) может быть сложно ориентироваться в источниках из-за минифицированных файлов, генерируемых инструментами сборки (например, webpack или Vite ).

Чтобы облегчить вам навигацию по источникам, на панели «Источники» > «Страница» файлы можно группировать по двум категориям:

• Автор . Аналогично исходным файлам, которые вы просматриваете в своей IDE. DevTools генерирует эти файлы на основе исходных карт, предоставленных вашими инструментами сборки.
• Развернуто . Фактические файлы, которые читает браузер. Обычно эти файлы минимизированы.

Чтобы включить группировку, включите > Группировать файлы по авторским/развернутым в трехточечном меню вверху дерева файлов.

Скрыть источники из списка игнорируемых из дерева файлов

Примечание: это функция предварительного просмотра доступна в Chrome версии 106.

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

Чтобы полностью скрыть такие сценарии, выберите «Источники» > «Страница» > > Скрыть источники из списка игнорируемых .

Игнорировать сценарий или шаблон сценариев

Игнорируйте сценарий, чтобы пропустить его во время отладки. Если сценарий игнорируется, он скрывается на панели «Стек вызовов» , и вы никогда не вступаете в функции сценария при пошаговом выполнении кода.

Например, предположим, что вы выполняете этот код:

function animate() {
  prepare();
  lib.doFancyStuff(); // A
  render();
}

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

Игнорировать скрипт или каталог из дерева файлов

Чтобы игнорировать отдельный скрипт или весь каталог:

1. В разделе «Источники» > «Страница» щелкните правой кнопкой мыши каталог или файл сценария.
2. Выберите «Добавить каталог/скрипт для списка игнорирования» .

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

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

Игнорировать скрипт на панели редактора

Чтобы игнорировать скрипт на панели редактора :

1. Откройте файл.
2. Щелкните правой кнопкой мыши в любом месте.
3. Выберите Добавить сценарий, чтобы игнорировать список .

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

Игнорировать сценарий на панели «Стек вызовов»

Чтобы игнорировать сценарий на панели «Стек вызовов» :

1. Щелкните правой кнопкой мыши функцию из скрипта.
2. Выберите Добавить сценарий, чтобы игнорировать список .

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

Игнорировать скрипт из настроек

Видеть Настройки > Список игнорирования .

Запускайте фрагменты отладочного кода с любой страницы

Если вы снова и снова запускаете один и тот же код отладки в консоли, рассмотрите возможность использования фрагментов кода. Фрагменты — это исполняемые сценарии, которые вы создаете, сохраняете и запускаете в DevTools.

Дополнительную информацию см. в разделе «Запуск фрагментов кода с любой страницы» .

Следите за значениями пользовательских выражений JavaScript

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

• Нажмите «Добавить выражение». чтобы создать новое выражение часов.
• Нажмите Обновить чтобы обновить значения всех существующих выражений. Значения автоматически обновляются при выполнении кода.
• Наведите указатель мыши на выражение и нажмите «Удалить выражение». чтобы удалить его.

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

Когда вы открываете сценарий на панели «Страница» , DevTools показывает его содержимое на панели «Редактор» . На панели «Редактор» вы можете просматривать и редактировать свой код.

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

Сделать минифицированный файл читабельным

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

Чтобы просмотреть мини-файл в том виде, в котором он был загружен, нажмите { } в левом нижнем углу редактора .

Сложите блоки кода

Чтобы свернуть блок кода, наведите указатель мыши на номер строки в левом столбце и нажмите Крах .

Чтобы развернуть блок кода, нажмите {...} рядом с ним.

Чтобы настроить это поведение, см. Настройки > Настройки > Источники .

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

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

Чтобы отредактировать скрипт:

1. Откройте файл на панели «Редактор» панели «Источники» .
2. Внесите изменения на панели редактора .

3. Нажмите Command + S (Mac) или Ctrl + S (Windows, Linux), чтобы сохранить. DevTools добавляет весь JS-файл в движок JavaScript Chrome.

   

   Панель редактора на скриншоте выше обведена синим цветом.

Редактировать приостановленную функцию в реальном времени

Примечание. Эта функция доступна в Chrome версии 105.

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

• Вы можете редактировать только самую верхнюю функцию в стеке вызовов .
• Внизу по стеку не должно быть рекурсивных вызовов одной и той же функции.

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

Чтобы редактировать функцию в реальном времени:

1. Приостановить выполнение с помощью точки останова .
2. Отредактируйте приостановленную функцию.
3. Нажмите Command / Control + S , чтобы применить изменения. Отладчик автоматически перезапускает функцию .
4. Продолжайте выполнение.

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

В этом примере переменные addend1 и addend2 изначально имеют неправильный string тип. Таким образом, вместо добавления чисел строки объединяются. Чтобы это исправить, во время живого редактирования добавляются функции parseInt() .

Поиск и замена текста в скрипте

Чтобы найти текст в скрипте:

1. Откройте файл на панели «Редактор» панели «Источники» .
2. Чтобы открыть встроенную панель поиска, нажмите Command + F (Mac) или Ctrl + F (Windows, Linux).
3. В строке введите свой запрос. По желанию вы можете:
   • Нажмите Укажите регистр, чтобы сделать запрос чувствительным к регистру.
   • Нажмите Используйте регулярное выражение для поиска с использованием выражения RegEx.
4. Нажмите Enter . Чтобы перейти к предыдущему или следующему результату поиска, нажмите кнопку вверх или вниз.

Чтобы заменить найденный текст:

1. В строке поиска нажмите кнопку Кнопка «Заменить» .
2. Введите текст для замены, затем нажмите «Заменить» или «Заменить все» .

Отключить JavaScript

См . Отключение JavaScript с помощью Chrome DevTools .