Поделиться через

Функции отладки JavaScript

  • Статья

В этой статье описано, как использовать функции отладчика в Средствах разработки Microsoft Edge, в том числе как задать точку останова строки кода.

См. также:

Просмотр и изменение кода JavaScript

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

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

  1. Откройте веб-страницу, которую вы хотите отладить, в новом окне или вкладке. Вы можете использовать демонстрационную страницу Приступая к отладке JavaScript .

  2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  3. В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (значок ") .

  4. В области Навигатор выберите файл, который нужно изменить, чтобы открыть его в области Редактор. Если вы используете демонстрационную страницу, выберите get-started.js.

  5. В области Редактор измените файл. Например, добавьте alert("The add button was clicked"); функцию onClick демонстрационной страницы.

  6. Для сохранения нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS). Затем DevTools загружает файл JavaScript в подсистему JavaScript Microsoft Edge, и изменения вступают в силу немедленно.

    Средство

  7. Протестируйте изменение. Например, нажмите кнопку Добавить число 1 и число 2 на демонстрационной странице. Появится оповещение.

Изменения, внесенные в DevTools, полезны для быстрого тестирования исправления ошибок, но являются временными. Чтобы сделать изменение постоянным, необходимо внести изменения в исходный код, а затем повторно отправить файл на сервер.

Объяснение исходного кода с помощью Copilot в Edge

При проверке веб-страницы может потребоваться дополнительная информация об исходном коде, отображаемом в средстве Источники . С помощью функции Объяснить эти строки кода вы получите дополнительные сведения об исходном коде в Copilot в Edge:

Copilot на боковой панели Microsoft Edge с исходным кодом и объяснением.

Дополнительные сведения об этой функции см. в статье Объяснение исходного кода с помощью Copilot в Edge.

Переформатировать миниифицированный файл JavaScript с помощью красивой печати

Чтобы сделать уменьшенный файл пригодным для чтения человеком, нажмите кнопку Формат (формат) в нижней части области Редактор.

Кнопка

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

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

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

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

  1. Откройте веб-страницу, которую вы хотите отладить, в новом окне или вкладке. Вы можете использовать демонстрационную страницу Приступая к отладке JavaScript .

  2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  3. В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (значок ") .

  4. В области Навигатор выберите файл, содержащий строку кода для отладки. Если вы используете демонстрационную страницу, выберите get-started.js.

  5. Щелкните область слева от номера строки кода. Или щелкните правой кнопкой мыши номер строки и выберите Добавить точку останова.

    Затем рядом с номером строки появится красный кружок, указывающий точку останова:

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

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

Пошаговое выполнение кода

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

Шаг над строкой кода

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

Щелкните Шаг над

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

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2(); // B
    var sum = addend1 + addend2; // C
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value;
}
function getNumber2() {
    return inputs[1].value;
}

Вы приостановлены на A. После нажатия кнопки Шаг поверх devTools выполняет весь код в getNumber1() функции, а затем приостанавливает работу в B. Если еще раз щелкнуть Шаг, средства разработки выполняют весь код в getNumber2() функции, а затем приостанавливаются в C.

Шаг в строку кода

При приостановке в строке кода, содержащей вызов функции, связанный с отлаживаемой проблемой, нажмите кнопку Шаг в (Шаг в) для дальнейшего изучения этой функции:

Нажатие кнопки Шаг в

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

function updateLabel() {
    var addend1 = getNumber1(); // A
    var addend2 = getNumber2();
    var sum = addend1 + addend2;
    label.textContent = addend1 + " + " + addend2 + " = " + sum;
}
function getNumber1() {
    return inputs[0].value; // B
}
function getNumber2() {
    return inputs[1].value;
}

Вы приостановлены на A. После нажатия кнопки Шаг в devTools запустит эту строку кода, а затем приостанавливает работу в B.

Выход из строки кода

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

Нажатие кнопки

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

function onClick() {
  if (inputsAreEmpty()) {
    label.textContent = "Error: one or both inputs are empty."; // B
    return;
  }

  updateLabel(); // C
}
function inputsAreEmpty() {
  if (getNumber1() === "" || getNumber2() === "") { // A
    return true;
  } else {
    return false;
  }
}

Вы приостановлены на A. После нажатия кнопки Шаг в devTools выполняет оставшуюся часть кода в inputsAreEmpty(), а затем приостанавливает B работу , если inputsAreEmpty возвращается trueзначение , или приостанавливается в C противном случае.

Выполнение всего кода до определенной строки

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

  • Вы можете выполнить шаг по всем строкам функции, по одной, нажав кнопку Шаг над (шаг через) много раз.

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

  • Но есть более быстрый способ: щелкните правой кнопкой мыши строку кода, а затем выберите Продолжить здесь:

    Нажатие кнопки

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

Перезапуск верхней функции стека вызовов

Чтобы приостановить работу в первой строке верхней функции в стеке вызовов, пока она приостановлена в строке кода, щелкните правой кнопкой мыши область Стек вызовов и выберите Пункт Перезапустить кадр. Функция top — это последняя запущенная функция.

Следующий код является примером для пошагового выполнения:

function updateLabel() {
  var addend1 = getNumber1(); // B
  var addend2 = getNumber2();
  var sum = addend1 + addend2;
  label.textContent = addend1 + " + " + addend2 + " = " + sum; // A
}

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

Выбор перезапуска кадра

Возобновление выполнения скрипта

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

Нажатие кнопки Возобновление выполнения скрипта

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

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

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

Изменение контекста потока

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

Панель

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

Просмотр и изменение свойств и переменных

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

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

Панель

Просмотр значений выражений JavaScript

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

Панель контрольных значений

  • Чтобы создать новое выражение watch, нажмите кнопку Добавить выражение watch (Добавить выражение watch).

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

  • Чтобы удалить выражение watch, щелкните его правой кнопкой мыши и выберите команду Удалить watch выражение.

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

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

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

Панель

Примечание.

Если строка кода не приостановлена, панель стек вызовов пуста.

Копирование трассировки стека

Чтобы скопировать текущий стек вызовов в буфер обмена, щелкните правой кнопкой мыши область Стек вызовов и выберите Копировать трассировку стека:

Команда

Следующий код является примером выходных данных:

getNumber2 (get-started.js:40)
inputsAreEmpty (get-started.js:24)
onClick (get-started.js:16)

Игнорирование скрипта или шаблона скриптов

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

Например, в следующем фрагменте кода строка A использует lib, которая является сторонней библиотекой. Если вы уверены, что проблема, которую выполняется отладка, не связана с этой сторонней библиотекой, имеет смысл добавить сценарий в список игнорировать:

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

Добавление скрипта в список прогнорирования из области Редактор

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

  1. Откройте файл.

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

    Добавление скрипта в список прогнорирования из области Редактор

Добавление скрипта в список "Игнорировать" на панели "Стек вызовов"

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

  • Приостановка кода в точке останова.

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

    Добавление скрипта в список

Добавление скрипта в список "Игнорировать" из параметров

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

  1. Чтобы открыть параметры, в средствах разработки щелкните значок Настройка и управление средствами разработки (значок Настройка и управление средствами разработки) и щелкните Параметры (значок Параметры). Или, пока devTools имеет фокус, нажмите клавишу F1.

  2. Перейдите на страницу Игнорировать списокпараметров.

    Добавление скрипта в список прогнорирования из параметров

  3. Нажмите кнопку Добавить шаблон . Показан рекомендуемый шаблон: /framework\.js$

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

  5. Нажмите кнопку Добавить.

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

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

См. статью Запуск фрагментов Кода JavaScript на любой веб-странице.

Используйте # sourceURL для присвоения имени вычисляемого и встроенного кода в средствах разработки

Чтобы сделать блок кода, который не является файлом, имеет имя файла в средствах разработки, в том числе в средстве Источники , используйте # sourceURL прагму в комментарии.

Блоки кода, которые не являются файлами, включают:

  • Код JavaScript, выполняемый с помощью eval() функции .
  • Код JavaScript, который находится в теге <script> .
  • Код CSS, который находится в теге <style> .

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

Имена файлов отображаются в пользовательском интерфейсе DevTools, например в следующих расположениях:

  • Панель "Навигатор " средства "Источники ".
  • Стек вызовов в области Отладчик средства "Источники".
  • Вкладка файла в области Редактор средства "Источники".
  • Журнал, предупреждения и сообщения об ошибках в средстве консоли .
  • Диаграмма пламени в средстве производительности .

Прагма # sourceURL с синтаксисом //# sourceURL=my-assigned-file-name.js или /*# sourceURL=my-assigned-file-name.css*/— это специальный комментарий, который дает вычисляемом и встроенному коду имя виртуального файла в средствах разработки.

# sourceURL Используйте прагму, чтобы присвоить имя виртуального файла блокам кода, которые не являются файлами, чтобы отобразить это имя файла в средстве "Источники" и во всех средствах разработки. Например:

  • Для JavaScript:

    function sum(a, b) {
  return a + b;
}

console.log(sum(1, 2));

//# sourceURL=math-utilities.js

  • Для CSS:

    .card {
  padding: 1rem;
  border-radius: 0.5rem;
}

/*# sourceURL=card-styles.css*/

В результате средства разработки отображают эти блоки кода вместе с указанными именами виртуальных файлов для них (math-utilities.js и card-styles.css):

Инструменты

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.