Ver recursos da página

Kayce Basques
Kayce Basques

Este guia ensina como usar o Chrome DevTools para conferir os recursos de uma página da Web. Os recursos são os arquivos necessários para que uma página seja exibida corretamente. Exemplos de recursos incluem arquivos CSS, JavaScript e HTML, além de imagens.

Neste guia, pressupomos que você já conheça os conceitos básicos de desenvolvimento da Web e as Ferramentas do desenvolvedor do Chrome.

Recursos abertos

Quando você sabe o nome do recurso que quer inspecionar, o menu de comando é uma maneira rápida de abrir o recurso.

  1. Pressione Control+P ou Command+P (Mac). A caixa de diálogo Open File é aberta.

    Caixa de diálogo "Open File"

    Figura 1. Caixa de diálogo Open File

  2. Selecione o arquivo no menu suspenso ou comece a digitar o nome do arquivo e pressione Enter quando o arquivo correto estiver destacado na caixa de preenchimento automático.

    Como digitar um nome de arquivo na caixa de diálogo "Abrir arquivo"

    Figura 2. Digitando um nome de arquivo na caixa de diálogo Open File

Abrir recursos no painel Network

Consulte Inspecionar os detalhes de um recurso.

Inspeção de um recurso no painel de rede

Figura 3. Inspeção de um recurso no painel Rede

Revelar recursos no painel de rede de outros painéis

A seção Procurar recursos abaixo mostra como visualizar recursos de várias partes da interface das Ferramentas do desenvolvedor. Se você quiser inspecionar um recurso no painel Network, clique com o botão direito do mouse no recurso e selecione Reveal in Network panel.

Revelar no painel Network

Figura 4. Opção Revelar no painel de rede

Procurar recursos

Procurar recursos no painel de rede

Consulte Registrar atividade de rede.

Recursos da página no registro de rede

Figura 5. Recursos da página no registro de rede

Procurar por diretório

Para conferir os recursos de uma página organizados por diretório:

  1. Clique na guia Origens para abrir o painel Origens.
  2. Clique na guia Página para mostrar os recursos da página. O painel Página é aberto.

    Painel "Page"

    Figura 6. Painel Página

    Confira um detalhamento dos itens não óbvios na Figura 6:

    • top é o contexto de navegação do documento principal.
    • airhorner.com representa um domínio. Todos os recursos aninhados vêm desse domínio. Por exemplo, o URL completo do arquivo comlink.global.js provavelmente é https://airhorner.com/scripts/comlink.global.js.
    • scripts é um diretório.
    • (index) é o documento HTML principal.
    • iu3 é outro contexto de navegação. Esse contexto provavelmente foi criado por um elemento <iframe> incorporado ao HTML do documento principal.
    • sw.js é um contexto de execução de worker de serviço.
  3. Clique em um recurso para acessá-lo no Editor.

    Como visualizar um arquivo no Editor

    Figura 7. Como visualizar um arquivo no Editor

Procurar por nome de arquivo

Por padrão, o painel Página agrupa os recursos por diretório. Para desativar esse agrupamento e visualizar os recursos de cada domínio como uma lista plana:

  1. Abra o painel Página. Consulte Procurar por diretório.
  2. Clique em Mais opções Mais opções e desative a opção Agrupar por pasta.

    Agrupar por pasta

    Figura 8. A opção Agrupar por pasta

    Os recursos são organizados por tipo de arquivo. Em cada tipo de arquivo, os recursos são organizados em ordem alfabética.

    Painel &quot;Page&quot; após desativar a opção &quot;Group By Folder&quot;

    Figura 9. Painel Página após a desativação da opção Agrupar por pasta

Procurar por tipo de arquivo

Para agrupar recursos com base no tipo de arquivo:

  1. Clique na guia Aplicativo. O painel Application é aberto. Por padrão, o painel Manifest geralmente é aberto primeiro.

    Painel de aplicativo

    Figura 10. Painel Aplicativo

  2. Role a tela para baixo até o painel Frames.

    Painel &quot;Frames&quot;

    Figura 11. Painel Frames

  3. Abra as seções que você quer consultar.

  4. Clique em um recurso para visualizá-lo.

    Como visualizar um recurso no painel &quot;Application&quot;

    Figura 11. Visualização de um recurso no painel Application

Procurar arquivos por tipo no painel de rede

Consulte Filtrar por tipo de recurso.

Como filtrar CSS no registro de rede

Figura 12. Como filtrar CSS no registro de rede