Exibir os arquivos de recursos que compõem uma página da Web

Você pode exibir os recursos que compõem uma página da Web de dentro de várias ferramentas (ou painéis) no Microsoft Edge DevTools, incluindo:

• Ferramenta Rede
• Ferramenta Fontes
• Ferramenta aplicativo

Recursos são os arquivos que compõem uma página da Web. Exemplos de recursos incluem:

• Arquivos CSS
• Arquivos JavaScript
• Arquivos HTML
• Arquivos de imagem

Consulte também:

• Aprenda desenvolvimento na Web na Mozilla.org
• Visão geral do DevTools

Abrir arquivos de recurso no Menu de Comando

Quando você sabe o nome do arquivo de recurso de uma página da Web que deseja inspecionar, o Menu de Comando no DevTools fornece uma maneira rápida de localizar e abrir esse recurso.

1. Em uma nova janela ou guia, acesse uma página da Web, como a demonstração de recursos de teste de acessibilidade. (Os arquivos de origem dessa página da Web estão em MicrosoftEdge / Demos > devtools-a11y-testing.)

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS).

3. Quando o DevTools estiver em foco, pressione Ctrl+P (Windows, Linux) ou Command+P (macOS). Ou clique no botão Personalizar e controlar o DevTools () no DevTools e selecione Abrir arquivo. O Menu de Comando é aberto, exibindo a lista Abrir Arquivo :

   

4. Se houver um prompt maior que (>), pressione Backspace para acessar o prompt Abrir arquivo .

5. Comece a digitar o nome do arquivo e pressione Enter quando o arquivo correto for realçado na caixa de preenchimento automático ou selecione o arquivo na lista suspensa:

   

Procurar arquivos de recursos na ferramenta Rede

Na ferramenta Rede , você pode inspecionar os arquivos de recursos que compõem a página da Web atual, como .html, .css, .js, e arquivos de imagem. Para saber como obter os detalhes de um recurso específico, consulte Inspecionar os detalhes do recurso em Inspecionar atividade de rede.

1. Em uma nova janela ou guia, vá para uma página da Web, como a Demonstração Inspecionar Atividade de Rede. (Os arquivos de origem para essa página da Web estão em MicrosoftEdge / Demos > network-tutorial.)

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas ().

4. Verifique se o botão Registrar log de rede no canto superior esquerdo está selecionado (vermelho).

5. Atualize a página. Por padrão, o botão Todos os filtros está selecionado, de modo que todos os arquivos de recursos da página da Web sejam listados na ferramenta Rede , uma linha por arquivo de recurso:

   

6. Selecione um recurso para exibi-lo. Por exemplo, selecione o network-tutorial caminho a ser exibido index.html:

   

Para saber mais sobre como mostrar a atividade de rede gerada pelos recursos da página, consulte Registrar atividade de rede no artigo Inspecionar atividade de rede.

Procurar arquivos de recurso por tipo de arquivo filtrando na ferramenta Rede

Na ferramenta Rede , ao exibir a lista de arquivos de recursos que compõem a página da Web atual, você pode filtrar o tipo de recursos a serem listados, como apenas arquivos de exibição .css ou .js arquivos.

Por exemplo, para exibir apenas arquivos CSS:

1. Em uma nova janela ou guia, vá para uma página da Web, como a Demonstração Inspecionar Atividade de Rede. (Os arquivos de origem para essa página da Web estão em MicrosoftEdge / Demos > network-tutorial.)

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas ().

4. Atualize a página. Por padrão, o botão Todos os filtros é selecionado, de modo que todos os arquivos de recursos da página da Web sejam listados na ferramenta Rede .

5. Clique em CSS para filtrar e exibir apenas arquivos CSS. Somente o main.css arquivo está listado:

   

Para obter mais informações, consulte Filtrar por tipo de recurso em Inspecionar atividade de rede.

Mostrar arquivos de recurso na ferramenta Rede a partir de outras ferramentas

Em várias ferramentas que listam arquivos de recursos para a página da Web, para inspecionar um arquivo de recurso na ferramenta Rede , clique com o botão direito do mouse no arquivo de recurso e selecione Revelar no painel Rede. Talvez seja necessário atualizar primeiro a página da Web enquanto a ferramenta Rede estiver aberta.

Por exemplo, para ir da lista de recursos da guia Página na ferramenta Fontes para a ferramenta Rede :

1. Em uma nova janela ou guia, vá para uma página da Web, como a Demonstração Inspecionar Atividade de Rede. (Os arquivos de origem para essa página da Web estão em MicrosoftEdge / Demos > network-tutorial.)

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas ().

4. Pressione Ctrl+R para atualizar a página. Os arquivos de recursos recebidos que compõem a página da Web agora são adicionados como linhas na guia Rede . A linha network-tutorial/ folder representa a página HTML - neste caso, index.html.

5. No DevTools, na Barra de Atividades, clique na guia Fontes .

6. Na guia Página no canto superior esquerdo, clique com o botão direito do mouse em um arquivo de recurso e selecione Revelar no painel Rede:

   

   Se o item de menu do painel Revelar na rede não estiver listado, vá para a ferramenta Rede , certifique-se de que o botão Gravar log de rede no canto superior esquerdo esteja selecionado (vermelho) e atualize a página.

Procurar arquivos de recursos por pasta na guia Página da ferramenta Fontes

Você pode usar a ferramenta Fontes para exibir os arquivos de recursos da página da Web organizados por diretório, da seguinte maneira:

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

2. No DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

3. No painel Navegador no canto superior esquerdo, selecione a guia Página .

4. Por padrão, os arquivos de recursos são agrupados por pasta. Se os recursos estiverem todos listados em ordem alfabética por nome de arquivo, clique no botão Mais opções () à direita da guia Página e selecione Agrupar por pasta:

   

   A guia Página contém vários tipos de nó, incluindo:

   Item de página	Descrição
   top	O contexto principal de navegação do documento, como uma guia do navegador, uma janela do navegador ou um quadro. Consulte Contexto de navegação ou <iframe>: o elemento Inline Frame.
   microsoftedge.github.io	O domínio. Todos os recursos aninhados nele vêm desse domínio. Por exemplo, a URL completa do buttons.js arquivo é https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js.
   Demos/devtools-a11y-testing, css, photos	de diretórios.
   devtools-a11y-testing/	O documento HTML principal.
   buttons.js	Um script para lidar com o pressionamento de botões na página.

5. Selecione um arquivo de recurso para exibi-lo no Editor da ferramenta Fontes :

   

Procurar arquivos de recursos classificados por nome de arquivo na guia Página da ferramenta Fontes

Por padrão, a guia Página na ferramenta Fontes agrupa arquivos de recursos por pasta. Para exibir todos os arquivos de recursos de cada domínio agrupados em uma única lista em ordem alfabética:

1. Em uma nova janela ou guia, acesse uma página da Web, como a demonstração de recursos de teste de acessibilidade. (Os arquivos de origem dessa página da Web estão em MicrosoftEdge / Demos > devtools-a11y-testing.)

2. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

3. No DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas ().

4. No painel Navegador no canto superior esquerdo, selecione a guia Página .

5. Clique em Mais opções () e desmarque a opção Agrupar por pasta :

   

   Todos os arquivos de recursos para cada domínio (como Top) são agrupados em uma única lista em ordem alfabética:

   

Procurar arquivos de recurso por tipo de arquivo na árvore Quadros na ferramenta Aplicativo

Uma maneira de exibir recursos da página da Web agrupados por tipo de arquivo é usando a árvore Quadros na ferramenta Aplicativo :

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Ou pressione Ctrl+Shift+I (Windows, Linux) ou Command+Option+I (macOS). O DevTools é aberto.

2. No DevTools, na Barra de Atividades, selecione a guia Aplicativo . Se essa guia não estiver visível, clique no botão Mais Ferramentas ().

   A ferramenta Aplicativo é aberta e, por padrão, mostra o painel Manifesto primeiro:

   

3. Role para baixo até o painel Quadros e expanda a pasta em que você está interessado:

   

4. Selecione um recurso para exibi-lo na ferramenta Aplicativo :

   

Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 4.0 Internacional.