"Nur angewandte Stile anzeigen" im Firefox Web Developer Tool?

398
asprin

Ich war schon lange ein Firebug-Benutzer. Mein Firefox wurde kürzlich auf 51 aktualisiert und ich bekam bald Probleme mit Firebug.

Als ich die Firebug-Seite besuchte, stellte ich fest, dass sie nicht mehr entwickelt wird und für mich ein Schock war.

Um weiterzumachen, entschied ich mich für das Web Developer Tool (WDT), das in Firefox integriert ist. Aber es scheint etwas zu fehlen.

Wenn ich im Firebug-Inspector ein Element auf der Seite auswähle, wird eine Option verwendet, die als "Nur angewendete Stile anzeigen" oder ähnliches bezeichnet wird. Dies 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 haben?

Feuerfuchs

4
Wie wäre es mit der Registerkarte Berechnet? Hex vor 7 Jahren 0
Das listet alle Regeln für ein Element auf. Ich würde es lieber sehen, wenn es auf Regeln basiert, die im Stylesheet definiert sind. asprin vor 7 Jahren 0

2 Antworten auf die Frage

2
Hex

Eine solche Option existiert nicht. Sie können jedoch die Registerkarte Berechnet verwenden, um nur die angewendeten Stile anzuzeigen.

Dazu müssen Sie die display: noneStandardstile der Firefox Developer Tools irgendwie bearbeiten oder überschreiben (z. B. um ):

In der Datei /devtools/client/themes/rules.css befindet sich (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 Artikel kann auch hilfreich sein.

2
Sebastian Zartner

Die Firefox DevTools bieten diese Funktion derzeit nicht an (ab Firefox 51.0.1). Deshalb habe ich einen Fehlerbericht erstellt, der danach fragt .

Außerdem habe ich dem Migrationshandbuch für Firebug-Benutzer eine Notiz hinzugefügt .

Verwandte Probleme