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

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

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:

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.

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 .

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

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

domaine: votredomaine.com

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.

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à.

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