Ver os ficheiros de recursos que compõem uma página Web

Pode ver os recursos que compõem uma página Web a partir de várias ferramentas (ou painéis) nas DevTools do Microsoft Edge, incluindo:

• Ferramenta de rede
• Ferramenta de origens
• Ferramenta de aplicação

Os recursos são os ficheiros que compõem uma página Web. Exemplos de recursos incluem:

• Ficheiros CSS
• Ficheiros JavaScript
• Ficheiros HTML
• Ficheiros de imagem

Consulte também:

• Aprender desenvolvimento Web no Mozilla.org
• Visão geral do DevTools

Abrir ficheiros de recursos a partir do Menu de Comandos

Quando souber o nome do ficheiro de recursos de uma página Web que pretende inspecionar, o Menu de Comandos em DevTools fornece uma forma rápida de localizar e abrir esse recurso.

1. Numa nova janela ou separador, aceda a uma página Web, como a demonstração de funcionalidades de teste de acessibilidade. (Os ficheiros de origem dessa página 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. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS).

3. Quando o DevTools tiver foco, prima Ctrl+P (Windows, Linux) ou Comando+P (macOS). Em alternativa, clique no botão Personalizar e controlar DevTools () em DevTools e, em seguida, selecione Abrir ficheiro. O Menu de Comandos é aberto, apresentando a lista Abrir Ficheiro :

   

4. Se existir um pedido maior do que (>), prima a Tecla de Retrocesso para aceder à linha de comandos Abrir Ficheiro .

5. Comece a escrever o nome do ficheiro e, em seguida, prima Enter quando o ficheiro correto estiver realçado na caixa de preenchimento automático ou selecione o ficheiro na lista pendente:

   

Procurar ficheiros de recursos na ferramenta Rede

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

1. Numa nova janela ou separador, aceda a uma página Web, como a Demonstração de Atividade de Rede Inspecionar. (Os ficheiros de origem dessa página 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. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Rede . Se esse separador não estiver visível, clique no botão Mais Ferramentas ().

4. Certifique-se de que o botão Registar registo de rede no canto superior esquerdo está selecionado (vermelho).

5. Atualize a página. Por predefinição, o botão Todos os filtros está selecionado, pelo que todos os ficheiros de recursos da página Web estão listados na ferramenta Rede , uma linha por ficheiro de recurso:

   

6. Selecione um recurso para vê-lo. Por exemplo, selecione o network-tutorial caminho a apresentar index.html:

   

Para saber mais sobre como mostrar a atividade de rede gerada pelos recursos da página, veja Log network activity (Atividade de rede de registo) no artigo Inspect network activity (Inspecionar a atividade de rede).

Procurar ficheiros de recursos por tipo de ficheiro ao filtrar na ferramenta Rede

Na ferramenta Rede , quando vê a lista de ficheiros de recursos que compõem a página Web atual, pode filtrar o tipo de recursos a listar, como apenas a apresentação .css ou .js ficheiros.

Por exemplo, para apresentar apenas ficheiros CSS:

1. Numa nova janela ou separador, aceda a uma página Web, como a Demonstração de Atividade de Rede Inspecionar. (Os ficheiros de origem dessa página 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. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Rede . Se esse separador não estiver visível, clique no botão Mais Ferramentas ().

4. Atualize a página. Por predefinição, o botão Todos os filtros está selecionado, pelo que todos os ficheiros de recursos da página Web estão listados na ferramenta Rede .

5. Clique em CSS para filtrar e apresentar apenas ficheiros CSS. Apenas o main.css ficheiro está listado:

   

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

Mostrar ficheiros de recursos na ferramenta Rede a partir de outras ferramentas

Em várias ferramentas que listam ficheiros de recursos para a página Web, para inspecionar um ficheiro de recursos na ferramenta Rede , clique com o botão direito do rato no ficheiro de recurso e, em seguida, selecione Revelar no painel Rede. Poderá ter de atualizar primeiro a página Web enquanto a Ferramenta de rede estiver aberta.

Por exemplo, para ir da lista de recursos do separador Página na ferramenta Origens para a ferramenta Rede :

1. Numa nova janela ou separador, aceda a uma página Web, como a Demonstração de Atividade de Rede Inspecionar. (Os ficheiros de origem dessa página 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. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Rede . Se esse separador não estiver visível, clique no botão Mais Ferramentas ().

4. Prima Ctrl+R para atualizar a página. Os ficheiros de recursos recebidos que compõem a página Web são agora adicionados como linhas no separador Rede . A linha de pasta network-tutorial/ representa a página HTML - neste caso, index.html.

5. Em DevTools, na Barra de Atividade, clique no separador Origens .

6. No separador Página no canto superior esquerdo, clique com o botão direito do rato num ficheiro de recurso e, em seguida, selecione Revelar no painel Rede:

   

   Se o menuitem Revelar no painel Rede não estiver listado, aceda à ferramenta Rede , certifique-se de que o botão Registar registo de rede no canto superior esquerdo está selecionado (vermelho) e, em seguida, atualize a página.

Procurar ficheiros de recursos por pasta no separador Página da ferramenta Origens

Pode utilizar a ferramenta Origens para ver os ficheiros de recursos da página Web organizados por diretório, da seguinte forma:

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na Barra de Atividade, selecione o separador Origens . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

3. No painel Navegador , no canto superior esquerdo, selecione o separador Página .

4. Por predefinição, os ficheiros de recursos são agrupados por pasta. Se os recursos estiverem todos listados alfabeticamente pelo nome de ficheiro, clique no botão Mais opções () à direita do separador Página e, em seguida, selecione Agrupar por pasta:

   

   O separador Página contém vários tipos de nós, incluindo:

   Item de página	Descrição
   top	O contexto de navegação do documento principal, como um separador do browser, uma janela do browser ou uma moldura. Veja Contexto de navegação ou <iframe>: o elemento Frame Inline.
   microsoftedge.github.io	O domínio. Todos os recursos aninhados no mesmo provêm desse domínio. Por exemplo, o URL completo do buttons.js ficheiro é https://microsoftedge.github.io/Demos/devtools-a11y-testing/buttons.js.
   Demos/devtools-a11y-testing, css, photos	Diretórios.
   devtools-a11y-testing/	O documento HTML principal.
   buttons.js	Um script para processar o botão é premido na página.

5. Selecione um ficheiro de recurso para vê-lo no Editor da ferramenta Origens :

   

Procurar ficheiros de recursos ordenados por nome de ficheiro no separador Página da ferramenta Origens

Por predefinição, o separador Página na ferramenta Origens agrupa ficheiros de recursos por pasta. Para apresentar todos os ficheiros de recursos de cada domínio agrupados numa única lista alfabética:

1. Numa nova janela ou separador, aceda a uma página Web, como a demonstração de funcionalidades de teste de acessibilidade. (Os ficheiros de origem dessa página 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. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

3. Em DevTools, na Barra de Atividade, selecione o separador Origens . Se esse separador não estiver visível, clique no botão Mais ferramentas ().

4. No painel Navegador , no canto superior esquerdo, selecione o separador Página .

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

   

   Todos os ficheiros de recursos para cada domínio (por exemplo , Superior) são agrupados numa única lista alfabética:

   

Procurar ficheiros de recursos por tipo de ficheiro na árvore Frames na ferramenta Aplicação

Uma forma de ver recursos de página Web agrupados por tipo de ficheiro é através da árvore Frames na ferramenta Aplicação :

1. Para abrir o DevTools, clique com o botão direito do mouse na página da Web e selecione Inspecionar. Em alternativa, prima Ctrl+Shift+I (Windows, Linux) ou Comando+Opção+I (macOS). O DevTools é aberto.

2. Em DevTools, na Barra de Atividade, selecione o separador Aplicação . Se esse separador não estiver visível, clique no botão Mais Ferramentas ().

   A ferramenta Aplicação é aberta e, por predefinição, mostra primeiro o painel Manifesto :

   

3. Desloque-se para baixo até ao painel Frames e, em seguida, expanda a pasta na qual está interessado:

   

4. Selecione um recurso para vê-lo na ferramenta Aplicação :

   

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 é da autoria de Kayce Bascos.

Este trabalho é licenciado ao abrigo de uma Licença Internacional creative Commons Attribution 4.0.