Firefox dev tools + Chris Pederick web-developer tools ¶

Chris Pederick web-developer tools (Display Element information) ¶

Use of the Chris Pederick web-developer tools , especially the Display Element Information which give important informations :) like the element path.

../../../_images/display_element_informations.png

../../../_images/tr_td_div_a_element_informations.png

Firefox dev tools ¶

Right Click + inspecter
inspecter + Copier + Le chemin CSS

../../../_images/outils_dev_copier_menu.png

           html.gpkqksll.idc0_343 body div#conteneur.container div.table-responsive table#id_list_table.table.table-hover.table-bordered.table-condensed tbody tr td div.couleur_conge a

          

Debugging CSS par Mozilla MDN ¶

https://developer.mozilla.org/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS

Parfois, quand vous écrirez du CSS, vous rencontrerez un problème où votre CSS semblera ne pas se comporter comme vous vous y attendrez.

Peut-être que vous croirez qu’un certain sélecteur devrait être lié à un élément, mais rien ne se passe, ou une box aura une taille différente de ce que vous espérerez.

Cet article vous donnera une ligne directrice pour débeuguer un problème CSS, et vous montrera comment les DevTools (outils de développeur) inclus dans tous les navigateurs modernes peuvent vous aider à comprendre ce qui se passe.