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

Обзор инструмента источников

Используйте средство Источники для просмотра, изменения и отладки интерфейсного кода JavaScript, а также для просмотра ресурсов, составляющих текущую веб-страницу.

Подробное содержимое:

Панели "Навигатор", "Редактор" и "Отладчик"

Средство "Источники " имеет три области:

Панель Действия
Панель навигатора Перейдите между ресурсами, возвращаемыми с сервера, чтобы создать текущую веб-страницу. Выберите файлы, изображения и другие ресурсы и просмотрите пути к ним. При необходимости настройте локальную рабочую область для сохранения изменений непосредственно в исходных файлах.
область Редактор Просмотр Файлов JavaScript, HTML, CSS и других файлов, возвращаемых с сервера. Внесите экспериментальные изменения в JavaScript или CSS. Изменения сохраняются до тех пор, пока вы не обновите страницу, или сохраняются после обновления страницы, если сохранить в локальный файл с помощью рабочих областей. При использовании рабочих областей или переопределений можно также редактировать HTML-файлы.
Панель отладчика Используйте отладчик JavaScript для задания точек останова, приостановки выполнения JavaScript и пошагового выполнения кода, включая внесенные изменения, при просмотре всех указанных выражений JavaScript. Отслеживайте и вручную изменяйте значения переменных, область для текущей строки кода.

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

Области средства

Если средства разработки широкие, область Отладчик размещается справа и включает Область и Контроль:

Навигация, просмотр, изменение и отладка Кода JavaScript, возвращенного сервером

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

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

Выбор файлов с помощью панели "Навигатор"

Используйте панель Навигатор (слева) для перехода между ресурсами, возвращаемыми сервером для создания текущей веб-страницы. Выберите файлы, изображения и другие ресурсы и просмотрите пути к ним.

Панель

Панель Навигатор содержит следующие вкладки:

TAB Описание Документы
Page Просмотрите ресурсы, скачанные браузером с сервера или файловой системы, проверьте их содержимое и код отладки. Использование вкладки Страница для просмотра ресурсов, создающих текущую веб-страницу
Рабочая область Просматривайте и редактируйте локальные файлы в Средствах разработки, чтобы использовать DevTools в качестве интегрированной среды разработки (IDE) в браузере. Добавление локальной папки в рабочую область для редактирования файлов и сохранения изменений на диске с помощью средств разработки
Переопределения Поэкспериментируйте с изменениями веб-страницы и сохраните изменения после обновления веб-страницы, не сопоставляя изменения с исходным кодом веб-страницы. Использование вкладки Переопределения для переопределения файлов сервера локальными файлами
Скрипты содержимого Просмотр сценариев содержимого, загруженных расширением Microsoft Edge. Использование вкладки Скрипты содержимого для расширений Microsoft Edge
Фрагменты Создайте и сохраните фрагменты кода JavaScript, чтобы можно было легко запустить фрагмент Кода JavaScript на любой веб-странице. Использование вкладки "Фрагменты" для запуска фрагментов кода JavaScript на любой странице

Чтобы получить доступ к скрытым вкладкам области Навигатор, нажмите кнопку Дополнительные вкладки (Дополнительные вкладки).

Подробные сведения приведены ниже. Также ниже: Открытие файлов с помощью меню "Команда".

Использование вкладки Страница для просмотра ресурсов, создающих текущую веб-страницу

На вкладке Страница в инструменте Источники отображаются ресурсы, используемые текущей веб-страницей, такие как HTML-документ веб-страницы, файлы JavaScript, CSS-файлы или изображения. Ресурсы, отображаемые на вкладке Страница , организованы в виде дерева, соответствующего файловой системе или пути к серверу, из которого они были загружены.

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

Вкладка Страница в области

Чтобы отобразить файл в области Редактор, выберите файл на вкладке Страница. Для изображения отображается предварительный просмотр изображения.

Чтобы отобразить URL-адрес или путь для ресурса, наведите указатель мыши на ресурс.

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

Значки на вкладке Страница

На вкладке Страница используются следующие значки:

  • Значок окна вместе с меткой topпредставляет main фрейм документа, который является html-кадром: значок окна
  • Значок облака представляет источник: значок облака
  • Значок папки представляет каталог: значок папки
  • Значок страницы представляет ресурс: значок страницы
Группирование файлов по папке или в виде неструктурированного списка

На вкладке Страница отображаются файлы или ресурсы, сгруппированные по серверу и каталогу или в виде неструктурированного списка.

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

  1. Рядом с вкладками в области Навигатор (слева) нажмите кнопку ... (Дополнительные параметры). Появится меню.
  2. Выберите или снимите флажок Группировать по папке .

Добавление локальной папки в рабочую область для редактирования файлов и сохранения изменений на диске с помощью средств разработки

Используйте вкладку Рабочая область в средстве "Источники" для просмотра и редактирования локальных файлов в средствах разработки. Вкладка Рабочая область полезна при использовании в сочетании с локальным веб-сервером, так как затем можно загрузить локальный веб-сайт в Edge и изменить его исходные файлы в devTools.

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

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

В средствах разработки в файле отображается зеленая "сопоставленная" точка, для которой DevTools удалось найти сопоставление между файлом рабочей области и ресурсом веб-страницы. Например, если на странице используется таблица styles.css стилей, а в рабочей области есть файл с именем styles.css, DevTools сопоставляет файлы друг с другом и отображает зеленую "сопоставленную" точку.

Зеленая "сопоставленная" точка указывает, что изменения, внесенные в ресурсы веб-страницы, будут сохранены. Например, когда вы вносите изменения на вкладке Стили инструмента "Элементы ", вы изменяете таблицу стилей веб-страницы (а не файл). Если имя CSS-файла, отображаемое на вкладке Стили , содержит зеленую "сопоставленную" точку, таблица стилей была сопоставлена с файлом в рабочей области, и изменения не будут потеряны.

Вкладка

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

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

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

См. также:

Использование вкладки Переопределения для переопределения файлов сервера локальными файлами

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

Чтобы начать использовать вкладку Переопределения , создайте новую папку в файловой системе, а затем выберите ее на вкладке Переопределения . С этого момента все изменения, внесенные на вкладке Стили инструмента "Элементы " или на вкладке "Страница " средства "Источники" , сохраняются в новой папке. DevTools использует локальные файлы для переопределения соответствующих ответов сервера.

Вкладка

См. также:

Использование вкладки Скрипты содержимого для расширений Microsoft Edge

Используйте вкладку Скрипты содержимого в области Навигатор , чтобы просмотреть все скрипты содержимого, которые были загружены установленным расширением Microsoft Edge.

Вкладка Скрипты содержимого в области Навигатор

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

См. также:

Использование вкладки "Фрагменты" для запуска фрагментов кода JavaScript на любой веб-странице

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

Фрагмент кода, который вставляет библиотеку jQuery на веб-страницу.

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

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

Вместо этого вы можете сохранить этот код в фрагменте кода, а затем легко запустить его при необходимости. При нажатии клавиш CTRL+S (Windows, Linux) или COMMAND+S (macOS) devTools сохраняет фрагмент в файловой системе.

Существует несколько способов запуска фрагмента кода:

  • В области Навигатор выберите вкладку Фрагменты кода, а затем выберите файл фрагментов, чтобы открыть его. Затем в нижней части области Редактор нажмите кнопку Выполнить (кнопка Выполнить).
  • Когда devTools будет фокусироваться, нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS), чтобы открыть меню Command, а затем введите !.

Фрагменты похожи на букмарклеты.

См. также:

Открытие файлов с помощью меню "Команда"

Чтобы открыть файл, в дополнение к использованию панели Навигатор в средстве "Источники ", можно использовать меню команд из любого места в средствах разработки.

  • В средствах разработки нажмите клавиши CTRL+P в Windows/Linux или COMMAND+P в macOS. Появится меню Команд , в которой перечислены все ресурсы, которые находятся на вкладках панели Навигатор средства "Источники ".
  • Кроме того, рядом с вкладками панели Навигатор в средстве Источники нажмите кнопку Дополнительные параметры (...) и выберите Открыть файл.

Чтобы отобразить и выбрать из списка все файлы .js, введите .js.

Открытие файла с помощью меню команд

Если ввести ?, в меню "Команда" отображается несколько команд, включая ... Откройте файл. Если нажать backspace , чтобы очистить меню команд, отобразится список файлов.

Дополнительные сведения см. в статье Выполнение команд с помощью меню команд Microsoft Edge DevTools.

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

Панель Редактор используется для просмотра или редактирования файлов, включая Файлы JavaScript, HTML, CSS и изображения. В области Редактор отображается содержимое любого файла, выбранного на любой из вкладок панели Навигатор:

  • Page
  • Рабочая область
  • Переопределения
  • Скрипты содержимого
  • Фрагменты

Например, в области Редактор могут отображаться:

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

Панель Редактор в средстве

Область Редактор поддерживает следующие типы файлов:

Тип файла Поддерживаемые действия
JavaScript Просмотр, изменение и отладка.
CSS Просмотр и изменение.
HTML Просмотр и изменение.
Изображения "Вид".

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

В следующих подразделах рассматриваются области Редактор:

См. также:

Редактирование файла JavaScript

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

Редактирование JavaScript в области Редактор

Чтобы загрузить файл в область Редактор, используйте вкладку Страница в области Навигатор (слева). Или используйте меню команд, как показано ниже: в правом верхнем углу devTools выберите Пункт Настройка и управление средствами разработки (...), а затем выберите Открыть файл.

См. также:

Сохранение и отмена

Чтобы изменения JavaScript вступили в силу, нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS).

При изменении файла рядом с именем файла появится звездочка.

  • Чтобы сохранить изменения, нажмите клавиши CTRL+S в Windows/Linux или COMMAND+S в macOS.
  • Чтобы отменить изменение, нажмите клавиши CTRL+Z в Windows/Linux или COMMAND+Z в macOS.

По умолчанию изменения удаляются при обновлении веб-страницы. Дополнительные сведения о том, как сохранить изменения в локальной файловой системе, см. в разделе Изменение и сохранение файлов в рабочей области (вкладка Рабочая область средства "Источники").

Поиск и замена

Чтобы найти текст в текущем файле, выберите область Редактор, чтобы сосредоточиться на нем, а затем нажмите клавиши CTRL+F в Windows/Linux или COMMAND+F в macOS.

Поиск и замена в области Редактор средства

Чтобы найти и заменить текст, нажмите кнопку Заменить (A–>B) слева от текстового поля Найти . При просмотре редактируемого файла появляется кнопка Заменить (A–>B).

Отображение внесенных изменений

При определении рабочей области изменения в JavaScript сохраняются и отображаются в средстве Изменения .

Чтобы просмотреть изменения, внесенные в файл, щелкните правой кнопкой мыши в области Редактор и выберите Локальные изменения.

В нижней части devTools откроется панель Быстрого просмотра , в которой отображаются изменения на вкладке Изменения .

Отображение локальных изменений на вкладке Изменения на панели быстрого просмотра

См. также:

Изменения внутри функции вступают в силу

При определении рабочей области изменения в тексте функции JavaScript вступают в силу.

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

  • Мы добавили оператор console.log('A') вне любой функции.
  • Мы добавили оператор console.log('B') внутри onClick функции. Затем мы сохранили изменения, ввели номера в форму и нажмите кнопку формы, чтобы отправить форму.

После отправки формы , console.log('A')которая находится на глобальном область, не запускается, но console.log('B'), внутри onClick функции, выполняется, выводя в Bконсоль:

Глобальный область JavaScript не выполняется повторно

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

Миниифицированные файлы автоматически переформатируются при их открытии в области Редактор.

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

Кнопка

Дополнительные сведения см. в разделе Переформатировать мини-файл JavaScript с помощью функции "красивая печать".

Сопоставление миниифицированного кода с исходным кодом для отображения удобочитаемого кода

Исходные карты из предварительных процессоров приводят к тому, что средства разработки загружают исходные файлы JavaScript в дополнение к уменьшенным преобразованным файлам JavaScript, возвращаемым сервером. Затем вы просматриваете исходные файлы во время задания точек останова и пошагового выполнения кода. Между тем Microsoft Edge фактически выполняет ваш миниифицированный код.

В области Редактор, если щелкнуть правой кнопкой мыши файл JavaScript и выбрать Добавить карту источника, появится всплывающее окно с текстовым полем URL-адрес карты источника и кнопкой Добавить.

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

Преобразования из исходного кода в скомпилированный интерфейсный код

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

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

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

Редактирование CSS

В средствах разработки можно изменить правила CSS и их свойства двумя способами:

  • На вкладке Стили в инструменте Элементы измените свойства CSS с помощью элементов управления пользовательского интерфейса.

  • На вкладках Страница или Рабочая область в средстве Источники используйте текстовый редактор для редактирования CSS-файла.

Редактирование CSS с помощью вкладки "Стили" в инструменте "Элементы" при использовании вкладки "Рабочая область" средства "Источники"

См. также:

Редактирование CSS на вкладке "Страница" или "Рабочая область" в инструменте "Источники"

Вкладка Страница или Рабочая область в средстве Источники поддерживает непосредственное редактирование CSS-файла. Например, если вы измените CSS-файл из учебника Изменение и сохранение файлов в рабочей области (Рабочая область средства источников) в соответствии с приведенным ниже правилом стиля, H1 элемент в левом верхнем углу отображаемой веб-страницы изменится на зеленый:

h1 {
  color: green;
}

Изменение CSS в области Редактор, чтобы изменить цвет текста заголовка H1 на зеленый

Изменения CSS вступают в силу немедленно; Вам не нужно вручную сохранять изменения.

См. также:

Редактирование HTML-файла

Существует два способа редактирования HTML в средствах разработки:

  • В инструменте Элементы вы работаете с одним элементом HTML за раз с помощью элементов управления пользовательского интерфейса.
  • В средстве Источники используется текстовый редактор.

Редактор HTML средства

В отличие от файла JavaScript или CSS, HTML-файл, возвращаемый веб-сервером, не может быть напрямую изменен в средстве "Источники". Чтобы изменить HTML-файл с помощью Редактор средства "Источники", HTML-файл должен находиться в рабочей области или на вкладке Переопределения. См. следующие подразделы текущей статьи:

Чтобы сохранить изменения, нажмите клавиши CTRL+S в Windows/Linux или COMMAND+S в macOS. Измененный файл помечается звездочкой.

Чтобы найти текст, нажмите клавиши CTRL+F в Windows/Linux или COMMAND+F в macOS.

Чтобы отменить изменение, нажмите клавиши CTRL+Z в Windows/Linux или COMMAND+Z в macOS.

Чтобы просмотреть другие команды при редактировании HTML-файла, в области Редактор щелкните правой кнопкой мыши HTML-файл.

См. также:

Переход к номеру строки или функции

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

  1. В области Навигатор выберите многоточие (...) (Дополнительные параметры) и выберите Открыть файл. Откроется меню "Команда ".
  2. Введите один из следующих символов:
Характер Имя команды Описание
: Перейти к строке Перейдите к номеру строки.
@ Перейти к символу Перейдите к функции. При вводе @в меню команд перечислены функции, которые находятся в файле JavaScript, открытом в области Редактор.

Дополнительные сведения см. в статье Выполнение команд с помощью меню команд Microsoft Edge DevTools.

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

Main место для просмотра исходных файлов в средствах разработки находится в средстве Источники. Но иногда при просмотре или редактировании исходных файлов требуется доступ к другим средствам, таким как Элементы или Консоль. Вы используете средство быстрого источника на панели Быстрое представление в нижней части devTools.

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

  1. На панели действий в верхней части devTools выберите средство, отличное от средства Источники, например элемент.

  2. Нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Откроется меню "Команда ".

  3. Введите quick и выберите Показать быстрый источник.

    Панель Быстрого просмотра откроется в нижней части devTools с выбранным инструментом Быстрый источник . Средство быстрого источника отображает те же файлы, которые открыты в средстве "Источники " в компактной версии редактора кода DevTools.

  4. Нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS), чтобы открыть диалоговое окно Открытие файла .

См. также:

Использование панели отладчика для отладки кода JavaScript

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

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

Панель

Отладчик поддерживает стандартные действия отладки, такие как:

  • Установка точек останова для приостановки кода.
  • Пошаговое выполнение кода.
  • Просмотр и изменение свойств и переменных.
  • Просмотр значений выражений JavaScript.
  • Просмотр стека вызовов (последовательность вызовов функции до сих пор).

Отладчик в devTools предназначен для того, чтобы выглядеть, чувствовать себя и работать так же, как отладчик в Visual Studio Code и отладчик в Visual Studio.

Отладка рассматривается в следующих подразделах:

Базовый подход к использованию отладчика

Чтобы устранить неполадки с кодом JavaScript, в код можно вставить console.log() инструкции. Другой, более эффективный подход заключается в использовании отладчика Microsoft Edge DevTools. Использование отладчика может быть проще, чем console.log(), если вы знакомы с подходом к отладчику.

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

  1. Откройте веб-страницу Демонстрация: начало отладки JavaScript с помощью средств разработки Microsoft Edge в новом окне или вкладке.

  2. Щелкните правой кнопкой мыши в любом месте веб-страницы и выберите пункт Проверить. Или нажмите клавишу F12. Рядом с демонстрационной веб-страницей откроется окно DevTools .

  3. В DevTools выберите вкладку Источники .

  4. В области Навигатор (слева) перейдите на вкладку Страница , а затем выберите файл JavaScript, например get-started.js.

  5. В области Редактор выберите номер строки рядом с подозрительной строкой кода, чтобы задать точку останова в этой строке. На рисунке ниже точка останова задается в строке var sum = addend1 + addend2;.

  6. На веб-странице введите значения и отправьте форму. Например, введите числа, такие как 5 и 1, а затем нажмите кнопку Добавить число 1 и число 2.

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

    Вход в режим приостановки отладчика

    На приведенном выше рисунке мы добавили выражения sum Watch и typeof sum, а затем шагнули на две строки после точки останова.

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

    На этом этапе можно добавить выражения в область Контроль . Эти выражения являются теми же выражениями, которые можно написать в инструкции console.log для отладки кода.

    Чтобы выполнить команды JavaScript для управления данными в текущем контексте, используйте консоль. Если вы хотите открыть консоль на панели Быстрого просмотра в нижней части средства разработки, нажмите клавишу ESC.

  8. Пошаговое выполнение кода с помощью элементов управления в верхней части панели отладчика , например Шаг (F9).

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

  9. Чтобы устранить ошибку, обновите страницу, чтобы сбросить форму веб-страницы, а затем измените строку:

    var sum = addend1 + addend2;

    Кому:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Нажмите клавиши CTRL+S (Windows, Linux) или COMMAND+S (macOS), чтобы сохранить изменения в локальном кэшированном файле.

  11. Введите 5 и 1 на веб-странице, а затем нажмите кнопку Добавить . Теперь область Область>Локальная>сумма: это число 6, а не строка "51".

См. также:

Преимущества контрольных значений и области отладчика по сравнению с console.log

Эти три подхода эквивалентны:

  • Временно добавьте инструкции console.log(sum) и console.log(typeof sum) в код, где sum находится в область.

  • Выдача инструкций sum и console.log(typeof sum) в области Консоли средства разработки, когда отладчик приостановлен, когда sum находится в область.

  • Задание контрольных выражений sum и typeof sum в области Отладчик .

Если переменная sum находится в область и sum ее значение автоматически отображается в разделе Область области отладчика, а также накладывается на область Редактор, где sum вычисляется. Поэтому вам, вероятно, не нужно определять выражение Watch для sum.

Отладчик предоставляет более широкий, более гибкий дисплей и среду, чем console.log оператор. Например, в отладчике при пошаговом выполнении кода можно отобразить и изменить значения всех определенных в данный момент свойств и переменных. Вы также можете выдавать инструкции JavaScript в консоли, например для изменения значений в массиве, который находится в область. (Чтобы отобразить консоль, нажмите клавишу ESC.)

Точки останова и контрольные выражения сохраняются при обновлении веб-страницы.

Отладка из Visual Studio Code напрямую

Чтобы использовать более полнофункциональный отладчик Visual Studio Code вместо отладчика DevTools, используйте расширение Microsoft Edge DevTools для Visual Studio Code.

Расширение Microsoft Edge DevTools для Visual Studio Code

Это расширение предоставляет доступ к элементам и сетевым инструментам Microsoft Edge DevTools из microsoft Visual Studio Code.

Дополнительные сведения см. в разделах Visual Studio Code для веб-разработки и на странице сведений GitHub Средства разработчика Microsoft Edge для Visual Studio Code.

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

В следующих статьях рассматриваются область Отладчик и точки останова.

См. также

Примечание.

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

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