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)
ABER ... stattdessen hat dies auf EINIGEN unserer Websites erst vor ein paar Wochen so ausgesehen ... ohne dass CSS auf der Registerkarte "Stile" angezeigt wird:
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??
Antworten:
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.
quelle
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! :) :)
quelle
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 dasscssto bauecss.quelle
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 ...
quelle
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
quelle
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 -
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.
quelle
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.
quelle
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
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 :)
quelle
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)
quelle
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.
quelle
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/
quelle
Ich denke, das kann hilfreich sein. Wenn es sich um ein eckiges Projekt handelt, dann führen Sie es einfach aus
quelle