Localizar arquivos de origem para uma página usando a ferramenta Pesquisar

Use a ferramenta Pesquisar para localizar arquivos de origem específicos para uma página da Web, incluindo HTML, CSS, JavaScript e arquivos de imagem.

Uma página da Web é principalmente um arquivo HTML usado pelo navegador para exibir conteúdo. Mas as páginas da Web geralmente exigem outros recursos além do arquivo HTML, como CSS, JavaScript ou arquivos de imagem, para fornecer conteúdo mais avançado.

Na ferramenta Fontes , a guia Página do painel Navegador mostra todos os recursos baixados por uma página da Web. Mas quando há muitos recursos, pode ser útil pesquisá-los . Para fazer pesquisas de texto e expressões regulares em todos os recursos de uma página da Web, use a ferramenta Pesquisar .

Abra a ferramenta de pesquisa usando um atalho de teclado

Para abrir rapidamente a ferramenta Pesquisar :

  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. Pressione Esc para abrir o painel Visualização Rápida na parte inferior do DevTools e, na barra de ferramentas Exibição Rápida , selecione a guia Pesquisar . Se essa guia não estiver visível, clique no botão Mais Ferramentas (ícone Mais Ferramentas).

    Ou pressione Ctrl+Shift+F (Windows, Linux) ou Command+Option+F (macOS).

A ferramenta Pesquisar é aberta no painel Visualização rápida :

A ferramenta Pesquisar, com a barra de ferramentas de pesquisa

Consulte também Atalhos de teclado globais.

Abra a ferramenta Pesquisar usando o Menu de Comando

Para abrir a ferramenta Pesquisar no Menu de Comando:

  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. Abra o Menu de Comando, pressionando Ctrl+Shift+P (Windows, Linux) ou Command+Shift+P (macOS).

  3. Comece a digitar a pesquisa e selecione Mostrar Pesquisa:

O Menu de Comando com o item Mostrar Pesquisa selecionado

Pesquisar texto

Para pesquisar texto na página da Web atual e seus arquivos de recursos:

  1. Coloque o foco no campo de entrada da pesquisa.
  2. Insira o texto que você deseja pesquisar e pressione Enter.

A ferramenta Pesquisar mostra a lista de recursos correspondentes e realça as linhas de texto correspondentes. O número de arquivos e linhas correspondentes também é indicado na parte inferior da ferramenta.

Resultados da pesquisa exibidos na ferramenta de pesquisa, com o texto correspondente realçado em amarelo

Diferenciar maiúsculas de minúsculas (caracteres minúsculos ou maiúsculos)

Por padrão, a ferramenta Pesquisar não diferencia maiúsculas de minúsculas. A pesquisa de um termo corresponde a ocorrências desse termo, independentemente de caracteres minúsculos ou maiúsculos.

Para localizar apenas resultados que correspondam a um caso específico (caracteres minúsculos ou maiúsculos), clique no botão Diferenciar maiúsculas de minúsculas (Aa) na barra de ferramentas de pesquisa.

Pesquisar expressões regulares

Você pode usar expressões regulares para encontrar resultados correspondentes. Para usar uma expressão regular, clique no botão Usar Expressão Regular (.*) na barra de ferramentas e insira uma expressão regular JavaScript válida na caixa de texto Pesquisar :

Pesquisando uma expressão regular

Os caracteres de barra/ ") que normalmente delimitam padrões de expressões regulares em JavaScript não são necessários.

Da mesma forma, sinalizadores que aparecem opcionalmente após a barra de fechamento (/) em expressões regulares JavaScript não podem ser usados aqui. A ferramenta de Pesquisa corresponde aos resultados como se os sinalizadores de expressão regular e im , gtenham sido fornecidos:

Flag Nome Descrição
g Global A pesquisa é global: a ferramenta continuará pesquisando arquivos mesmo depois que uma primeira correspondência for encontrada, como se o sinalizador de expressão g regular tivesse sido fornecido.
i Ignorar maiúsculas e minúsculas A pesquisa ignora o uso de maiúsculas e minúsculas por padrão, como se o i sinalizador tivesse sido fornecido. Para desabilitar esse sinalizador e localizar apenas resultados que correspondam a um caso específico, clique no botão Diferenciar maiúsculas de minúsculas (Aa) na barra de ferramentas de pesquisa.
m Multilinhas A pesquisa é de várias linhas: a ferramenta trata cada linha nos arquivos de origem de forma independente e os ^ símbolos e $ correspondem ao início e ao fim de qualquer linha, respectivamente, como se o m sinalizador tivesse sido fornecido.

Veja também:

Abrir um arquivo encontrado na ferramenta Fontes

Depois de fazer uma pesquisa, clique em uma linha de resultado para abrir o arquivo correspondente. A ferramenta Fontes é aberta no painel principal e carrega o arquivo de recurso, rolado para a linha correspondente:

Clicar em uma linha de pesquisa abre a ferramenta Fontes e carrega o recurso correspondente

Atualizar os resultados da pesquisa

Uma página da Web pode continuar solicitando recursos após terminar de carregar, portanto, os resultados exibidos no painel de pesquisa podem ficar desatualizados depois de um tempo.

Para atualizar os resultados da pesquisa, siga um destes procedimentos:

  • Clique no botão Atualizar (botão Atualizar pesquisa) na barra de ferramentas.
  • Pesquise novamente digitando um termo no campo de entrada da pesquisa.

Para limpar os resultados da pesquisa, clique no botão Limpar (botão Limpar pesquisa) na barra de ferramentas.