[Débutant] L’inspecteur de code sous Chrome

Si comme moi vous débutez dans le développement web, vous êtes sans doute étranger à ce puissant outil qu’est l’inspecteur de code. Vous êtes peut être, au gré de vos pérégrinations sur le web, tombé par hasard dessus et de prime abord cet outil semble tellement complexe que vous renoncez à en déchiffrer le contenu. Pourtant, une fois la prise en main faite, l’inspecteur de code devient indispensable pour permettre de développer sereinement un site web qualitatif pour l’utilisateur. Alors aujourd’hui je vais aborder avec vous l’utilisation de l’inspecteur de code HTML ainsi que CSS sous l’un des navigateurs les plus utilisés, à savoir Google Chrome. Je n’évoquerais toutefois que cette partie, bien que l’inspecteur est un outil bien plus complet, je ne ferais référence qu’aux éléments utiles pour vous aider dans vos développements HTML/CSS. Pour ce faire plusieurs méthodes sont à votre disposition : Sous Chrome :

• Un simple clic droit suivi de « Inspecter » sur la page que vous souhaitez inspecter.
• Utiliser le raccourci Ctrl + Maj + I

Cet inspecteur comporte 4 éléments qui, une fois maîtrisé, deviennent indispensable au développement de votre site pour le rendre compliant face aux demandes des utilisateurs mais également pour corriger tout les problèmes qui peuvent être rencontrés pendant et après l’élaboration de votre page.

Le code HTML

L’avantage majeur de l’inspecteur est sa partie HTML. En effet, grâce à cet élément il est possible de réaliser des essais divers sur le code qui sont pris automatiquement en compte sur la page sur laquelle vous vous trouvez. Pas d’inquiétudes toutefois, si vous êtes amenés à faire une erreur par le biais de ce component, aucun changement n’est effectué dans votre code, il ne s’agit là que d’une prévisualisation des données que vous ajoutez ou supprimez.

  Pour changer un élément, il suffit de double-cliquer dessus afin de pouvoir apporter une modification : De manière plus poussée, un clic droit apporte diverses options :

Ajouter un attribut

Le code CSS

Comme l’un est rarement dissocié de l’autre, l’inspecteur permet également d’apporter des modifications sur le fichier CSS de votre page. En effet tout les attributs qui sont traduits et exprimés par votre navigateur figureront dans la boîte prévue à cet effet.     Vous retrouvez dans ce panel l’intégralité des éléments CSS qui influencent directement la ligne HTML que vous avez sélectionné préalablement. Les changements que vous apportez ici vont, comme pour l’exemple précédent, être apportés sur la page que vous observez sans compromettre votre propre code. Un vrai bac à sable pour s’adonner aux différents essais que vous souhaitez réaliser.

Deux autres options que vous trouverez intéressantes dans cette boîte est la barre Filter qui permet de chercher un élément en particulier qui sera affiché en surbrillance. A côté de cette barre vous retrouvez le bouton :hov qui permet de forcer l’état de l’élément sélectionné :

Dans cet exemple, on retrouve et active l’élément height et on applique un :focus sur la div sélectionnée (PS : On remarque le point jaune qui s’affiche dans la boîte HTML lors de l’application du :focus.)

Le contenu de la boite d’un élément

Si vous commencez à vous familiariser avec l’inspecteur de code, vous ne serez sans doute pas passez à côté des nombreux rectangles ancrés à droite de la boite CSS. Il s’agit là d’une visualisation des dimensions d’un contenu et de ce qui l’entoure.

La sélection d’élément et la responsivité (Web Mobile)

Enfin le dernier outil et non des moindres se situe en haut de l’inspecteur. Grâce à un simple clic, vous pouvez modifier les dimensions de votre navigateur afin de l’adapter à un écran de mobile ou de tablette et ainsi peaufiner votre page afin de la rendre lisible et adaptée à tout les formats et utilisateurs. Vous retrouvez d’ailleurs à gauche de cette option l’outil de sélection d’un élément qui permet de choisir un contenu à afficher dans la boite HTML et CSS. Fini la recherche inlassable pour retrouver une ligne de code enfouie parmi tant d’autres !