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

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

Выбор «Возобновить выполнение сценария».

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

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

Выбор «Принудительное выполнение сценария».

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

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

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

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

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

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

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

function foo() {}

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

bar();

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

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

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

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

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

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

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

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

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

Панель «Область действия».

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

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

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

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

Панель «Стек вызовов».

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

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

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

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

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

    Выбор кадра перезапуска в раскрывающемся меню.

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

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() . Перезапуск кадра bar().
  4. Выполните оператор увеличения значения, нажав F9 . Увеличение текущего значения. Обратите внимание, что текущее значение увеличивается: value = 2 .
  5. При необходимости на панели «Область » дважды щелкните значение, чтобы отредактировать его и установить нужное значение. Редактирование значения на панели «Области».
  6. Попробуйте перезапустить кадр bar() и выполнить оператор приращения еще несколько раз. Стоимость продолжает расти. Снова перезапуск кадра bar().

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

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

  1. Теперь перезапустите кадр foo() в стеке вызовов . Перезапуск кадра foo(). Обратите внимание, что значение снова равно 0 . ALT_TEXT_ЗДЕСЬ

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

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

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

Стек вызовов.

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

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

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

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

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

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

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

Кадры асинхронных вызовов.

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

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

Выбор «Копировать трассировку стека».

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

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

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

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

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

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

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

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

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

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

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

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

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

До и после сокрытия источников из игнорируемого списка.

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

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

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

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.

    Панель редактора.

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

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

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

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

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

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

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

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

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

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

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

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

Отключить JavaScript

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