Comment puis-je inspecter et modifier: avant et: après les pseudo-éléments dans le navigateur?


91

J'ai créé des éléments DOM assez élaborés avec un pseudo-élément: after, et j'aimerais pouvoir les inspecter et les modifier dans Chrome Inspector ou Firebug ou équivalent.

Bien que cette fonctionnalité soit mentionnée dans cet article de blog WebKit / Safari (daté de 2010), je ne trouve pas du tout cette fonctionnalité dans Chrome ou Safari. Chrome a au moins des cases à cocher pour inspecter: hover,: viewed et: active states, mais: before et: after ne sont nulle part.

De plus, ce billet de blog (daté de 2009!) Mentionne que cette fonctionnalité existe dans les outils de développement IE, mais j'utilise actuellement Mac OS, donc cela ne m'aide pas. De plus, IE n'est pas un navigateur que je cible principalement.

Existe-t-il un moyen d'inspecter ces pseudo-éléments?

EDIT: En plus de me tromper sur l'incapacité de Firebug à inspecter ces éléments, j'ai trouvé qu'Opera était assez bon pour inspecter: avant et: après les éléments hors de la boîte.


1
avec firebug, vous pouvez inspecter le style de ces pseudo-éléments.
Fabrizio Calderan

@ F.Calderan comment? Est-ce que cela met à jour la page si je les modifie?
majackson

oui, je suis capable de modifier les propriétés des pseudo-éléments via firebug 1.9.1 sur Fx11 / MacOS
Fabrizio Calderan

Ah oui, je le vois aussi. Toutes mes excuses, je confondais les nouveaux outils de développement intégrés de Firefox (que je n'avais pas utilisés auparavant) pour une sorte de refonte de Firebug avec inexplicablement moins de fonctionnalités. Je
reste

Cochez cette réponse à pseudoelements de test en chrome et FireFox stackoverflow.com/a/20716179/1868660
Subodh Ghulaxe

Réponses:


61

Dans les outils de développement de Chrome , les styles d'un pseudo-élément sont visibles dans le panneau:

Sinon, vous pouvez également saisir la ligne suivante dans la console JavaScript et inspecter l' CSSStyleDeclarationobjet retourné :

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

9
Je ne vois pas ça. Quel élément inspectez-vous pour le voir apparaître dans le panneau? De plus, quelle version de Chrome utilisez-vous?
majackson

@majackson Chrome 18.0 Ubuntu 11.10. Inspectez le xdans cette démo: jsfiddle.net/2M6JA
Rob W

Je vois les pseudoclasses dans votre démo, mais pas dans mon code, ce qui me fait penser que j'ai un autre problème différent. Dans tous les cas, il est évident que vous avez raison, je vais donc marquer cela comme résolu - merci beaucoup!
majackson

Il semble que les pseudo styles ne peuvent pas être inspectés dans certains cas. Regardez ce fork de @Rob W fiddle: jsfiddle.net/RQsY6 => le pseudo-élément sur la balise a ne peut pas être inspecté.
Fabien Quatravaux

1
@FabienQuatravaux Au moins dans Chrome 23, je vois div::beforeavec content: 'x';- capture d'écran: i.stack.imgur.com/nQ2TZ.png . EDIT: Nos violons ne diffèrent pas du tout. Vouliez-vous remplacer divpar a? Pourtant, le pseudo-élément peut toujours être inspecté: jsfiddle.net/RQsY6/1 (il suffit de sélectionner la balise d'ancrage dans l'arborescence DOM).
Rob W

31

À partir de Chrome, les pseudo éléments 31 s'affichent dans le panneau des éléments en tant qu'éléments enfants de leur parent, comme illustré dans l'image suivante:

Capture d'écran

Vous pouvez les sélectionner comme vous le feriez pour un élément normal, mais si vous supprimez le contentstyle, le pseudo-élément sera également supprimé et le focus devtools deviendra son parent.

Il semble que les styles CSS hérités ne soient pas visibles et vous ne pouvez pas modifier le contenu CSS à partir du panneau des éléments.


1
DUH !! Merci :)
R Claven

22

Chrome n'affichera pas: avant et: après les pseudo éléments dans l'arborescence DOM, s'ils manquent l'attribut "content". Il doit être défini, même s'il est défini sur rien.

Cela n'apparaîtra pas:

:after {
  background-color: red;
}

Cela apparaîtra dans l'inspecteur:

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

J'espère que ça aide.


5

Après beaucoup de frustration, je me suis dit que Firefox ne montre pas les éléments pseudo dans l'arborescence des documents du tout , mais si vous sélectionnez l' exacte élément qui a élément pseudo (s) défini, puis les styles pour son élément pseudo (s ) sont affichés dans la section des règles de style sur le côté droit. Ceci est vrai à la fois pour Firebug et pour l'inspection intégrée ("Q"), et je suis choqué que personne ne se soit donné la peine de l'expliquer clairement avant.

De toute évidence, la gestion des pseudo éléments par chrome / chrome est nettement supérieure, car ils peuvent être sélectionnés (à la fois dans l'arborescence du document et directement sur la page) et inspectés comme des éléments normaux, avec mise en page, propriétés et tout le reste, indépendamment de leur "propriétaire ".

Versions de navigateur que j'utilise actuellement: Chromium 40.0.2214.91, Firefox 31.3.0.


1

Firefox a cette fonctionnalité depuis un certain temps maintenant, il suffit de cliquer avec le bouton droit de la souris, "inspecter l'élément" et de voir les éléments avant et après dans le panneau de droite de l'inspecteur.


1
Je ne vois pas les :afteret :beforeéléments pseudo dans l'outil inspecteur « natif » - les éléments de basculer pseudo me donne hover, activeet focusseulement. Je peux cependant les voir dans Firebug.
sameers

@sameers Parlez-vous des bascules du menu contextuel? Parce que: before et: after ne sont pas quelque chose que vous basculez ici, ils devraient toujours apparaître dans l'inspecteur css.
NoBugs

0

Sélectionnez l'élément -> sélectionnez le survol vérifié ---> vous pouvez voir :: les éléments avant et après Sélectionnez l'élément -> sélectionnez le survol vérifié ---> vous pouvez voir :: les éléments avant et après


0

Au moins depuis Chrome 62, il existe un paramètre dans DevTools pour `` Afficher le DOM de l'ombre de l'agent utilisateur '' qui affiche des pseudo-éléments supplémentaires tels que des espaces réservés d'entrée , qui n'apparaîtraient pas dans l'arborescence DOM autrement.

Plus d'informations: https://stackoverflow.com/a/26853319/3963594

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.