Existe-t-il un moyen simple de visualiser le niveau de compression dans Chrome?

33

Je suis occupé à vérifier le fonctionnement de mon serveur Web sous gzip. Je suis convaincu que gzip est activé car Chrome affiche l'encodage du contenu: en-tête gzip.

Existe-t-il un moyen simple de savoir combien de fichiers ont été compressés dans les outils de développement de Chrome?

Peter Smit
la source
1
S'il existe un plugin pour afficher les en-têtes HTTP, vous pouvez simplement comparer la taille du document à l'en- Content-Lengthtête.
Lèse majesté

Réponses:

32

Réponse mise à jour pour 2017 : oui.

La colonne de taille de l'onglet Réseau dans les outils de développement Chrome contient les tailles compressée et non compressée, pour gzip, brotli et ainsi de suite. Par exemple:

Ici, la taille compressée est de 242 Ko, la taille non compressée est de 1,1 Mo

Pour voir les deux, assurez-vous que Devtools affiche de grandes lignes de demande . C'est la première icône dans les options "Affichage" de la barre d'outils spécifique au réseau.

Mikemaccana
la source
7
Merci. Facile à rater ça. Il faut cliquer sur "utiliser les grandes lignes de requête"
alds
Vous pouvez également cliquer avec le bouton droit sur les en-têtes de colonne et afficher l'en-tête de réponse "Content-Encoding". Cela fait, vous pouvez trier la colonne pour obtenir une liste rapide de toutes les réponses compressées.
thirdender
18

De loin, la méthode la plus simple consiste à utiliser un outil en ligne. GIDZipTest vous montre beaucoup de détails: la taille d'origine, la taille compressée et le pourcentage de compression.


Cependant, il est possible dans Chrome avec un peu d'effort. (Mise à jour pour le dernier Chrome, septembre 2011).

Dans les outils de développement, allez dans l'onglet "Réseau" et rechargez la page. Vous verrez une liste de tous les fichiers récupérés dans la colonne de gauche. Cliquez sur la page / le fichier approprié à gauche puis sur l'onglet "En-têtes" dans le volet de droite.

Sous "En-têtes de réponse", vous devriez voir "Content-Encoding: gzip" suivi d'un en-tête "Content-Length". C'est la taille du contenu compressé.

Il est plus difficile de trouver la taille non compressée. Si vous distribuez des fichiers statiques, vous pouvez simplement vérifier sa taille. Pour le contenu dynamique, vous devez copier-coller le code HTML dans un éditeur de texte et l'enregistrer pour vérifier sa taille exacte.

Chèvre mécontente
la source
où est le "activer le suivi des ressources"?
Pacerier
@Pacerier: c'est légèrement différent dans la dernière version de Chrome; J'ai mis à jour ma réponse avec de nouvelles instructions.
DisgruntledGoat
Outil soigné. Je n'arrivais pas à comprendre pourquoi les réponses envoyées par mon application Google App Engine n'indiquaient pas la taille compressée. Les réponses envoyées par le SDK (c'est-à-dire localhost) ne sont pas compressées, contrairement aux réponses provenant du cloud. Il s'avère que Chrome fonctionne parfaitement.
Evan Plaice
9

Mise à jour pour 2017

Lors de l'utilisation de grandes icônes, les outils de développement de chrome affichent une taille de compression avant et après dans les onglets du réseau.

J'ai confirmé en activant et désactivant gzip sur mon serveur Web.

Capture d'écran des outils de développement Chrome

entrez la description de l'image ici

CodeMonkey
la source
5

Une autre façon d’y parvenir est avec cURL:

curl -i -H "Accept-Encoding: gzip" http://someurl.com | wc -c

contre

curl -i http://someurl.com | wc -c

Le nombre indiqué après chaque commande est le nombre d'octets qui ont traversé le fil.

Stephen
la source
2

J'ai entendu dire que celui en chrome est défectueux en raison d'un bogue dans webkit.

Le plug -in Y Slow pour firefox fait un excellent travail. Lors de son exécution, accédez à l'onglet Composants et développez le type de composant pour lequel vous souhaitez utiliser les valeurs. Il montrera la taille originale et la taille de gzip.

XOPJ
la source
2

Ce n'est pas un outil spécifique à Chrome, mais j'utilise Fiddler lors de la vérification des informations de trafic / en-tête HTTP. C'est un excellent outil, fonctionne sur n'importe quel navigateur et c'est gratuit!

BradB
la source
1
Il existe également une version d'extension Chrome de Fiddler !
karlbecker_com
Merci de suggérer ceci. Fiddler n'indique pas "taille non compressée" mais vous permet d'ajouter des colonnes pour "CompressionSavings" et "CompressionSavings%". Ajoutez-les en cliquant avec le bouton droit de la souris sur les colonnes ==> "Personnaliser les colonnes" ==> "Divers" ==> La liste déroulante "Nom du champ".
Jason
0

Pour tous ceux qui arrivent encore ici à partir d'une recherche générale sur Google (comme je l'ai fait), dans les versions modernes de Firefox, il est possible de voir la taille "brute" et gzippée directement à partir de ses devtools en comparant les colonnes "Taille transférée" et "Taille". "Taille" est la taille brute de la réponse, la "Taille transférée" est la taille réelle des données transférées pour la réponse, qui peut être inférieure à la taille réelle dans le cas de gzip, comme dans l'image ci-dessous, ou même 0 dans Si la réponse a été mise en cache dans le client.

firefox devtools taille gzippée

Apprentissage
la source