Google Chrome Dev Tools überprüfen Elementstile, die nicht angezeigt werden

76

Ab vor ein paar Wochen ... auf einigen unserer Websites, aber nicht allen, wird bei der Überprüfung eines Elements auf der Registerkarte "Stile" nur das Feld "Stile" angezeigt, nicht jedoch die tatsächlichen Stile in Bezug auf CSS? - Auch das ist NUR auf einigen Websites - seltsam

Es sollte so aussehen (mit Stilen, die rechts in Bezug auf CSS angezeigt werden)

Registerkarte "Stile"

ABER ... stattdessen hat dies auf EINIGEN unserer Websites erst vor ein paar Wochen so ausgesehen ... ohne dass CSS auf der Registerkarte "Stile" angezeigt wird:

Registerkarte "Falsche Stile"

HINWEIS: Es hat 2 Jahre lang funktioniert. - Die Seite sieht gut aus und alle Stile werden auf das DOM angewendet, werden jedoch beim Überprüfen des Elements NICHT auf der Registerkarte Stile angezeigt.

Irgendwelche Ideen??

google-chrome-devtools

— Jeff
quelle

Überprüfen Sie einmal und bestätigen Sie, dass die Klasse oder ID, die Sie überprüfen, in der geladenen CSS-Datei oder in den internen Stilen vorhanden ist.

— Vipul Hadiya

2

Es ist - wieder ist nichts "neu" an unserer Website - es hat 2 Jahre lang funktioniert - die Seite sieht gut aus und alle Stile werden auf das DOM angewendet ... sie werden einfach nicht mehr auf der Registerkarte "Stile" angezeigt

— Jeff

dann ist es wirklich komisch.

— Vipul Hadiya

Es passiert auf der Website pro Basis. Einige Websites zeigen die Stile und andere nicht. Das Zurücksetzen des Entwicklertools funktioniert gut.

— Santosh Kumar

Hast du das jemals herausgefunden? Ich habe alle vorgeschlagenen Antworten durchgesehen und keine davon funktioniert. Seltsamerweise passiert es nur in Chrome Canary

— Rick

84

Ich hatte gerade das gleiche Problem und um es zu beheben, ging ich zu Chrome Developer Tools -> Einstellungen -> Scrollen Sie nach unten und klicken Sie auf "Standardeinstellungen wiederherstellen und neu laden". Dann kam alles auf magische Weise zurück!

Ich hatte nichts daran geändert, dass es funktionierte und als es aufhörte, also nicht sicher, warum es kaputt ging, aber hoffentlich hilft dir das auch.

— Andrea Black
quelle

Diese Antwort funktioniert immer noch. Vielen Dank für die Informationen und Anleitung, so lösen Sie dieses Problem

— Ferdinand Fatal

hat mir auch geholfen! Ich habe gerade eine neue "Person" in Chrome erstellt, um alle Plugins deaktivieren zu können ... und von Anfang an war Styles nicht sichtbar. Die Standardeinstellungen wurden wiederhergestellt und es ist da. Komischerweise war es im anderen Browserfenster, in dem ich meinen Standardbenutzer verwendete, die ganze Zeit dort.

— Sebastian Schmid

19

Ich schließe einfach die Registerkarte, öffne sie erneut und klicke dann mit der rechten Maustaste auf> Element untersuchen. Sie müssen nicht die gesamten Entwicklungswerkzeuge auf die Standardeinstellungen zurücksetzen. Es ist eine Verschwendung. Probieren Sie es aus, es funktioniert! :) :)

— Pilau
quelle

1

hat auch für mich gearbeitet - ich kann nicht glauben, dass es nicht das erste wäre, was eine ziemlich logische, vernünftige Technologie tun würde, aber hier stöbere ich in SE, anstatt nur "das verdammte Ding aus- und wieder einzuschalten", nehme ich an

— Caius Jard

2

Und mit dieser Lösung müssen Sie nicht einmal alle Einstellungen verlieren.

— Mike Shultz

Dies funktioniert manchmal und nur einmal, aber bald tritt das Problem für mich wieder auf. Verwenden von Chrome Version 54.0.2840.71 (64-Bit)

— Eduardo Chongkan

@EduardoChongkan Für mich funktioniert es die ganze Zeit, aber danke für die Aktualisierung!

— Pilau

Es gibt verschiedene Probleme. manchmal reicht es aus, zweimal F12 zu drücken (kein Tab schließen) ...

— Dandavis

4

Ich musste zu Chrome Developer Tools -> Settings -> Enable JavaScript source mapsdiesem Kontrollkästchen gehen und es dann deaktivieren. Es hat wahrscheinlich mit Sourcemaps und der Tatsache zu tun, dass ich das scssto baue css.

— Pratik Mandrekar
quelle

Dies funktionierte für mich für eine lokale Site, die Probleme hatte, danke!

— Erica Summers

2

etwas, das für mich funktioniert hat: chrome: flags> Developer Tools-Experimente aktivieren> Deaktivieren. Ich hatte es irgendwann aktiviert, es jahrelang ohne Problem verwendet und konnte dann keine Stildetails wie im OP beschrieben sehen. Nach dem Aktualisieren, Zurücksetzen der Einstellungen von devtools auf die Standardeinstellungen und sogar Inkognito-Versuchen schien dies die einzige Sache zu sein, die es wieder zum Laufen zu bringen schien. Es gab einige nette Experimente, aber ich wäre viel lieber in der Lage, meinen Job zu machen ...

— Dandavis
quelle

1

Ich war auch mit diesem Problem konfrontiert, zusätzlich zu den Vorschlägen, die die anderen Benutzer gemacht haben, funktionierte es für mich, auf Folgendes zuzugreifen:

Chrome Developer Tools -> CSS -> Relaoad verknüpfte Stylesheets

Bild Darstellung des Verfahrens

— Romeu
quelle

0

Ich hatte nur das seltsame Problem. Ich bin nicht 100% sicher, was dies ausgelöst hat, aber wir verwenden Build-Tools, um SCSS in CSS zu integrieren. Ich ging in meine CSS-Datei und entfernte die Quellkartenreferenz -

/*# sourceMappingURL=myCSS.map */

Und plötzlich tauchte es wieder auf. Dann habe ich es wieder hinzugefügt und ich kann es immer noch sehen. Ich bin nicht sicher, ob dies daran liegt, dass eine Version der Karte jetzt zwischengespeichert wird oder nicht, aber das hat bei mir funktioniert.

— PW Kad
quelle

0

Sogar ich habe mich diesem Problem gestellt !!!

Die Datei style.css hat dieses Problem verursacht.

Ich habe gerade eine neue CSS-Datei (Beispiel: style1.css) erstellt und den Inhalt der älteren CSS-Datei (alle Zeilen in style.css) in die Datei style1.css eingefügt. Es klappt

Hinweis: Vergessen Sie nicht, das Link-Tag zu aktualisieren, das die CSS-Datei lädt.

— Ganapati Prasad
quelle

0

Ich denke, Ihre CSS-Dateien sind nicht richtig geladen. Überprüfen Sie einfach die Syntax für die Referenzierung der externen Stylesheets.

Es sollte so sein

<link rel="stylesheet" type="text/css" href="mystyle.css">

Wenn Sie das rel = "Stylesheet" überspringen, kann der Browser es als einfache Datei betrachten. Um das Laden von Stylesheets zu bestätigen, wählen Sie Chrome Inspector -> Sources

Überprüfen Sie die Site-Ressourcen

Sie müssen nichts zurücksetzen. Ich hoffe es hilft :)

— Naren Yellavula
quelle

0

Ich benutze Dreamweaver und Breckets. Konnte sehen, dass das Problem nur auftrat, wenn ich Dreamweaver verwendete. Das Problem wurde durch Ändern der Einstellungen von Dreamweaver behoben

-> Codeformat -> Zeilenumbruchart -> CR LF (Windows)

— Steen Hjalmar Larsen
quelle

0

Eine andere für den Mix - unter Verwendung von CSS-Variablen, aber eine der Variablen verwies auf eine andere Variable, die nicht existierte.

Elemente, die diese fehlende Variable in der Kette verwenden, werden überhaupt nicht in Chrom angezeigt (bei meiner Site wurden alle Verweise auf h2s ausgeblendet).

Interessanterweise werden die Elemente im Entwickler-Tool-Panel von Firefox weiterhin angezeigt.

— Steve de Niese
quelle

0

Suchen Sie nach Fehlern in der CSS-Datei, in meinem Fall in den globalen CSS-Variablen. Durch Beheben der Fehler wurde das Problem behoben.

Dieses Tool kann Ihnen helfen, die Fehler zu finden: https://jigsaw.w3.org/css-validator/

— Wellington
quelle

1

Könnten Sie bitte genauer angeben, wie Sie Ihr Problem behoben haben?

— David Buck

-1

Ich denke, das kann hilfreich sein. Wenn es sich um ein eckiges Projekt handelt, dann führen Sie es einfach aus

ng dienen --extract-css.

— Badri Bashipangu
quelle