Comment déterminer la taille d'une source de page dans Chrome?

31

Évidemment, je veux obtenir la réponse sans enregistrer la page. Cela semble basique, mais je ne sais pas comment faire ça. Si cela nécessite un plugin, c'est ok. Il serait intéressant que la solution couvre également les feuilles de style, les scripts et les images associés à la page.

google-chrome google-chrome-extensions xxzoid
la source

Réponses:

42

Ouvrez les outils de développement ( Ctrl+ Shift+ Iou l' icône Paramètres en haut à droite de la fenêtre de votre navigateur => Tools=> Developer tools) sur la page souhaitée, passez à l' onglet Réseau et rechargez la page .

Dans la colonne Taille , vous verrez la taille de tout ce qui est chargé ( documents, feuilles de style, images, scripts, ... ). Vous pouvez activer le filtre pour vous aider à trouver uniquement les éléments nécessaires en bas au centre du cadre des outils de développement.

Cust0dian
la source
2
Merci! La nécessité de recharger n'est pas si intuitive.
xxzoid
4
C'est nul. Un clic droit -> 'afficher les propriétés' ou quelque chose de similaire sur une page déjà chargée serait beaucoup plus intuitif.
tholu
14
Il vaut la peine d'ajouter que la taille totale de toutes les demandes adressées au serveur est indiquée tout en bas lorsque l'onglet Réseau est ouvert. Ce n'est pas immédiatement évident
Aidan Miles
Dans une version plus récente de Chrome, la taille totale en bas de l'onglet Réseau est répertoriée en Ko / Mo transférés , ce qui devrait être égal à la somme de la colonne Taille .
Clint Pachl
3

J'ai créé mon troisième inspecteur de taille de page pour l' extension Chrome qui signale rapidement la taille de la page, l'utilisation du cache, les demandes réseau et le temps de chargement d'une page Web de manière pratique.

Tomi Mickelsson
la source
vraiment cool, bravo!
Jonathan Laliberte
1

Il existe une extension appelée " Quick source viewer ", qui met en cache toutes les ressources lorsqu'une page est chargée. Ouvrez la visionneuse (icône bleue), la taille (nombre d'octets) est affichée dans le volet de navigation à gauche.

basic6
la source