Come posso ispezionare e modificare: prima e: dopo gli pseudo-elementi nel browser?

91

Ho creato alcuni elementi DOM abbastanza elaborati con uno pseudo-elemento: after, e mi piacerebbe essere in grado di ispezionarli e modificarli in Chrome Inspector o Firebug o equivalenti.

Nonostante questa funzione sia menzionata in questo post del blog WebKit / Safari (datato 2010), non riesco a trovarla affatto in Chrome o Safari. Chrome ha almeno caselle di controllo per ispezionare: hover,: visitato e: stati attivi, ma: prima e: dopo non si vedono da nessuna parte.

Inoltre, questo post del blog (datato 2009!) Menziona che questa funzionalità esiste negli strumenti di sviluppo di IE, ma attualmente sto utilizzando Mac OS, quindi questo non mi aiuta. Inoltre, IE non è un browser a cui mi rivolgo principalmente.

C'è un modo per ispezionare questi pseudo-elementi?

EDIT: Oltre a sbagliare sul fatto che Firebug non sia in grado di ispezionare questi elementi, ho trovato Opera abbastanza bravo a Ispezionare: prima e: dopo gli elementi fuori dagli schemi.

— majackson
fonte

1

con firebug puoi ispezionare lo stile di quegli pseudoelementi.

— Fabrizio Calderan

@ F.Calderan come? Aggiorna la pagina se li modifico?

— Majackson

si, posso modificare le proprietà per gli pseudoelementi tramite firebug 1.9.1 su Fx11 / MacOS

— Fabrizio Calderan

Ah sì, lo vedo anche io. Mi scuso, stavo scambiando i nuovi strumenti di sviluppo integrati di Firefox (che non avevo mai usato prima) per una sorta di riprogettazione di Firebug con caratteristiche inspiegabilmente inferiori. Sono corretto;)

— Majackson

Controllare questa risposta a pseudoelements test in Chrome e Firefox stackoverflow.com/a/20716179/1868660

— Subodh Ghulaxe

61

Negli strumenti di sviluppo di Chrome , gli stili di uno pseudoelemento sono visibili nel pannello:

Altrimenti, puoi anche inserire la seguente riga nella console JavaScript e ispezionare l' CSSStyleDeclarationoggetto restituito :

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

— Rob W
fonte

9

Non lo vedo. Quale elemento stai ispezionando per vederlo apparire nel pannello? Inoltre, quale versione di Chrome stai utilizzando?

— Majackson

@majackson Chrome 18.0 Ubuntu 11.10. Ispeziona xin questa demo: jsfiddle.net/2M6JA

— Rob W

Vedo le pseudoclassi nella tua demo, ma non nel mio codice, il che mi fa sospettare di avere un altro problema diverso. In ogni caso, è ovvio che tu abbia ragione, quindi lo contrassegno come risolto - molte grazie!

— Majackson

Sembra che: gli pseudo stili non possano essere ispezionati in alcuni casi. Dai un'occhiata a questo fork di @Rob W fiddle: jsfiddle.net/RQsY6 => lo pseudo-elemento sul tag a non può essere ispezionato.

— Fabien Quatravaux

1

@FabienQuatravaux Almeno in Chrome 23, vedo div::beforecon content: 'x';- screenshot: i.stack.imgur.com/nQ2TZ.png . EDIT: I nostri violini non differiscono affatto. Volevi sostituire divcon a? Tuttavia, lo pseudo-elemento può ancora essere ispezionato: jsfiddle.net/RQsY6/1 (basta selezionare il tag di ancoraggio nell'albero DOM).

— Rob W

31

A partire da Chrome 31 pseudo elementi vengono visualizzati nel pannello degli elementi come elementi secondari del loro genitore, come mostrato nell'immagine seguente:

Immagine dello schermo

Puoi selezionarli come faresti con un elemento normale, ma se rimuovi lo contentstile, anche lo pseudo elemento verrà rimosso e il focus di devtools cambierà nel suo genitore.

Sembra che gli stili CSS ereditati non siano visualizzabili e non sia possibile modificare il contenuto CSS dal pannello degli elementi.

— AMK
fonte

1

DUH !! Grazie :)

— R Claven

22

Chrome non mostrerà: prima e: dopo gli pseudo elementi nell'albero DOM, se mancano l'attributo "content". Dovrebbe essere impostato, anche se non è impostato su nulla.

Questo non verrà visualizzato:

:after {
  background-color: red;
}

Questo verrà visualizzato nell'ispettore:

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

Spero che sia d'aiuto.

— pop
fonte

5

Dopo un sacco di frustrazione, ho capito che Firefox non mostra gli elementi pseudo nell'albero del documento a tutti , ma se si seleziona l' esatto elemento che ha elemento pseudo (s) definito, poi gli stili per il suo elemento pseudo (s ) sono mostrati nella sezione delle regole di stile sul lato destro. Questo è vero sia per Firebug che per l'ispezione incorporata ("Q"), e sono scioccato dal fatto che nessuno si sia preso la briga di spiegarlo chiaramente prima.

Chiaramente, la gestione di chrome / chromium degli pseudo elementi è di gran lunga superiore, in quanto possono essere selezionati (sia nell'albero del documento che direttamente sulla pagina) e ispezionati proprio come gli elementi normali, con layout, proprietà e tutto il resto, indipendentemente dal loro "proprietario ".

Versioni del browser che sto utilizzando attualmente: Chromium 40.0.2214.91, Firefox 31.3.0.

— aditsu esci perché SE è MALE
fonte

1

Firefox ha questa funzione da un po 'di tempo, basta fare clic con il pulsante destro del mouse, "ispeziona elemento" e vedere gli elementi prima e dopo nel pannello di destra dell'ispettore.

— NoBugs
fonte

1

Non vedo le :aftere :beforepseudo elementi nello strumento di ispezione "nativo" - alternare gli elementi pseudo mi dà hover, activee focussolo. Però posso vederli in Firebug.

— stesso

@sameers Stai parlando degli interruttori nel menu di scelta rapida? Perché: prima e: dopo non sono qualcosa che puoi commutare lì, dovrebbero sempre essere visualizzati nell'ispettore CSS.

— NoBugs

0

Seleziona elemento -> seleziona hover controllato ---> puoi vedere :: prima e dopo gli elementi

— vasu
fonte

0

Almeno da Chrome 62 esiste un'impostazione in DevTools su "Mostra DOM shadow dell'agente utente" che visualizza pseudo-elementi aggiuntivi come segnaposto di input , che altrimenti non sarebbero visualizzati nell'albero DOM.

Maggiori informazioni: https://stackoverflow.com/a/26853319/3963594

— jgangso
fonte