Inspection des Pages Web
La création de mises en page réactives et adaptatives constitue un aspect essentiel du développement web moderne. Il est toujours souhaitable qu'une page web soit accessible sur tous les appareils. Heureusement, les développeurs web disposent d'un ensemble d'outils puissants intégrés aux navigateurs web.
Considérons les outils de développement de Chrome :
Outils
Pour accéder aux outils de réactivité et commencer à les utiliser, il est nécessaire de procéder comme suit :
- Ouvrir les outils de développement comme précédemment. Les méthodes possibles sont : utiliser la souris, cliquer avec le bouton droit et sélectionner le champ « Inspecter », ou utiliser le raccourci clavier « Ctrl+Shift+I » (Windows, Linux) ou « Command+Option+I » (Mac) ;
- Cliquer sur l’icône 5. Le mode réactif s’active. Pour fermer le mode réactif, il faut cliquer à nouveau sur l’icône 5.
Fonctionnalités supplémentaires :
- Il est possible de modifier (imiter) la largeur de l’appareil en faisant glisser l’élément 6 ;
- Il est possible de sélectionner un appareil spécifique à l’aide du champ 1. Certains appareils couramment utilisés par les utilisateurs y sont proposés ;
- Il est possible de définir la largeur (champ 2) et la hauteur (champ 3) de la taille d’écran de l’appareil ;
- Il est possible de modifier l’échelle (champ 4). Généralement utilisé pour les grandes valeurs, afin de visualiser l’ensemble de la mise en page ;
- 7 correspond à la fenêtre d’affichage (viewport). L’aperçu du site web s’affiche selon la largeur et la hauteur définies.
Remarque
Tous les navigateurs modernes (par exemple, Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) disposent du même ensemble d’outils. Le choix du navigateur n’a donc aucune incidence.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain what each numbered element (1-7) does in more detail?
How do I use these responsive tools to test my website on different devices?
Are there any tips for troubleshooting layout issues using these tools?
Awesome!
Completion rate improved to 2.04Inspection des Pages Web
Glissez pour afficher le menu
La création de mises en page réactives et adaptatives constitue un aspect essentiel du développement web moderne. Il est toujours souhaitable qu'une page web soit accessible sur tous les appareils. Heureusement, les développeurs web disposent d'un ensemble d'outils puissants intégrés aux navigateurs web.
Considérons les outils de développement de Chrome :
Outils
Pour accéder aux outils de réactivité et commencer à les utiliser, il est nécessaire de procéder comme suit :
- Ouvrir les outils de développement comme précédemment. Les méthodes possibles sont : utiliser la souris, cliquer avec le bouton droit et sélectionner le champ « Inspecter », ou utiliser le raccourci clavier « Ctrl+Shift+I » (Windows, Linux) ou « Command+Option+I » (Mac) ;
- Cliquer sur l’icône 5. Le mode réactif s’active. Pour fermer le mode réactif, il faut cliquer à nouveau sur l’icône 5.
Fonctionnalités supplémentaires :
- Il est possible de modifier (imiter) la largeur de l’appareil en faisant glisser l’élément 6 ;
- Il est possible de sélectionner un appareil spécifique à l’aide du champ 1. Certains appareils couramment utilisés par les utilisateurs y sont proposés ;
- Il est possible de définir la largeur (champ 2) et la hauteur (champ 3) de la taille d’écran de l’appareil ;
- Il est possible de modifier l’échelle (champ 4). Généralement utilisé pour les grandes valeurs, afin de visualiser l’ensemble de la mise en page ;
- 7 correspond à la fenêtre d’affichage (viewport). L’aperçu du site web s’affiche selon la largeur et la hauteur définies.
Remarque
Tous les navigateurs modernes (par exemple, Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) disposent du même ensemble d’outils. Le choix du navigateur n’a donc aucune incidence.
Merci pour vos commentaires !
