Esiste un modo per filtrare le richieste di rete utilizzando gli strumenti per sviluppatori di Google Chrome?

È possibile filtrare alcune richieste utilizzando gli strumenti per sviluppatori di Chrome, ad esempio, filtrare tutte le richieste di immagini?

Non esiste una funzione di filtro molto flessibile, ma la barra in basso ti consente di mostrare solo le richieste di un determinato documento o tipo di connessione:

Non puoi semplicemente escludere le immagini, ma dovrebbe aiutare.

Puoi anche premere Control/ Command+ Fper cercare una particolare stringa nell'elenco delle richieste e selezionare la casella "filtro" per nascondere le richieste che non corrispondono:

Filtri di testo negativi : elenca i risultati che non corrispondono a una determinata query.

• Usa -.png o -.gif o -.jpg come filtro nel pannello di rete.
• Anche molti altri filtri negativi funzionano. es -mime-type: image / png , -larger-che: 20k , -domain: yoursite.com , -status-codice: 404 . Consulta la documentazione per sviluppatori di Chrome - Ordinamento e filtro .

Disponibile da Chrome ~ 42 - Issue Link , annunciato qui

Un altro approccio: nel pannello Rete, apri il filtro e CTRL/CMDfai clic sui tipi di richieste che desideri mostrare. Per nascondere solo le richieste di immagini, seleziona tutti gli altri tipi tranne le immagini mentre tieni premuto CTRL/CMD.

Scrivi -.png -.gif -.jpnella casella di input del filtro per escludere tutte le immagini dai risultati. In basso mostra la quantità totale di dati trasferiti senza immagini.

Un "Ingegnere di Google che lavora su Chrome" ha twittato nel dicembre 2014:

Chrome DevTools: i filtri di testo negativi sono appena arrivati ​​nel pannello Rete. Elenca i risultati che non corrispondono a una determinata query Link Twitter

modifica : puoi anche filtrare per dominio, tipo mime, dimensione del file, ... o escludere inserendo -domain:cdn.sstatic.nete combinando uno di questi mime-type:image/png -larger-than:100Kper mostrare solo i file png più piccoli di 100kb nel pannello di rete

vedi DevTools: State Of The Union 2015 di Addy Osmani

Dal momento che Chrome 42 .

Nella mia build di Google Chrome (versione 74.0.3729.157 (64-bit)), ho trovato i seguenti filtri disponibili (ho aggiunto alcuni esempi). Nota che DevTools ha una funzionalità di completamento automatico (che aiuta molto a sistemare queste cose).

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

Come -MimeType puoi usare il dominio nell'input del filtro, in questo modo:

dominio: yourdomain.com

Una soluzione semplice, breve e veloce:

Basta mettere -.

Per non mostrare alcun URL con estensione (contenuto statico), quindi hai chiaramente gli URL qui.

Se apri gli strumenti per sviluppatori, scegli rete. Dalla barra in fondo alla pagina, scegli le immagini se vuoi cercare specificamente le richieste di immagini. I filtri sono tutti esclusivi, quindi non puoi filtrare solo le richieste di immagini. Ecco qua.

L'aggiunta di un -MimeType:image/jpegfiltro ha funzionato per me.