Este guia ensina como usar o Chrome DevTools para ver 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, bem como imagens.
Este guia pressupõe que você conheça os conceitos básicos de desenvolvimento da Web e do Chrome DevTools.
Abrir recursos
Quando você sabe o nome do recurso que quer inspecionar, o Command Menu fornece uma maneira rápida de abri-lo.
Pressione Control+P ou Command+P (Mac). A caixa de diálogo Open File será aberta.
Figura 1. Caixa de diálogo Open File.
Selecione o arquivo na lista suspensa ou comece a digitar o nome dele e pressione Enter quando o arquivo correto for destacado na caixa de preenchimento automático.
Figura 2. Digitar o nome do arquivo na caixa de diálogo Open File
Abrir recursos no painel Network
Consulte Inspecionar os detalhes de um recurso.
Figura 3. Como inspecionar um recurso no painel Network
Revelar recursos de outros painéis no painel "Network"
A seção Procurar recursos abaixo mostra como ver os recursos de várias partes da interface do DevTools. 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.
Figura 4. A opção Revelar no painel Rede
Procurar recursos
Procurar recursos no painel Network
Consulte Registrar atividade de rede.
Figura 5. Pesquisar recursos no registro de rede
Procurar por diretório
Para ver os recursos de uma página organizados por diretório:
- Clique na guia Fontes para abrir o painel Fontes.
Clique na guia Página para mostrar os recursos da página. O painel Página será aberto.
Figura 6. O painel Page
Veja 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 sob ele 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 no HTML do documento principal. - sw.js é um contexto de execução de service worker.
Clique em um recurso para visualizá-lo no Editor.
Figura 7. Como visualizar um arquivo no Editor
Procurar por nome de arquivo
Por padrão, o painel Página agrupa recursos por diretório. Para desativar esse agrupamento e visualizar os recursos de cada domínio como uma lista simples:
- Abra o painel Página. Consulte Procurar pelo diretório.
Clique em Mais opções
e desative a opção Agrupar por pasta.
Figura 8. A opção Agrupar por pasta
Os recursos são organizados por tipo de arquivo. Dentro de cada tipo de arquivo, os recursos são organizados em ordem alfabética.
Figura 9. No painel Página depois de desativar a opção Agrupar por pasta
Procurar por tipo de arquivo
Para agrupar recursos com base no tipo de arquivo:
Clique na guia Aplicativo. O painel Aplicativo é aberto. Por padrão, o painel Manifest geralmente abre primeiro.
Figura 10. O painel Aplicativo
Role para baixo até o painel Frames.
Figura 11. Painel Frames
Abra as seções do seu interesse.
Clique em um recurso para visualizá-lo.
Figura 11. Visualização de um recurso no painel Aplicativo
Procure arquivos por tipo no painel Network
Consulte Filtrar por tipo de recurso.
Figura 12. Como filtrar por CSS no registro de rede