2010-10-14 1 views
30

Comment voir les fichiers .css chargés dans une page dans Google Chrome? Je peux voir les .js (scripts) mais pas le .cssComment voir les fichiers .css chargés dans une page dans Google Chrome?

+1

Ceci est disponible dans Developer Tools -> Resources -> Stylesheets (vous devrez probablement activer le suivi des ressources pour la session), mais il s'agit probablement d'une question de type SuperUser. –

+0

Cela ne fonctionne pas dans certains cas –

Répondre

3

Je commande pour voir quels fichiers ont été chargés clic droit sur une section vierge sur la page et sélectionnez source de la page. De là, il vous montrera la page html telle qu'elle a été rendue par Chrome. Si vous regardez dans la section d'en-tête, vous devriez avoir une liste de tous les fichiers externes qui ont été appelés ainsi, et ils devraient être des liens hypertexte, cliquez simplement sur l'un d'entre eux et Chrome montrera ce fichier spécifique dans un nouvel onglet.

Bonne chance.

12

Attention: cette réponse est maintenant obsolète! Pour les versions récentes de Chrome, consultez la réponse de Dr1Ku ci-dessous.

sur Outils de développement onglet de Chrome (CTRL + MAJ + I), allez à Ressources (vous devrez peut-être activer le suivi des ressources sur cette page), puis cliquez sur le sous-onglet Stylesheets. Cela montrera tous les fichiers CSS chargés par cette page.

+7

Je pense que cette réponse peut être périmée. J'ai essayé ceci dans Chrome 55 et je ne vois aucune section de ressources. –

+0

@EliasZamaria Il est périmé. Vérifiez la réponse de Dr1Ku. – anonymous2

13

L'onglet Resourcesis gone as of Jan 2011, utilisez l'onglet Network et filtrez les demandes CSS.

réponse originale (2010)

Vous pouvez utiliser « Inspecter l'élément » (clic droit) sur un élément, puis choisissez l'onglet « Ressources », cliquez sur « Activer le suivi des ressources pour cette session ». Puis, à partir du "sous-onglet" (Tous, Documents, Images, Scripts) etc., vous pouvez cliquer sur "Feuilles de style".

Espérons que cela aide!

+1

Où se trouve l'onglet Ressources? – Pacerier

+0

De nos jours, il n'y a plus d'onglet 'Resources', essayez d'utiliser l'onglet' Network' et de ne filtrer que pour 'CSS'. Vous pouvez également regarder sous l'arborescence 'Sources', mais vous devez parcourir les différents sous-domaines et filtrer manuellement/visuellement les fichiers' .css'. – Dr1Ku

1

Cliquez avec le bouton droit n'importe où sur la page et sélectionnez Inspect element. À partir de là, vous devrez cliquer sur l'onglet Resources et indiquer à Chrome s'il doit toujours activer ce panneau ou une seule fois pour la session (choisissez celui que vous préférez). Une fois à l'intérieur, vous verrez tous les fichiers sur la gauche. Vous pouvez afficher le contenu en cliquant sur le petit onglet Content à côté de Headers sur la droite.

4

Si vous êtes intéressé, il est un moyen de les chercher dans JS:

(S'il vous plaît utiliser un navigateur moderne)

var sts = document.styleSheets; 
var result = []; 
for (var i = 0; i < sts.length; i++) { 
    var st = sts.item(i); 
    result.push(st.href.match(/\w*\.css/)); 
} 
console.dir(result); 
0

Janvier 2018

Pour voir les fichiers CSS chargé sur une page:

  1. Accédez à l'onglet Réseau
  2. Recharger la page
  3. Filtrer par CSS

Je sais que c'est une vieille question, mais la plupart des réponses sont pas à jour.

Questions connexes