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

  • Статья

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

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

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

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

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

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

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

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

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

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

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

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

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

Панель

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование вкладки Файловая система для определения локальной рабочей области

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

Вкладка Файловая система для рабочей области

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

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

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

См. также:

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

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

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

Вкладка

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

Файл, который переопределяет файл, возвращаемый сервером, указывается фиолетовой точкой рядом с именем файла в средствах разработки.

См. также:

Использование вкладки Скрипты содержимого для расширений 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 и файлы изображений. При редактировании интерфейсных файлов в области редактора средства разработки обновляют веб-страницу для запуска измененного кода.

Область редактора в средстве

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

Тип файла Поддерживаемые действия
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 с помощью красивой печати

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

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

Кнопка

Дополнительные сведения см. в разделе Переформатировать мини-файл 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-файл из учебника Изменение файлов с помощью рабочих областей (вкладка Файловая система) в соответствии с приведенным ниже правилом стиля, 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. Выберите средство, отличное от средства "Источники ", например средство "Элементы ".

  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 для управления данными в текущем контексте, используйте консоль. Если вы хотите открыть консоль в ящике внизу devTools, нажмите клавишу 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. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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