in

Comment afficher la source HTML dans Google Chrome

Que vous soyez un concepteur Web déboguant le code source de votre site ou simplement curieux de savoir à quoi ressemble le code d’un site, vous pouvez afficher la source HTML directement dans Google Chrome. Il existe deux façons d’afficher la source HTML: Afficher la source et inspecter à l’aide des outils de développement.

Afficher la source à l’aide de Afficher la source de la page

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

Cliquez avec le bouton droit sur une page, puis cliquez sur Afficher la source de la page

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

La source s'ouvre dans un nouvel onglet

Si vous recherchez un élément ou une partie spécifique dans la source HTML, l’utilisation de View Source est fastidieuse et fastidieuse, 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 le volet Outils de développement dans Chrome et constitue une approche beaucoup plus propre pour afficher le code source. HTML est plus facile à lire ici grâce au formatage supplémentaire et à la possibilité de réduire les éléments que vous ne souhaitez pas voir.

Ouvrez Chrome et dirigez-vous vers la page que vous souhaitez inspecter; puis appuyez sur Ctrl + Maj + i. Un volet ancré s’ouvre à côté de la page Web que vous consultez.

Les outils de développement s’ouvrent sous la forme d’un volet ancré dans Chrome

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

Réduire les éléments lorsque vous cliquez sur la flèche grise

Si vous ne souhaitez pas voir le code de la page entière par défaut, mais plutôt inspecter un élément spécifique du code HTML, cliquez avec le bouton droit sur cet espace sur la page, puis cliquez sur « Inspecter ».

Accédez à un élément spécifique lorsque vous cliquez dessus avec le bouton droit de la souris, puis cliquez sur Inspecter

Lorsque le volet s’ouvre cette fois, il va directement à la partie de code qui contient cet élément sur lequel vous avez cliqué.

L'outil va directement à cet élément

Si vous souhaitez modifier la position d’ancrage, vous pouvez la déplacer vers le bas, la gauche, la droite ou même la détacher dans une fenêtre distincte. Cliquez sur l’icône de menu (trois points), puis choisissez soit de détacher dans une fenêtre séparée, d’ancrer à gauche, d’ancrer en bas ou d’ancrer à droite, respectivement.

Modifiez l'orientation du dock lorsque vous cliquez sur l'icône de menu, puis sur l'une des quatre options

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Comment renommer rapidement des fichiers par lots sous Windows, Mac OS X ou Linux

Comment renommer rapidement des fichiers par lots sous Windows, Mac OS X ou Linux

Amazon Tap est moins cher et meilleur

Amazon Tap est moins cher et meilleur