Share via

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

  • Artigo

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 de rede
  • Ferramenta De origem
  • Ferramenta de aplicativo

Os 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:

Abrir arquivos de recursos do 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 em 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 DevTools tiver foco, pressione Ctrl+P (Windows, Linux) ou Command+P (macOS). Ou clique no botão Personalizar e controlar DevTools (ícone Personalizar) em DevTools e selecione Abrir arquivo. O Menu de Comando é aberto, exibindo a lista Abrir Arquivo :

    O Menu de Comando, 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 estiver realçado na caixa de preenchimento automático ou selecione o arquivo na lista suspensa:

    Digitando parte de um nome de arquivo na lista Abrir Arquivo do Menu de Comando

Procurar arquivos de recursos na ferramenta Rede

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

  1. Em uma nova janela ou guia, vá para uma página da Web, como a Demonstração de Atividade de Inspeção de Rede. (Os arquivos de origem dessa página da Web estão no 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. Em DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas (ícone '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 para que todos os arquivos de recursos da página da Web sejam listados na ferramenta Rede , uma linha por arquivo de recurso:

    Arquivos de recursos da página da Web listados no Log de Rede, um arquivo de recurso por linha

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

    Inspecionar um recurso na ferramenta Rede

Para saber mais sobre como mostrar a atividade de rede gerada pelos recursos da página, confira Atividade de rede de log 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 qual tipo de recursos listar, como apenas 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 de Atividade de Inspeção de Rede. (Os arquivos de origem dessa página da Web estão no 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. Em DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas (ícone 'Mais Ferramentas').

  4. Atualize a página. Por padrão, o botão Todos os filtros está selecionado para 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:

    Filtragem para listar apenas arquivos de recursos do CSS no Log de Rede

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

Mostrar arquivos de recursos na ferramenta Rede 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 primeiro atualizar a página da Web enquanto a ferramenta Rede está 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 de Atividade de Inspeção de Rede. (Os arquivos de origem dessa página da Web estão no 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. Em DevTools, na Barra de Atividades, selecione a guia Rede . Se essa guia não estiver visível, clique no botão Mais Ferramentas (ícone 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 de tutorial de rede/ pasta representa a página HTML – nesse caso, index.html.

  5. Em 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:

    O menu

    Se o menu menu Revelar em Rede não estiver listado, acesse a ferramenta Rede , verifique se o botão Registrar log de rede no canto superior esquerdo está 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 pelo 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. Em DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas (ícone Mais ferramentas).

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

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

    Os arquivos de recursos da página da Web agrupados por pasta na guia Página da ferramenta Fontes

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

    Item de página Descrição
    top O main contexto de navegação de documentos, como uma guia do navegador, uma janela do navegador ou um quadro. Consulte Contexto de navegação ou <iframe>: o elemento Quadro embutido.
    microsoftedge.github.io O domínio. Todos os recursos aninhados sob ele 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 Diretórios.
    devtools-a11y-testing/ O documento HTML main.
    buttons.js Um script para manipular o botão pressiona na página.

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

    Exibindo um arquivo de recurso no Editor da ferramenta Sources

Procurar arquivos de recurso classificados pelo nome do 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, em vez disso, exibir todos os arquivos de recurso de cada domínio agrupado em uma única lista 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. Em DevTools, na Barra de Atividades, selecione a guia Fontes . Se essa guia não estiver visível, clique no botão Mais ferramentas (ícone Mais ferramentas).

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

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

    A opção Grupo por pasta na guia Página da ferramenta Fontes

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

    A guia Página na ferramenta Fontes quando a opção 'Grupo por pasta' é desmarcada

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

Uma maneira de exibir recursos de 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. Em DevTools, na Barra de Atividades, selecione a guia Aplicativo . Se essa guia não estiver visível, clique no botão Mais Ferramentas (ícone Mais Ferramentas).

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

    A ferramenta Aplicativo

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

    A árvore Quadros na ferramenta Aplicativo

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

    Exibindo um recurso na ferramenta Aplicativo

Observação

Partes desta página são modificações baseadas no trabalho criado e compartilhado pelo Google e usadas de acordo com os termos descritos na Licença Pública Creative Commons Atribuição 4.0 Internacional. A página original é encontrada aqui e é de autoria de Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licença Creative Commons Este trabalho é licenciado sob uma Licença Internacional de Atribuição do Creative Commons 4.0.