Inspection de la Page Web

Créer des mises en page réactives et adaptatives est un aspect crucial du développement web moderne. Nous voulons toujours une page web qui sera accessible sur tous les appareils. Heureusement, les développeurs web ont accès à un ensemble d'outils robustes intégrés dans les navigateurs web.

Considérons les outils web de Chrome :

Outils

Pour accéder aux outils réactifs et commencer à les utiliser, nous avons besoin de ce qui suit :

1. Ouvrez les outils de développement comme nous l'avons fait précédemment. Les moyens possibles sont : utiliser une souris, cliquer sur le bouton droit et cliquer sur le champ "Inspecter", ou utiliser le raccourci clavier "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (Mac);
2. Cliquez sur l'icône 5. Nous obtenons le mode réactif. Pour fermer le mode réactif, nous devons à nouveau cliquer sur l'icône 5.

Fonctionnalités supplémentaires :

1. Nous pouvons changer (imiter) la largeur de l'appareil à l'aide de l'élément 6 en le faisant glisser;
2. Nous pouvons sélectionner l'appareil défini à l'aide du champ 1. Il existe certains appareils largement répandus que les utilisateurs utilisent le plus;
3. Nous pouvons définir la largeur (champ 2) et la hauteur (champ 3) de la taille de l'écran de l'appareil;
4. Nous pouvons changer l'échelle (champ 4). Généralement, elle est utilisée lorsque nous traitons de grandes valeurs et que nous devons voir l'ensemble de la mise en page;
5. 7 est la fenêtre d'affichage. Nous voyons la vue du site Web pour une telle taille d'écran en largeur et en hauteur.

Remarque

Tous les navigateurs modernes (par exemple, Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) ont le même ensemble d'outils. Il n'y a pas de différence quel navigateur nous sélectionnons.