Inspecter son code

Débutant en HTML, je viens de découvrir un outil très intéressant sur les navigateurs Mozilla et Chrome (je n'ai pas testé les autres).

Lorsqu'on modifie son code ou même avant de la modifier, pour s'y retrouver entre les différents bloc imbriqués, ce n'est pas forcément facile.

Sur Mozilla ou Chrome, faire un clic droit à un endroit de la page du bloc et cliquer sur "Examiner l'élément" (Mozilla) ou "Inspecter l'élément" (Chrome).

En bas de l'écran, apparaît le code HTML (cliquer sur le bouton panneau de balisage sur Mozilla)

Bon le code, on peut le voir aussi en cliquant sur "afficher le code source"... Mais là, on peut dérouler bloc par bloc le code et visualiser directement l'emplacement sur le blog de chaque bloc en cliquant sur une ligne du code.

Exemple. Délimitation du bloc "content" sur Chrome.

idem sur Mozilla avec le bloc d'un article

Cet outil est très utile pour identifier l'imbrication des blocs puisqu'on passe facilement de l'un à l'autre, du plus grand au plus petit (en vérifiant que le bloc inclus dans un autre n'est pas plus grand). Avec en plus à droite les correspondances dans le CSS (clic sur style sur Mozilla).

Et on découvre aussi des choses cachées... Comme le code du logo over-blog qui apparaît en haut à gauche de chaque blog sur la nouvelle plateforme. En passant la sours sur le logo, 3 autres marques apparaissent : twitter, facebook et google +

Un clic droit pour inspecter l'élément nous donne le code de ce bidule.

On retrouve à quoi correspond cette sorte de barre : ob-admin-toolbar

Libre à vous de la modifier ou de la désactiver dans votre CSS.