Les outils de développement Google Chrome inspectent les styles d'élément non affichés
Depuis quelques semaines déjà .... sur certains de nos sites, mais pas tous, lors de l'inspection d'un élément, l'onglet des styles affiche uniquement la "boîte de styles", mais pas les styles réels relatifs au css ?? - Encore une fois, c'estSEULEMENTsur certains sites - bizarre
Cela devrait ressembler à ceci (avec les styles sur la droite concernant css)
MAIS...... à la place, surQUELQUESde nos sites, cela a commencé il y a quelques semaines et ressemble à ceci .... sans css affiché dans l'onglet styles :
REMARQUE: cela fonctionne depuis 2 ans. La page semble correcte et tous les styles sont appliqués au DOM, mais ne s'affichent PAS dans l'onglet Styles lors de l'inspection d'élément.
Des idées??
Je viens d'avoir ce même problème et pour le résoudre, je suis allé dans Outils de développement Chrome -> Paramètres -> faites défiler vers le bas et cliquez sur "Restaurer les paramètres par défaut et recharger" puis tout est revenu comme par magie!
Je n'avais rien changé entre le fait de fonctionner et le moment où il s'était arrêté, donc je ne sais pas pourquoi ça s'est cassé, mais j'espère que cela vous aidera aussi.
Je viens de fermer l'onglet, et le rouvrir, puis clic droit> inspecter l'élément. Il n'est pas nécessaire de restaurer l'ensemble des outils de développement avec les paramètres par défaut. Il est un gaspillage. Essayez, ça marche! :)
Je devais aller à Chrome Developer Tools -> Settings -> Enable JavaScript source maps et ensuite désactiver cette case à cocher. Cela est probablement dû aux sources de cartes et au fait que je construis le scss à css.
quelque chose qui a fonctionné pour moi: chrome: flags> Activer les expériences des outils de développement> Désactiver. Je l'avais activé à un moment donné, je l'utilisais depuis des années sans problème, je ne pouvais alors voir aucun détail de style décrit dans OP. Après la mise à jour, la réinitialisation des préférences de devtools et même l’essai incognito, c’était la seule chose qui semblait le remettre en marche. Il y a eu quelques expériences intéressantes, mais je préférerais de loin pouvoir faire mon travail ...
Même j'ai fait face à ce problème !!!
le fichier style.css était à l'origine de ce problème.
Je viens de créer un nouveau fichier css (ex: style1.css) et de couper le contenu du fichier css ancien (toutes les lignes de style.css) dans le fichier style1.css. Ça marche
Remarque: N'oubliez pas de mettre à jour la balise link, qui charge le fichier css.
Je faisais également face à ce problème, en plus des suggestions que les autres utilisateurs ont fait pour que cela fonctionne pour moi en accédant:
Outils de développement Chrome -> CSS -> Recharger les feuilles de style liées
Je pense que cela peut être utile .. S'il s'agit d'un projet angulaire>, lancez simplement
ng servir --extract-css.
J'utilise Dreamweaver et Breckets . Je pouvais constater que le problème ne se produisait que lorsque j'utilisais Dreamweaver . J'ai résolu le problème en modifiant les préférences de Dreamweaver
-> Format du code -> Type de saut de ligne -> CR LF (Windows)
J'avais juste le même problème étrange. Je ne suis pas sûr à 100% de ce qui a provoqué cette situation, mais nous utilisons des outils de génération pour construire SCSS en CSS. Je suis allé dans mon fichier CSS et j'ai supprimé la référence de la carte source -
/*# sourceMappingURL=myCSS.map */
Et tout à coup, il a recommencé à apparaître. Ensuite, je l'ai rajouté et je peux encore le voir. Je ne sais pas si c'est parce qu'une version de la carte est mise en cache maintenant ou non, mais cela a fonctionné pour moi.
Je pense que vos fichiers CSS ne sont pas chargés correctement. Il suffit de vérifier la syntaxe pour référencer les feuilles de style externes.
Ça devrait être comme ça
<link rel="stylesheet" type="text/css" href="mystyle.css">
Si vous ignorez la rel = "feuille de style", le navigateur peut penser qu'il s'agit d'un fichier brut. Pour confirmer le chargement des feuilles de style, utilisez Inspecteur Chrome -> Sources
Consultez les ressources du site
Pas besoin de réinitialiser quoi que ce soit. J'espère que ça aide :)