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

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

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

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

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

См. также:

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

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

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

1. В новом окне или вкладке перейдите на веб-страницу, например демонстрацию функций тестирования специальных возможностей. (Исходные файлы для этой веб-страницы находятся в MicrosoftEdge /Demos > devtools-a11y-testing.)

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

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

   

4. Если запрос больше (>), нажмите клавишу Backspace , чтобы открыть запрос на открытие файла .

5. Начните вводить имя файла, а затем нажмите клавишу ВВОД , когда правильный файл выделен в поле автозаполнения, или выберите файл из раскрывающегося списка:

   

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

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

1. В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)

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

3. В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ( .

4. Убедитесь, что в левом верхнем углу выбрана кнопка Запись журнала сети (красный цвет).

5. Обновите страницу. По умолчанию выбрана кнопка "Фильтр все ", поэтому все файлы ресурсов веб-страницы отображаются в средстве "Сеть" по одной строке на каждый файл ресурсов:

   

6. Выберите ресурс для его просмотра. Например, выберите network-tutorial путь для отображения index.html:

   

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

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

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

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

1. В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)

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

3. В devTools на панели действий выберите вкладку Сеть . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ( .

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

5. Щелкните CSS , чтобы отфильтровать и отобразить только CSS-файлы. В списке main.css указан только файл:

   

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

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

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

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

1. В новом окне или вкладке перейдите на веб-страницу, например демонстрацию проверки сетевой активности. (Исходные файлы для этой веб-страницы находятся в microsoftEdge /Demos > network-tutorial.)

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

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

4. Нажмите клавиши CTRL+R , чтобы обновить страницу. Полученные файлы ресурсов, составляющие веб-страницу, теперь добавляются в виде строк на вкладке Сеть . Строка папки network-tutorial/ представляет HTML-страницу . В этом случае index.html.

5. В средствах разработки на панели действий щелкните вкладку Источники .

6. На вкладке Страница в левом верхнем углу щелкните правой кнопкой мыши файл ресурсов, а затем выберите Показать на панели Сеть:

   

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

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

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

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

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

3. В области Навигатор в левом верхнем углу выберите вкладку Страница .

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

   

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

   Элемент страницы	Описание
   top	Контекст просмотра основного документа, например вкладка браузера, окно браузера или фрейм. См . раздел Контекст браузера или <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-документ.
   buttons.js	Скрипт для обработки нажатий кнопки на странице.

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

   

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

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

1. В новом окне или вкладке перейдите на веб-страницу, например демонстрацию функций тестирования специальных возможностей. (Исходные файлы для этой веб-страницы находятся в MicrosoftEdge /Demos > devtools-a11y-testing.)

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

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

4. В области Навигатор в левом верхнем углу выберите вкладку Страница .

5. Щелкните Дополнительные параметры () и снимите флажок Группировать по папке :

   

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

   

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

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

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

2. В devTools на панели действий выберите вкладку Приложение . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты ().

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

   

3. Прокрутите вниз до области Кадры и разверните папку, которая вас интересует:

   

4. Выберите ресурс, чтобы просмотреть его в средстве "Приложение ":

   

Примечание.

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

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