Comment afficher la source HTML dans Google Chrome

Que vous soyez un concepteur Web en train de déboguer le code source de votre site ou que vous souhaitiez simplement savoir à quoi ressemble le code d'un site, vous pouvez afficher le code source HTML directement dans Google Chrome. Il existe deux manières d'afficher la source HTML: Afficher la source et Inspecter à l'aide des outils de développement.

View Source Utiliser View Page Source

Lancez Chrome et accédez à la page Web sur laquelle vous souhaitez afficher le code source HTML. Cliquez avec le bouton droit de la souris sur la page et cliquez sur «Afficher le source de la page» ou appuyez sur Ctrl + U pour afficher la source de la page dans un nouvel onglet.

Un nouvel onglet s'ouvre avec tout le code HTML de la page Web, complètement développé et non formaté.

Si vous recherchez un élément ou une partie spécifique dans la source HTML, utiliser View Source est fastidieux et fastidieux, surtout si la page utilise beaucoup de JavaScript et de CSS.

Inspecter la source à l'aide des outils de développement

Cette méthode utilise la sous-fenêtre Outils de développement de Chrome et constitue une approche beaucoup plus propre pour afficher le code source. Le format HTML est plus facile à lire ici grâce à la mise en forme supplémentaire et à la possibilité de réduire les éléments qui ne vous intéressent pas.

Ouvrez Chrome et accédez à la page à inspecter. puis appuyez sur Ctrl + Maj + i. Un volet ancré s’ouvrira à côté de la page Web affichée.

Cliquez sur la petite flèche grise à côté d'un élément pour le développer davantage.

Si vous ne souhaitez pas voir le code de la page complète par défaut, mais inspectez un élément spécifique du code HTML, cliquez avec le bouton droit de la souris sur cet espace de la page, puis cliquez sur «Inspecter».

Lorsque le volet s'ouvre cette fois, il passe directement à la partie de code contenant cet élément sur lequel vous avez cliqué.

Si vous souhaitez modifier la position du dock, vous pouvez le déplacer en bas, à gauche, à droite ou même le désancrer dans une fenêtre séparée. Cliquez sur l'icône de menu (trois points), puis choisissez de désancrer dans une fenêtre séparée, ancrer à gauche, ancrer en bas ou ancré à droite.

C'est tout ce qu'on peut en dire. Lorsque vous avez terminé d’examiner le code, fermez l’onglet View Source ou cliquez sur le «X» dans le volet Outils de développement pour revenir à votre page Web.