Overblog Suivre ce blog
Editer l'article Administration Créer mon blog

Inspecter son code

- Auteur : Si tu suis mon regard

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)

agrandir l'image en cliquant dessus

agrandir l'image en cliquant dessus

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.

agrandir l'image en cliquant dessus

agrandir l'image en cliquant dessus

idem sur Mozilla avec le bloc d'un article

agrandir l'image en cliquant dessus

agrandir l'image en cliquant dessus

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.

Les commentaires...

comments powered by Disqus

Commentaires anciens formats...

Iv-oam 03/09/2012 18:31

@ Bruno
J'ai regardé ce que faisait Internet Explorer mais c'est comme d'habitude avec IE beaucoup moins pratique. Je vais tester l'add-on

@Alice
Oui, enfin ! (La solution est d'ailleurs à la fin de l'article)

Alice 03/09/2012 21:40

Merci de nous avoir communiqué cette belle trouvaille !

Alice 03/09/2012 17:58

Je l'avais découvert aussi mais je dois avouer que jusqu'à présent je ne l'ai pas "utilisé".
Je vais aller voir la barre dont tu parles ! ;-)
Es-tu parvenu à enlever twitter, facebook et google+ qui te dérangeaient ?

Bruno admin créateur de ce blog 03/09/2012 13:06

Merci, pour la contribution, je pensais justement rédiger un billet sur ce sujet... Personnellement, j'utilise pour chrome et firefox cet add-on pour le navigateur, plus complet :
http://chrispederick.com/work/web-developer/firefox/

Les 10 derniers Billets

Related Posts Plugin for WordPress, Blogger...