Comment prévisualiser votre site Web sur différents appareils à l'aide de Google Chrome

Lorsque vous créez un site Web, vous voulez qu'il soit réactif et s'adapte aux différentes tailles d'écran. Une façon de tester cela consiste à utiliser les outils de développement intégrés de Google Chrome.

Les DevTools de Chrome vous permettent de déboguer différents aspects de votre site Web. Cela inclut la modification et la prévisualisation du code source HTML et du CSS. Il vous permet également de déboguer le code JavaScript côté client et d'afficher le trafic réseau.

DevTools a également une option pour prévisualiser votre site Web sur différents appareils. Cela inclut différents types d'appareils mobiles, iPads, tablettes, etc.

Pour ouvrir la barre d'outils de l'appareil sur Google Chrome, vous devez ouvrir le Fenêtre Outils de développement Chrome:

1. Ouvrez un site Web.
2. Faites un clic droit sur la page et cliquez sur Inspecter.
3. La fenêtre Chrome DevTools s'ouvrira. Il peut s'ouvrir sur le côté ou en bas de votre navigateur, ou sous la forme d'une nouvelle fenêtre.
4. En haut à gauche de la fenêtre, il y a deux icônes. Cliquez sur l'icône qui montre plusieurs appareils de différentes tailles.
   instagram viewer
5. L'écran changera pour vous montrer à quoi ressemblerait le site Web sur un appareil mobile.

Comment basculer entre différents appareils

Utilisez la liste déroulante en haut de la barre d'outils de l'appareil pour basculer entre les différents appareils.

1. Tout en haut de la barre d'outils affichera le type d'appareil sur lequel vous consultez actuellement votre site Web. Cliquez sur le menu déroulant pour choisir un autre appareil dans la liste.
2. Au lieu de choisir un appareil existant, vous pouvez choisir d'afficher le site Web en mode réactif. Cliquez sur le menu déroulant et sélectionnez le Sensible option.
3. À côté de la liste déroulante, vous pouvez également choisir de saisir une largeur et une hauteur personnalisées pour un appareil.
4. Au lieu de saisir une largeur et une hauteur, vous pouvez également cliquer et faire glisser les coins de la fenêtre pour ajuster la taille.

Comment ajouter un appareil personnalisé

Si vous souhaitez enregistrer une largeur et une hauteur personnalisées, vous pouvez ajouter un appareil personnalisé. La barre d'outils de l'appareil affichera alors votre nouvel appareil dans la liste déroulante des appareils.

1. Cliquez sur le menu déroulant qui répertorie tous les appareils.
2. Cliquer sur Éditer.
3. Sous la barre latérale Paramètres, assurez-vous d'avoir le Dispositifs onglet sélectionné. Ici, vous pouvez également afficher une liste d'autres appareils parmi lesquels vous pouvez choisir.
4. Cliquer sur Ajouter un appareil personnalisé.
5. Saisissez un nom, une largeur et une hauteur pour l'appareil. Assurez-vous de sélectionner également le type d'appareil, par exemple s'il s'agit d'un appareil mobile ou de bureau. Si vous développez le Conseils pour le client de l'agent utilisateur option, vous pouvez ajouter d'autres détails tels que le modèle, la marque ou la version de l'appareil.
6. Cliquer sur Ajouter.
7. Revenez à la liste déroulante qui répertorie tous les appareils. Vous verrez votre nouvel appareil personnalisé dans la liste.
8. Vous pouvez à nouveau modifier ces détails ultérieurement en revenant à la page de l'appareil personnalisé. Clique sur le Éditer à côté du nom de votre appareil pour commencer l'édition.

Il est très utile de pouvoir prévisualiser votre site Web sur différents appareils et tailles d'écran, pour plusieurs raisons.

Tout d'abord, vous pouvez tester les performances de votre site Web sur différents appareils. Certains mobiles peuvent avoir des vitesses de réseau ou une limitation du processeur plus rapides que d'autres.

La barre d'outils de l'appareil vous permet de basculer entre les différentes options de vitesse du réseau. Cela vous permet de tester la vitesse de tout appel vers un serveur ou de tester le chargement et le rendu des données sur votre site Web.

De plus, vous pouvez également voir à quoi ressemble la conception sur un appareil particulier, du point de vue de l'interface utilisateur. Si vous utilisez Requêtes média CSS, vous pouvez utiliser cet outil pour vérifier qu'ils fonctionnent comme prévu.

Vous pouvez utiliser la fenêtre DevTools de Google Chrome pour tester la façon dont votre site Web s'adapte à différentes tailles d'écran et pour vous assurer que votre site Web est réactif. Vous pouvez également l'utiliser pour tester les performances de votre site Web et vérifier si vos requêtes multimédias fonctionnent comme prévu.

Vous pouvez également utiliser les DevTools de Google Chrome à d'autres fins. Vous pouvez l'utiliser pour déboguer tout problème CSS en modifiant le CSS sous l'onglet Styles de la fenêtre Élément. Cela vous permet de visualiser immédiatement toutes les modifications CSS, ce qui peut accélérer votre flux de travail de codage.

Comment utiliser Google Chrome pour déboguer CSS

Lire la suite