☰

„Nur angewendete Stile anzeigen“ im Firefox Web Developer Tool?

tag-icon • tag-icon firefox firefox-extensions firebug
„Nur angewendete Stile anzeigen“ im Firefox Web Developer Tool?

Ich bin schon lange Firebug-Benutzer. Mein Firefox wurde erst kürzlich auf Version 51 aktualisiert und schon bald hatte ich Probleme mit Firebug.

Als ich die Firebug-Seite besuchte, stellte ich fest, dass sie nicht mehr weiterentwickelt wird, was mich schockierte.

Um weiterzukommen, habe ich beschlossen, das in Firefox integrierte Web Developer Tool (WDT) zu verwenden. Aber darin scheint eine Sache zu fehlen.

Wenn ich im Firebug-Inspektor ein Element auf der Seite auswähle, gibt es früher eine Option namens „Nur angewendete Stile anzeigen“ oder etwas Ähnliches. Diese scheint im WDT zu fehlen und es ist hässlich, alle durchgestrichenen CSS-Stile im Bedienfeld zu sehen.

Gibt es eine Möglichkeit, diese Funktion in WDT zu integrieren?

Feuerfuchs

Antwort1

Die Firefox DevTools bieten diese Funktion derzeit nicht an (Stand Firefox 51.0.1). Daher habe ich einFehlerbericht mit der Bitte darum.

Außerdem habe icheine Anmerkung zum Migrationshandbuch für Firebug-Benutzer hinzugefügt.

Antwort2

Eine solche Option gibt es nicht. Sie können jedochBerechnet, um nur die angewendeten Stile anzuzeigen.

Dazu müssen Sie display: nonedie Standardstile der Firefox Developer Tools irgendwie bearbeiten oder überschreiben (z. B. in ):

Im Ordner/devtools/client/themes/rules.csses gibt (Zeile 423):

.ruleview-overridden {
  text-decoration: line-through;
}

Zeile 268:

.theme-firebug .ruleview-overridden .ruleview-propertyname,
.theme-firebug .ruleview-overridden .ruleview-propertyvalue {
  text-decoration: line-through;
}

Dieser Artikelkann auch hilfreich sein.

Antwort3

Wenn du musstspeichernnur die angewendeten Stile, dies kann in Chrome mit Chrome Developer Tools erfolgen (Tutorial hier). Wenn Sie jedoch eine Firefox-Lösung wünschen, können Sie die Seite als einzelne HTML-Datei speichern und dann nur das CSS aus dieser Datei verwenden.

Holen Sie sich dazu zunächst die Firefox-Version des Add-onsEinzelne Datei

Nach der Installation von SingleFile können Sie die Seite als HTML-Datei herunterladen und das CSS innerhalb des <style>Tags kopieren.

Es wird minimiert, daher möchten Sie es wahrscheinlich mit einem Tool wieUnminify.com

Wer dies versucht, sollte sich darüber im Klaren sein, dass ein Stil, nur weil er nichtangewandt, bedeutet nicht unbedingt, dass es „unbenutzt“ ist. Es könnte irgendwo ein Skript geben, das versucht, einem Element einen bestimmten Stil anzuhängen, aber wenn es zum Zeitpunkt der Erfassung nicht angewendet wird, wird SingleFile (oder Chrome Dev Tools) es nicht einbinden. Vorbehalte wie diese … Aber um bestimmte Teile von Webseiten zu isolieren und ihre Regelsätze abzurufen, kann dieser Ansatz nützlich sein.

verwandte Informationen