Existe uma maneira de filtrar solicitações de rede usando as ferramentas de desenvolvedor do Google Chrome?

125

É possível filtrar algumas solicitações usando as ferramentas de desenvolvedor do Chrome, por exemplo, filtrar todas as solicitações de imagem?

Adam Lee
fonte
29
Votação para reabrir; isso não deve ser considerado fora de tópico. As ferramentas de desenvolvedor do Chrome / WebKit são claramente "ferramentas de software comumente usadas por programadores" (conforme permitido no FAQ ); Eu sempre usei as opções de filtragem durante o desenvolvimento.
Jeremy Banks
Selecione a resposta correta, a resposta marcada está desatualizada há muito tempo.
Suraj Jain

Respostas:

21

Não há um recurso de filtragem muito flexível, mas a barra na parte inferior permite mostrar apenas solicitações de um determinado documento ou tipo de conexão:

Você não pode simplesmente excluir imagens, mas deve ajudar.

Você também pode pressionar Control/ Command+ Fpara procurar uma sequência específica na lista de solicitações e marcar a caixa "filtro" para ocultar solicitações que não correspondem:

insira a descrição da imagem aqui

Jeremy Banks
fonte
9
esta resposta está desatualizada. Veja o próximo ( stackoverflow.com/a/27770139/610585 )
indefinido
256

Filtros de texto negativos - lista os resultados que não correspondem a uma determinada consulta.

Disponível desde o Chrome ~ 42 - Issue Link , anunciado aqui

Outra abordagem: no painel Rede, abra o filtro e CTRL/CMDclique nos tipos de solicitações que deseja mostrar. Para ocultar apenas solicitações de imagem, selecione todos os outros tipos, exceto imagens enquanto mantém pressionado CTRL/CMD.

Mark Doyle
fonte
2
Use CMD + clique no OS X.
indefinido
7
Você também pode filtrar por código de status http e outros recursos , como: domínio, has-response-header, é maior que, método, mime-type, esquema, set-cookie-name, set-cookie-value, set-cookie-domain, status-code, e você pode filtrar por vários de cada vez, por exemplo, para ver todas as solicitações que não são 200, 404 ou 302, use:-status-code:200 -status-code:404 -status-code:302
Brad Parks
3
Usando a versão Chrome "51.0.2704.79 (64 bits)" no Linux. Parece que a filtragem negativa foi removida? Mais alguém está vendo isso?
Wilson F
4
Ainda parece estar quebrado a partir do Chrome 52, não é possível fazer com que esse recurso funcione tristemente.
precisa saber é o seguinte
2
Observe que a caixa de seleção "Regex" ao lado da entrada do filtro deve estar desmarcada para que isso funcione. Observe também que -.jsexcluirá as solicitações .jse ambos .json. Por alguma razão, a sintaxe do filtro negativo não parece ser abordada na documentação mais recente .
James
34

Você escreve -.png -.gif -.jpna caixa de entrada do filtro para excluir todas as imagens dos resultados. Na parte inferior, mostra a quantidade total de dados transferidos sem imagens.

Um "Engenheiro do Google trabalhando no Chrome" twittou em 14 de dezembro:

Chrome DevTools: os filtros de texto negativos acabaram de chegar ao painel Rede. Listar resultados que não correspondem a uma determinada consulta Twitter Link

editar : você pode até filtrar por domínio, tipo mime, tamanho do arquivo ... ou excluir inserindo -domain:cdn.sstatic.nete combinando qualquer um deles mime-type:image/png -larger-than:100Kpara mostrar apenas arquivos png menores que 100kb no painel de rede

veja DevTools: Estado da União 2015 por Addy Osmani

Desde o Chrome 42 .

Ivica Vucemilo
fonte
2
Obrigado, a domain:parte é exatamente o que eu estava procurando no momento. Isso e muitos outros estão atualmente cobertos na documentação vinculada da outra resposta
JMM
13

De acordo com minha compilação do Google Chrome (versão 74.0.3729.157 (64 bits)), encontrei os seguintes filtros disponíveis (adicionei alguns exemplos). Observe que o DevTools possui uma funcionalidade de AutoCompletar (o que ajuda muito na classificação desse material).

domain:
-domain:
    # Use a * character to include multiple domains.
    # Ex:  *.com, domain:google.com, -domain:bing.com

has-response-header:
-has-response-header:
    # Filter resources with the specified HTTP response header.
    # Ex: has-response-header:Content-Type, has-response-header:age

is:
-is:
    # is:running finds WebSocket resources
    # I've also come across:
    #  - is:from-cache,
    #  - is:service-worker-initiated
    #  - is:service-worker-intercepted


larger-than:
-larger-than:
    # Note: larger-than:1000 is equivalent to larger-than:1k
    # Ex: larger-than:420, larger-than:4k, larger-than:100M

method:
-method:
    # method:POST, -method:OPTIONS, method:PUT, method:GET

mime-type:
-mime-type:
    # Ex: mime-type:application/manifest+json, mimetype:image/x-icon


mixed-content:
-mixed-content:
    # 2 that I've found documented: 
    #   mixed-content:all (Show all mixed-content resources) 
    #   mixed-content:displayed (Show only those currently displayed) (never used this personally)

scheme:
-scheme:
    # Ex: scheme:http, scheme:https,
    # Note that there are also scheme:chrome-extension, scheme:data

set-cookie-domain:
-set-cookie-domain:
    # 
    # Ex: set-cookie-domain:.google.com

set-cookie-name:
-set-cookie-name:
    # Match Set-Cookie response headers with name
    # Ex: set-cookie-name:WHATUP

set-cookie-value:
-set-cookie-value:
    # Match Set-Cookie response headers with value
    # Ex: set-cookie-value:AISJHD98ashfa93q2rj_94w-asd-yolololo

status-code:
-status-code:
    # Match HTTP status code
    # Ex: status-code:200, -status-code:302
YenForYang
fonte
7

Como -MimeType, você pode usar o domínio na entrada do filtro, assim:

domínio: seudominio.com

Jules Goullee
fonte
4

Uma solução simples, curta e rápida:

Apenas coloque -.

Para não mostrar nenhum URL com extensão (conteúdo estático), você tem URLs claramente aqui.

filtro regex

Nabi KAZ
fonte
1

insira a descrição da imagem aqui

Se você abrir as ferramentas do desenvolvedor, escolha rede. Na barra na parte inferior da página, escolha imagens se desejar procurar especificamente solicitações de imagens. Os filtros são todos exclusivos, portanto você não pode filtrar apenas solicitações de imagem. Ai está.

Beat Richartz
fonte
1

Adicionar um -MimeType:image/jpegfiltro funcionou para mim.

Matt
fonte