Vous avez une question sur la façon de visualiser le code source de l’élément visuel sur votre Chromebook ? Pour ce faire, vous pouvez utiliser les DevTools spéciaux dans l’application Google Chrome, ou sur n’importe quelle page du navigateur. Les DevTools sont une liste d’outils de développement spéciaux intégrés au navigateur Google Chrome. Ils permettent aux utilisateurs de modifier des pages à tout moment et de suivre les problèmes éventuels.
Comment utiliser Inspect Element sur Chromebook
Pour les Chromebooks le navigateur par défaut est Google, pour ouvrir les outils de développement sur cet appareil vous avez besoin.
- Ouvrez la page que vous voulez
- Cliquez sur les 3 points dans le coin supérieur droit de l’application.
- Sélectionnez « Plus d’outils« .
- Cliquez sur « Outils du développeur« .
Les autres moyens d’accéder à cette fonction sont d’appuyer sur le bouton F12 ou de cliquer avec le bouton droit de la souris sur l’élément souhaité.
Il s’agit d’une instruction universelle qui s’applique à la plupart des navigateurs sous Windows ou tout autre système.
Comment utiliser Inspect Element sur Mac ou Iphone
Est-il possible de faire de même avec un Mac ou même un iPhone ? Il vous suffit de suivre les quelques étapes suivantes :
Comment l’utiliser sur Mac
Si vous avez un Mac, votre meilleur choix de navigateur est Safari. L’ouverture des outils du développeur dans ce navigateur est légèrement différente du même processus dans Chrome ou Firefox. Vous devrez :
- Ouvrez le navigateur
- Cliquez sur Safari sur le nom de l’onglet
- Sélectionnez « Préférences« .
- Cliquez ensuite sur l’icône de l’engrenage avancé, qui se trouve en haut de l’écran.
- Cochez la case à côté de Afficher le menu Développer dans la barre de menu.
Une fois que vous aurez fait cela, l’élément Inspect sera disponible sur vos pages web. Vous pouvez également l’appeler avec CMD + Option + I.
Comment l’utiliser sur l’iPhone
Si vous souhaitez vérifier l’aspect de la version mobile de la page Web sur votre iPhone à l’aide de la fonction Inspecter les éléments, vous devez d’abord activer l’inspecteur Web pour votre appareil iOS :
- Allez dans les paramètres
- Sélectionnez l’application Safari
- Faites défiler jusqu’en bas et cliquez sur « Menu avancé« .
- Activez maintenant la case à cocher à côté de « Web Inspector« .
Vous devez également activer le menu Développeur sur votre Mac comme indiqué ci-dessus. Une fois que vous avez activé ces fonctions sur votre appareil iOS et votre Mac, vous devriez pouvoir voir le menu Développeur en haut de votre Mac. Vous devez cliquer dessus pour voir l’iPhone joint et la page Web ouverte sur celui-ci. Lorsque vous passez à une autre page, vous passez également à la fenêtre de l’inspecteur Web pour cette page sur votre Mac.
Qu’est-ce que le panneau élémentaire
La première chose à savoir est ce qu’est le panneau des éléments. Si vous souhaitez modifier la conception ou tout élément externe de la page, vous devez modifier votre CSS ou votre HTML. Vous pouvez le faire en utilisant un outil de développement appelé le panneau des éléments. Il vous permettra de vérifier et de modifier votre page depuis le front-end. Voici quelques-uns des éléments que vous pouvez y voir :
- Des informations sur l’image, telles que sa taille et sa source.
- Panneau CSS – cette option est utilisée pour modifier le style externe de la page. Vous pouvez modifier les paramètres tels que les polices, les tailles, les couleurs ici.
- Information DOM ou panneau DOM : avec cette option, vous pouvez contrôler l’apparence de la page. Vous pouvez modifier la position des éléments et naviguer entièrement dans les fichiers HTML.
- Le panneau Console présente les nouvelles fonctionnalités sous les outils de développement
- Écouteurs d’événements pour les éléments
- Commentaires HTML
- Commentaires
Contrôle du rendu et des dimensions naturelles d’une image
Très souvent, vous avez besoin de connaître des informations sur une image présente sur une page web, vous pouvez l' »inspecter ». Cela vous donne la possibilité de connaître la taille de l’image, par exemple. Pour ce faire, vous devez placer le pointeur de votre souris sur l’IMG lorsque vous vous trouvez dans l’arborescence DOM.
Inspection d’une image particulière utilisée à partir d’un ensemble de sources (srcset)
Vous pouvez alors vérifier quelle version de l’image a été chargée et quelle est la source srcset exacte. Le srcset aidera le navigateur à demander la version de l’image ayant la plus petite taille, qui est légèrement plus grande que l’image réelle. Ceci est utilisé pour afficher un ensemble d’images avec différentes résolutions parmi lesquelles le navigateur peut choisir. Tout d’abord, sélectionnez l’élément IMG, puis vérifiez l’information $0.currentSrc dans la console. Notez que vous pouvez augmenter les caractéristiques des images avec srcset si vous devez utiliser des appareils avec un DPI plus élevé.
