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

125

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

Adam Lee
la source
29
Voter pour rouvrir; cela ne devrait pas être considéré comme hors sujet. Les outils de développement Chrome / WebKit sont clairement des «outils logiciels couramment utilisés par les programmeurs» (comme autorisé dans la FAQ ); J'ai souvent utilisé les options de filtrage lors du développement.
Jeremy Banks
Veuillez sélectionner la bonne réponse, la réponse marquée est obsolète depuis longtemps.
Suraj Jain

Réponses:

21

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

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

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

entrez la description de l'image ici

Jeremy Banks
la source
9
cette réponse est dépassée. Voir le suivant ( stackoverflow.com/a/27770139/610585 )
undefined
257

Filtres de texte négatifs - liste les résultats ne correspondant pas à une requête donnée.

  • Utilisez -.png ou -.gif ou -.jpg comme filtre dans le panneau réseau.
  • De nombreux autres filtres négatifs fonctionnent également. par exemple -mime-type: image / png , -larger-than: 20k , -domain: yoursite.com , -status-code: 404 . Consultez la documentation des développeurs Chrome - Tri et filtrage .

Disponible depuis Chrome ~ 42 - Issue Link , annoncé ici

Une autre approche: dans le panneau Réseau, ouvrez le filtre et CTRL/CMDcliquez sur les types de demandes que vous souhaitez afficher. Pour masquer uniquement les demandes d'image, sélectionnez tous les autres types à l' exception des images tout en maintenant CTRL/CMD.

Mark Doyle
la source
2
Utilisez CMD + cliquez sur OS X.
non défini
7
Vous pouvez également filtrer par code d'état http et d'autres fonctionnalités , telles que: domaine, has-response-header, is, plus grand que, méthode, type mime, schéma, set-cookie-name, set-cookie-value, set-cookie-domain, status-code, et vous pouvez filtrer par multiple à la fois, par exemple pour voir toutes les demandes qui ne sont pas des 200, 404 ou 302, utilisez:-status-code:200 -status-code:404 -status-code:302
Brad Parks
3
Utilisation de la version Chrome "51.0.2704.79 (64 bits)" sous Linux. On dirait que le filtrage négatif a été supprimé? Quelqu'un d'autre voit ça?
Wilson F
4
Semble toujours être cassé à partir de Chrome 52, cette fonctionnalité ne peut malheureusement pas fonctionner.
JKillian
2
Notez que la case à cocher "Regex" à côté de l'entrée du filtre doit être décochée pour que cela fonctionne. Notez également que -.jscela exclura les requêtes .jset .json. Pour une raison quelconque, la syntaxe du filtre négatif ne semble pas être couverte dans la documentation la plus récente .
James
34

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

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

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

modifier : vous pouvez même filtrer par domaine, type mime, taille de fichier, ... ou exclure en entrant -domain:cdn.sstatic.netet en combinant l'un d'entre eux mime-type:image/png -larger-than:100Kpour afficher uniquement les fichiers png de moins de 100 Ko dans le panneau réseau

voir DevTools: State Of The Union 2015 par Addy Osmani

Depuis Chrome 42 .

Ivica Vucemilo
la source
2
Merci, la domain:pièce est exactement ce que je cherchais en ce moment. Cela et un tas d'autres sont actuellement couverts dans la documentation liée à l'autre réponse
JMM
13

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 a une fonctionnalité de saisie semi-automatique (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
YenForYang
la source
7

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

domaine: votredomaine.com

Jules Goullee
la source
5

Une solution simple, courte et rapide:

Juste mettre -.

Pour ne pas afficher d'URL avec une extension (contenu statique), vous avez donc des URL clairement ici.

filtre regex

Nabi KAZ
la source
1

entrez la description de l'image ici

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

Battre Richartz
la source
1

L'ajout d'un -MimeType:image/jpegfiltre a fonctionné pour moi.

Mat
la source