Este guia ensina como usar o Chrome DevTools para visualizar os recursos de uma página da Web. Recursos são os arquivos de que uma página precisa para ser exibida corretamente. Exemplos de recursos incluem arquivos CSS, JavaScript e HTML, além de 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 Menu de comando oferece uma maneira rápida de abrir o recurso.
Pressione Control + P ou Command + P (Mac). A caixa de diálogo Open File vai ser aberta.
Figura 1. Caixa de diálogo Open File
Selecione o arquivo no menu suspenso ou comece a digitar o nome dele e pressione Enter assim que o arquivo correto estiver destacado na caixa de preenchimento automático.
Figura 2. Digitar um nome de arquivo na caixa de diálogo Open File.
Abrir recursos no painel "Rede"
Consulte Inspecionar os detalhes de um recurso.
Figura 3. Como inspecionar um recurso no painel Rede
Revelar recursos de outros painéis no painel Rede
A seção Procurar recursos abaixo mostra como visualizar recursos de várias partes da IU 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 Network
Procurar recursos
Procurar recursos no painel Network
Consulte Registrar atividade de rede.
Figura 5. Recursos de página no registro de rede
Procurar por diretório
Para exibir 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 Página
Confira os detalhes 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.
- (índice) é 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. Visualizar um arquivo no Editor
Navegar por nome de arquivo
Por padrão, o painel Página agrupa os recursos por diretório. Para desativar esse agrupamento e ver os recursos de cada domínio como uma lista simples:
- Abra o painel Página. Consulte Navegar por diretório.
Clique em Mais opções
e
desative 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. O 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 é aberto 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. Como visualizar um recurso no painel Application
Procure arquivos por tipo no painel "Network"
Consulte Filtrar por tipo de recurso.
Figura 12. Como filtrar por CSS no registro de rede