Просмотр файлов ресурсов, составляющих веб-страницу

Мақала
10/30/2023

Вы можете просматривать ресурсы, составляющие веб-страницу, из нескольких инструментов (или панелей) в Средствах разработки Microsoft Edge, в том числе:

Средство "Сеть"
Средство "Источники "
Средство приложения

Ресурсы — это файлы, составляющие веб-страницу. Примеры ресурсов:

CSS-файлы
Файлы JavaScript
HTML-файлы
Файлы изображений

См. также:

Изучение веб-разработки на Mozilla.org
Обзор средств разработчика

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

В новом окне или вкладке перейдите на веб-страницу, например демонстрацию функций тестирования специальных возможностей. (Исходные файлы для этой веб-страницы находятся в MicrosoftEdge /Demos > devtools-a11y-testing.)
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).
Когда devTools имеет фокус, нажмите клавиши CTRL+P (Windows, Linux) или COMMAND+P (macOS). Или нажмите кнопку Настройка и управление средствами разработки () в Средствах разработки, а затем выберите Открыть файл. Откроется меню "Команда", в котором отображается список "Открыть файл ":
Если запрос больше (>), нажмите клавишу Backspace , чтобы открыть запрос на открытие файла .
Начните вводить имя файла, а затем нажмите клавишу ВВОД , когда правильный файл выделен в поле автозаполнения, или выберите файл из раскрывающегося списка:

Просмотр файлов ресурсов в средстве "Сеть"

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

В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ( .
Убедитесь, что в левом верхнем углу выбрана кнопка Запись журнала сети (красный цвет).
Обновите страницу. По умолчанию выбрана кнопка "Фильтр все ", поэтому все файлы ресурсов веб-страницы отображаются в средстве "Сеть" по одной строке на каждый файл ресурсов:
Выберите ресурс для его просмотра. Например, выберите network-tutorial путь для отображения index.html:

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

Просмотр файлов ресурсов по типу файла путем фильтрации в средстве "Сеть"

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

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

В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ( .
Обновите страницу. По умолчанию выбрана кнопка "Фильтр все ", поэтому все файлы ресурсов веб-страницы отображаются в средстве "Сеть ".
Щелкните CSS , чтобы отфильтровать и отобразить только CSS-файлы. В списке main.css указан только файл:

Дополнительные сведения см. в разделе Фильтрация по типу ресурса в разделе Проверка сетевой активности.

Отображение файлов ресурсов в средстве "Сеть" из других средств

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

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

В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (".
Нажмите клавиши CTRL+R , чтобы обновить страницу. Полученные файлы ресурсов, составляющие веб-страницу, теперь добавляются в виде строк на вкладке Сеть . Строка папки network-tutorial/ представляет HTML-страницу . В этом случае index.html.
В средствах разработки на панели действий щелкните вкладку Источники .
На вкладке Страница в левом верхнем углу щелкните правой кнопкой мыши файл ресурсов, а затем выберите Показать на панели Сеть:

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

Просмотр файлов ресурсов по папкам на вкладке Страница средства "Источники"

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

Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (") .
В области Навигатор в левом верхнем углу выберите вкладку Страница .

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

Файлы ресурсов веб-страницы, сгруппированные по папке на вкладке Страница средства

Вкладка Страница содержит различные типы узлов, в том числе:

Элемент страницы	Описание
`top`	Main контексте просмотра документов, например вкладке браузера, окне браузера или фрейме. См . раздел Контекст браузера или <iframe>: элемент Встроенного фрейма.
`microsoftedge.github.io`	Домен. Все вложенные в него ресурсы поступают из этого домена. Например, полный `buttons.js` URL-адрес файла — https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js.
`Demos/devtools-a11y-testing`, `css`, `photos`	Каталоги.
`devtools-a11y-testing/`	HTML-документ main.
`buttons.js`	Скрипт для обработки нажатий кнопки на странице.

Выберите файл ресурсов, чтобы просмотреть его в Редактор средства "Источники":

Просмотр файлов ресурсов, отсортированных по имени файла, на вкладке Страница средства "Источники"

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

В новом окне или вкладке перейдите на веб-страницу, например демонстрацию функций тестирования специальных возможностей. (Исходные файлы для этой веб-страницы находятся в MicrosoftEdge /Demos > devtools-a11y-testing.)
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В DevTools на панели действий выберите вкладку Источники . Если эта вкладка не отображается, нажмите кнопку Другие инструменты (") .
В области Навигатор в левом верхнем углу выберите вкладку Страница .
Щелкните Дополнительные параметры () и снимите флажок Группировать по папке :

Все файлы ресурсов для каждого домена (например , Top) группируются в одном алфавитном списке:

Просмотр файлов ресурсов по типу файла в дереве "Кадры" в средстве "Приложение"

Одним из способов просмотра ресурсов веб-страницы, сгруппированных по типу файла, является использование дерева Кадров в средстве приложения :

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

Откроется средство "Приложение ", и по умолчанию сначала отображается панель Манифест :
Прокрутите вниз до области Кадры и разверните папку, которая вас интересует:
Выберите ресурс, чтобы просмотреть его в средстве "Приложение ":

Примечание.

Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

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

Бөлісу құралы: