85
möchten, welche CSS-Stile wissen, zur Zeit auf einer Webseite verwendet wird.Gibt es eine Möglichkeit, die CSS-Stile zu überprüfen verwendet wird oder nicht auf einer Webseite verwendet?
A
Antwort
53
Installieren Sie die CSS Usage add-on für Firebug und es auf dieser Seite laufen. Es wird Ihnen sagen, welche Stile verwendet und nicht von dieser Seite verwendet werden.
+0
@Harry, sobald Sie dieses Plugin installieren wird es in der Registerkarte als Teil von Firebug, wo Sie net und alle haben //// lassen Sie mich wissen, wenn Sie noch etwas brauchen – kobe
+27
Gibt es so etwas in Chrome? –
+2
Dies scheint nicht mehr zu funktionieren und wird leider nicht mehr unterstützt. – nostromo
39
Nur der Vollständigkeit halber, und weil es in den Kommentaren gefragt wurde - es gibt auch die CSS-Audit-Tool in Chrome jetzt für den gleichen Zweck. Einige Details hier:
+3
Ich bin mir nicht sicher, ob das "CSS-Audit-Tool", auf das sich diese Antwort bezieht, mit dem Tab "Audits" in den Chrome-Entwicklertools identisch ist, aber Sie erfahren, welche CSS-Regeln nicht verwendet werden (z. B. "Some.css : 42% wird von der aktuellen Seite nicht verwendet. "). –
9
Ich verwende CSS Dig. Es ist für Chrom gemacht, aber ich denke, es ist ein großartiges Werkzeug!
40
Google Chrome verfügt über eine zwei Möglichkeiten für nicht verwendete CSS zu überprüfen.
1. Audit Tab:> Rechtsklick + Inspect Element auf der Seite finden Sie die "Audit" Registerkarte und die Prüfung ausgeführt werden, um sicherzustellen, "Web-Seite Performance" geprüft wird.
Listet alle nicht verwendeten CSS-Tags - siehe Bild unten.
Update: - - - - - - - - - - - - - - ODER - - - - - - - - - - - - - -
2. Coverage Tab:> Rechtsklick + Inspire Element auf der Seite, finden Sie die drei Punkte ganz rechts (eingekreist im Bild) und öffnen Sie die Konsole Schublade (oder drücken Sie Esc), schließlich klicken Sie auf die drei Punkte links in der Schublade (im Bild eingekreist), um Coverage-Tool zu öffnen.
Chrome startete ein Werkzeug nicht verwendete CSS und JS zu sehen - Chrome 59 Update können Ihnen eine Aufnahme (rotes Quadrat in Bild) starten und stoppen bessere Abdeckung einer Benutzererfahrung auf der Seite zu ermöglichen.
Zeigt alle verwendeten und nicht verwendeten CSS/JS in den Dateien - siehe Bild unten.
+1
Wäre toll zu sehen, welche auch verwendet werden .... aber das ist toll, danke. –
+0
Soweit ich weiß, wenn Sie wissen wollen, was verwendet wird, ist es am besten, ein Plugin für Chrome zu installieren - sorry – Cordell
+0
Das neue Chrome 59 Update ermöglicht es Ihnen, die verwendete/unbenutzte CSS und JS – Cordell
5
einen Blick auf UnCSS nehmen. Es hilft beim Erstellen einer CSS-Datei von verwendetem CSS.
Verwandte Themen
- 1. .Net: Gibt es eine bessere Möglichkeit, die Objekteigenschaft auf null oder eine leere Zeichenfolge zu überprüfen?
- 2. Gibt es eine gute Möglichkeit, die GUI zu abstrahieren, damit SWT oder Swing verwendet werden kann?
- 3. Gibt es eine Möglichkeit, die Zeit zu bestimmen, die ein Client auf einer Webseite verbringt
- 4. Gibt es eine Möglichkeit zu überprüfen, welche Art von Authentifizierung eine Website verwendet?
- 5. Gibt es eine Möglichkeit zu überprüfen, ob ein DOM-Element dynamisch erstellt wird oder nicht?
- 6. Gibt es eine Transformations-Engine oder -Bibliothek, die .NET verwendet?
- 7. Wie BeautifulSoup verwendet wird, um eine Webseite URL zu scratzen
- 8. Gibt es eine Möglichkeit, herauszufinden, welcher Code eine Assembly verwendet?
- 9. Gibt es eine Möglichkeit, eine neue Zeile zu drucken, wenn <Message...> verwendet wird?
- 10. Gibt es eine Möglichkeit zu sehen, wie viel CPU-Nutzung pro Prozessorkern verwendet wird?
- 11. Gibt es eine schnellere Möglichkeit zu überprüfen, ob eine externe Webseite existiert?
- 12. Gibt es eine Möglichkeit herauszufinden, ob eine Anwendung Core Animation oder OpenGL ES verwendet?
- 13. Gibt es eine Möglichkeit, fehlende Daten in Graphit zu füllen, wenn statsD verwendet wird?
- 14. Gibt es eine Möglichkeit, die Ränder um alle div-Tags auf einer Webseite zu sehen?
- 15. Gibt es eine Möglichkeit, die Variablen, die in einem RegEx.Replace verwendet wurden, in .NET zu verwenden?
- 16. Gibt es eine Möglichkeit, die Variablen, die in einem RegEx.Replace verwendet wurden, in .NET zu verwenden?
- 17. Gibt es eine Möglichkeit, die Menge an Speicher zu begrenzen, die "git gc" verwendet?
- 18. Cookie wird nicht gespeichert oder verwendet
- 19. Gibt es eine Möglichkeit zu überprüfen, ob es symbolische Links gibt, die auf ein Verzeichnis verweisen?
- 20. Gibt es eine Möglichkeit, die Erstellung von .json-Dateien, die für Sprachübersetzungen verwendet werden, zu automatisieren?
- 21. Gibt es eine Möglichkeit, IEnumerable zu speichern oder zu speichern?
- 22. Gibt es eine Möglichkeit, Trennzeichen zu behalten, während php explode oder andere ähnliche Funktionen verwendet werden?
- 23. Was wird "neu" verwendet, wenn eine Laufzeitbibliothek nicht verwendet wird?
- 24. Gibt es eine Möglichkeit zu steuern, welche implizite Konvertierung standardmäßig verwendet wird?
- 25. Gibt es eine Möglichkeit, einen Stacktrace auszulösen, wenn ein bestimmter Logger verwendet wird?
- 26. Gibt es eine Möglichkeit zu wissen, welche groovige Version in Grails Projekt verwendet wird?
- 27. Gibt es eine Möglichkeit, 3G-Verbindung unter Linux zu überprüfen?
- 28. Gibt es eine Möglichkeit, einen XPath von einem bekannten Wert auf einer Webseite zu berechnen?
- 29. Gibt es eine Möglichkeit, ein Befehlszeilentool zu verwenden, um die JavaScript-interpretierte Quelle einer Webseite anzuzeigen?
- 30. Gibt es eine Möglichkeit festzustellen, ob Ihre App verwendet wird, während der Benutzer telefoniert?
einen Browser verwenden, einen CSS-Inspektoren hat. Safari und Chrome (aka Webkit) bieten diese als Teil der Entwickler-Tools. In Firefox wird dies vom Firebug-Plugin bereitgestellt. Internet Explorer hat nichts, was mir bekannt ist. Mit dem Inspector können Sie ein Element auswählen, mit der rechten Maustaste klicken und "Element prüfen" auswählen. Dann wird Ihnen angezeigt, welche Selektoren und welche individuellen Regeln auf das ausgewählte Element angewendet wurden. – Lee
@Lee ie8 Entwickler-Symbolleiste verhält sich genauso wie Firebug in CSS-Selektoren, Sie können auswählen und sehen die Stile auf der rechten Seite angewendet. – kobe
mögliches Duplikat von [Nur die auf einer bestimmten Seite verwendeten CSS extrahieren] (http: // stackoverflow.com/questions/4867005/extracting-only-die-css-used-in-a-specific-page) – cweiske