Wie kann ich Folgendes überprüfen und optimieren: vor und nach Pseudoelementen im Browser?

90

Ich habe einige ziemlich ausgefeilte DOM-Elemente mit einem: after-Pseudoelement erstellt und möchte sie entweder in Chrome Inspector oder Firebug oder einem gleichwertigen Element überprüfen und optimieren können.

Obwohl diese Funktion in diesem WebKit / Safari-Blogbeitrag (vom 2010) erwähnt wird, kann ich diese Funktion weder in Chrome noch in Safari finden. Chrome verfügt zumindest über Kontrollkästchen, die überprüft werden müssen: Schwebeflug ,: Besuchte und: Aktive Zustände, aber: Vorher und: Nachher sind nirgends zu sehen.

Darüber hinaus wird in diesem Blog-Beitrag (vom 2009!) Erwähnt, dass diese Funktion in den IE-Entwicklertools vorhanden ist, ich jedoch derzeit Mac OS verwende. Dies ist also keine Hilfe für mich. Außerdem ist IE kein Browser, auf den ich hauptsächlich abziele.

Gibt es eine Möglichkeit, diese Pseudoelemente zu untersuchen?

BEARBEITEN: Zusätzlich dazu, dass Firebug nicht in der Lage ist, diese Elemente zu überprüfen, habe ich festgestellt, dass Opera ziemlich gut darin ist, Elemente vor und nach dem Auspacken zu überprüfen.

— Majackson
quelle

1

Mit Firebug können Sie den Stil dieser Pseudoelemente überprüfen .

— Fabrizio Calderan

@ F.Calderan wie? Aktualisiert es die Seite, wenn ich sie ändere?

— Majackson

Ja, ich kann Eigenschaften für Pseudoelemente über Firebug 1.9.1 auf Fx11 / MacOS ändern

— Fabrizio Calderan

Ah ja, ich sehe es auch. Entschuldigung, ich habe Firefoxes neue, eingebaute Entwicklertools (die ich vorher nicht verwendet habe) mit einer Art Firebug-Neugestaltung mit unerklärlich weniger Funktionen verwechselt. Ich stehe korrigiert;)

— Majackson

Überprüfen Sie diese Antwort, um Pseudoelemente in Chrom und Firefox zu testen. Stackoverflow.com/a/20716179/1868660

— Subodh Ghulaxe

60

In den Dev-Tools von Chrome werden die Stile eines Pseudoelements im Bedienfeld angezeigt:

Andernfalls können Sie auch die folgende Zeile in die JavaScript-Konsole eingeben und das zurückgegebene CSSStyleDeclarationObjekt überprüfen :

getComputedStyle(document.querySelector('html > body'), ':before');

— Rob W.
quelle

9

Ich sehe das nicht Welches Element überprüfen Sie, um dies im Bedienfeld anzuzeigen? Welche Chrome-Version verwenden Sie?

— Majackson

@majackson Chrome 18.0 Ubuntu 11.10. Überprüfen Sie die xin dieser Demo: jsfiddle.net/2M6JA

— Rob W

Ich sehe die Pseudoklassen in Ihrer Demo, aber nicht in meinem Code, was mich vermuten lässt, dass ich ein anderes, anderes Problem habe. Auf jeden Fall ist es offensichtlich, dass Sie Recht haben, also werde ich dies als gelöst markieren - vielen Dank!

— Majackson

In einigen Fällen können Pseudo-Stile nicht überprüft werden. Schauen Sie sich diese Abzweigung von @Rob W fiddle an: jsfiddle.net/RQsY6 => Das Pseudoelement auf dem a-Tag kann nicht überprüft werden.

— Fabien Quatravaux

1

@FabienQuatravaux Zumindest in Chrome 23 sehe ich div::beforemit content: 'x';- Screenshot: i.stack.imgur.com/nQ2TZ.png . EDIT: Unsere Geigen unterscheiden sich überhaupt nicht. Wollen Sie ersetzen divmit a? Das Pseudoelement kann weiterhin überprüft werden: jsfiddle.net/RQsY6/1 (wählen Sie einfach das Ankertag im DOM-Baum aus).

— Rob W

31

Ab Chrome 31 werden Pseudoelemente im Elementfenster als untergeordnete Elemente ihres übergeordneten Elements angezeigt, wie in der folgenden Abbildung dargestellt:

Bildschirmfoto

Sie können sie wie ein normales Element auswählen. Wenn Sie jedoch den contentStil entfernen, wird auch das Pseudoelement entfernt und der Fokus von devtools wird auf das übergeordnete Element geändert.

Es scheint, dass geerbte CSS-Stile nicht angezeigt werden können und Sie CSS-Inhalte nicht im Elementfenster bearbeiten können.

— AMK
quelle

1

DUH !! Vielen Dank :)

— R Claven

22

Chrome zeigt nicht: vor und: nach Pseudoelementen im DOM-Baum, wenn sie das Attribut "content" vermissen. Es sollte gesetzt sein, auch wenn es auf nichts gesetzt ist.

Dies wird nicht angezeigt:

:after {
  background-color: red;
}

Dies wird im Inspektor angezeigt:

:after {
  content: "";   
  background-color: red;    
}

Ich hoffe es hilft.

— Pop
quelle

5

Nach vieler Frustration, habe ich herausgefunden, dass Firefox nicht die Pseudo-Elemente im Dokumentbaum nicht zeigen überhaupt , aber wenn Sie das wählen genaues Element , das Pseudo-Element (e) definierte, dann die Stile für sein Pseudo-Element (e ) werden im Abschnitt Stilregeln auf der rechten Seite angezeigt. Dies gilt sowohl für den Firebug als auch für die eingebaute Inspektion ("Q"), und ich bin schockiert, dass sich niemand die Mühe gemacht hat, dies zuvor klar zu erklären.

Die Handhabung von Pseudoelementen durch Chrom / Chrom ist eindeutig überlegen, da sie (sowohl im Dokumentbaum als auch direkt auf der Seite) ausgewählt und wie normale Elemente überprüft werden können, mit Layout, Eigenschaften und allem anderen, unabhängig von ihrem "Eigentümer" ".

Derzeit verwendete Browserversionen: Chromium 40.0.2214.91, Firefox 31.3.0.

— Aditsu beenden, weil SE böse ist
quelle

1

Firefox hat diese Funktion bereits seit einiger Zeit. Klicken Sie einfach mit der rechten Maustaste auf "Element überprüfen" und sehen Sie die Vorher- und Nachher-Elemente im rechten Bereich des Inspektors.

— NoBugs
quelle

1

Ich habe nicht die sehen :afterund :beforePseudoelemente im „native“ Inspektor - Tool - die Elemente Pseudo Makel gibt mir hover, activeund focusnur. Ich kann sie allerdings in Firebug sehen.

— Sameers

@sameers Sprechen Sie über die Schaltflächen im Kontextmenü? Weil: vorher und: nachher dort nicht umgeschaltet werden, sollten sie immer im CSS-Inspektor angezeigt werden.

— NoBugs

0

Element auswählen -> Schwebeflug aktiviert auswählen ---> Sie können :: vor und nach Elementen sehen

— Vasu
quelle