web-dev-qa-db-fra.com

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

J'ai créé des éléments DOM assez élaborés avec le pseudo-élément after: et j'aimerais pouvoir les inspecter et les ajuster 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 la trouve pas du tout dans Chrome ou Safari. Chrome a au moins des cases à cocher pour inspecter: survol,: visité et: états actifs, mais: avant et: après ne sont visibles nulle part.

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

Est-il possible d'inspecter ces pseudo-éléments?

EDIT: En plus de me tromper sur le fait que Firebug est incapable d’inspecter ces éléments, j’ai trouvé que Opera était assez bon pour inspecter: avant et: après des éléments sortis de la boîte.

cssfirefoxgoogle-chromefirebuggoogle-chrome-devtools
81
majackson

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

Sinon, vous pouvez également entrer la ligne suivante dans la console JavaScript et inspecter l'objet CSSStyleDeclaration renvoyé:

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

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

Screenshot

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

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

29
A.M.K

Chrome ne montrera pas: avant et: après les pseudo-éléments de l'arborescence DOM, s'ils manquent l'attribut "content". Il devrait être réglé, même s'il est réglé 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.

20
pop

Après beaucoup de frustration, j'ai compris que Firefox ne montrait pas les pseudo-éléments dans l'arborescence du document du tout, mais si vous sélectionnez l'élément exact qui contient le pseudo-élément (s) défini (s), les styles de son/ses pseudo-élément (s) sont affichés dans la section des règles de style à droite. Cela est vrai à la fois pour Firebug et l'inspecteur intégré ("Q"), et je suis choqué que personne ne se soit donné la peine de l'expliquer clairement auparavant.

Il est clair que la manipulation des pseudo-éléments chrome/chrome est nettement supérieure, car ils peuvent être sélectionnés (dans l’arborescence de documents et directement sur la page) et inspectés comme des éléments ordinaires, avec une mise en page, des propriétés et tout le reste, indépendamment de leur propriétaire. ".

Les versions de navigateur que j'utilise actuellement: Chrome 40.0.2214.91, Firefox 31.3.0.

5
aditsu

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

1
NoBugs