web-dev-qa-db-fra.com

Existe-t-il un moyen de filtrer les requêtes réseau à l’aide des outils de développement Google Chrome)?

Est-il possible de filtrer certaines requêtes à l'aide de Chrome, par exemple, filtrer toutes les demandes d'images?

javascriptgoogle-chromegoogle-chrome-devtoolsfiltering
104
Adam Lee

Il n'y a pas de fonctionnalité de filtrage très flexible, mais la barre en bas vous permet d'afficher uniquement les demandes d'un certain document ou type de connexion:

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

Vous pouvez aussi 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:

enter image description here

19
Jeremy Banks

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

  • Utilisez -. Png ou -. Gif ou - .jpg comme filtre dans le panneau de réseau.
  • Beaucoup d'autres filtres négatifs fonctionnent aussi. par exemple. - type-mime: image/png , - plus grand que: 20k , - domaine: votresite.com , - code-statut: 404 Voir Documents pour développeurs Chrome - Tri et filtrage .

Disponible depuis Chrome ~ 42 - Lien de publication , 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’image, sélectionnez tous les autres types sauf images en maintenant CTRL/CMD.

217
Mark Doyle

Vous écrivez -.png -.gif -.jp dans la zone de saisie du filtre pour exclure toutes les images des résultats. En bas, il indique la quantité totale de données transférées sans images.

Un "ingénieur chez Google travaillant sur Chrome" a twitté en décembre 2014:

Chrome DevTools: les filtres de texte négatifs viennent d'arriver dans le panneau Réseau. Liste des résultats pas correspondant à une requête donnée Lien Twitter

edit : vous pouvez même filtrer par domaine, type MIME, taille de fichier, ... ou exclure en entrant -domain:cdn.sstatic.net et combinez ces éléments mime-type:image/png -larger-than:100K pour afficher uniquement les fichiers png inférieurs à 100 Ko dans le panneau de réseau

voir DevTools: Etat de l'Union 2015 par Addy Osmani

Depuis Chrome 42 .

30
Ivica Vucemilo

Sous ma version de Google Chrome (version 74.0.3729.157 (64 bits)), j'ai trouvé les filtres suivants disponibles (j'ai ajouté quelques exemples). Notez que DevTools possède une saisie semi-automatique. fonctionnalité (ce qui aide beaucoup à trier ces 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
7
YenForYang

Comme -MimeType, vous pouvez utiliser le domaine dans l'entrée de filtre, comme ceci:

domaine: votredomaine.com

5
Jules Goullee

Ajout d'un -MimeType:image/jpeg filtre a fonctionné pour moi.

1
Matt

enter image description here

Si vous ouvrez les outils de développement, choisissez le réseau. Dans la barre en bas de la page, choisissez des images si vous souhaitez rechercher spécifiquement des demandes d’image. Les filtres sont tous exclusifs, vous ne pouvez donc pas filtrer uniquement les demandes d’image. Voilà.

1
Beat Richartz