Existe-t-il un moyen de filtrer les demandes de réseau à l'aide des outils de développement de Google Chrome ?

Question

Est-il possible de filtrer certaines demandes à l'aide des outils de développement de Chrome, par exemple, de filtrer toutes les demandes d'images ?

Answer 1

Filtres de texte négatif - résultats de la liste pas correspondant à une requête donnée.

• Utilisez -.png o -.gif o -.jpg comme filtre dans le panneau réseau.
• De nombreux autres filtres négatifs fonctionnent également, par exemple -mime-type:image/png , -plus grand que:20k , -domaine:votresite.com , -Code d'état : 404 . Voir Documentation pour les développeurs de Chrome - Tri et filtrage .

Disponible depuis Chrome ~42 - Lien vers le numéro a annoncé ici

Une autre approche : Dans le panneau Réseau, ouvrez le filtre et CTRL/CMD -cliquez sur les types de demandes que vous souhaitez afficher. Pour masquer uniquement les demandes d'images, sélectionnez tous les autres types. sauf images tout en tenant CTRL/CMD .

Answer 2

Vous écrivez -.png -.gif -.jp dans le champ de saisie du filtre pour exclure toutes les images des résultats. En bas, la quantité totale de données transférées sans les images est indiquée.

Un "ingénieur de Google travaillant sur Chrome" a tweeté en décembre 14 :

Chrome DevTools : Les filtres de texte négatif viennent de faire leur apparition dans le panneau Réseau. Résultats de la liste pas correspondant à une requête donnée Lien Twitter

modifier Vous pouvez même filtrer par domaine, type de mime, taille de fichier, ... ou exclure en entrant le nom de la personne. -domain:cdn.sstatic.net et combinez n'importe laquelle de ces mime-type:image/png -larger-than:100K pour afficher uniquement les fichiers png de moins de 100kb dans le panneau réseau

véase DevTools : State Of The Union 2015 par Addy Osmani

Depuis Chrome 42 .

Answer 3

Sous ma version de Google Chrome (Version 74.0.3729.157 (64-bit)), j'ai trouvé les filtres suivants disponibles (j'ai ajouté quelques exemples). Notez que DevTools a une fonctionnalité d'auto-complétion (qui aide beaucoup à trier ce genre de choses).

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

Answer 4

Il n'y a pas de fonction de filtrage très souple, mais la barre en bas de l'écran vous permet de n'afficher que les demandes d'un certain type de document ou de connexion :

Vous ne pouvez pas simplement exclure les images, mais cela devrait aider.

Vous pouvez également appuyer sur Control / Command + F pour rechercher une chaîne particulière dans la liste des demandes, et cochez la case "filtre" pour masquer les demandes qui ne correspondent pas :

Answer 5

Mise à jour 2021 :

Dans la nouvelle mise à jour de chrome, vous pouvez choisir certains types de contenu JS, CSS, IMG, Font,... pour filtrer la demande facilement ; Voir :
(maintenant je suis sur la version 93.0.4577.63)

Une solution plus ancienne :

Une solution simple, courte et rapide :

Mettez juste -.

Pour ne pas montrer d'url avec l'extension (contenu statique), vous avez donc des URLs clairement ici.