Lors de la création d'un site Web ou d'une application Web, nous avons toujours la tâche de vérifier si tout fonctionne correctement sur un appareil mobile ou même une tablette. Si nous travaillons en développement, nous ne savons pas comment le vérifier, car nous devrons d'abord envoyer nos modifications au serveur et les consulter sur notre appareil mobile.
Mais nous ne devons pas nous inquiéter car Google Chrome dispose d'une fonctionnalité qui nous permet, en quelques étapes simples, de vérifier le fonctionnement de notre site Web ou de notre application sur l'appareil mobile que nous voulons.
1. Émuler un appareil mobile dans Google Chrome
Comme nous le disons, Google Chrome intègre un outil orienté développeur avec lequel nous pouvons accéder aux options exclues en un coup d'œil. L'un d'eux est l'émulateur d'appareil mobile dans le mode appareil.
Étape 1
Nous aurons un menu en bas qui s'affichera, qui nous montre le code HTML de la page. Pour afficher le panneau développeur de Chrome, nous irons dans "Menu / Plus d'outils / Outils de développement" ou nous ferons la combinaison de touches suivante :
Sous Windows et Linux
Ctrl + Maj + M
Sur Mac
+ ⌘ + M
Étape 2
Nous verrons qu'un panneau de code s'ouvre. Nous regardons l'icône qui correspond au "Device Mode" et qui sera activée lorsqu'elle apparaîtra en bleu. Cliquez dessus pour l'activer.
Étape 3
Pendant que nous y allons, nous allons dans le menu supérieur au-dessus de la page émulée et sélectionnons l'appareil que nous voulons émuler, dans ce cas, nous sélectionnons Apple iPhone x et actualisons pour que les modifications prennent effet. Nous avons une grande variété de préréglages configurés pour qu'en un clic, nous ayons notre modèle simulé.
Étape 4
Si nous voulons créer des mesures personnalisées, nous irons à l'endroit où apparaît le modèle de terminal et cliquerons sur "Modifier".
Étape 5
Les modèles précédemment configurés apparaîtront ou nous pouvons en ajouter un de manière personnalisée en cliquant sur "Ajouter un appareil personnalisé".
Étape 6
Dans les options du Mode Appareil, nous aurons la possibilité d'activer ou non les capteurs qui simulent un écran tactile.
NoterCliquez sur l'icône à trois points pour afficher, entre autres, l'option "Capteurs"
2. Émuler la connectivité du réseau mobile dans Google Chrome
L'état du réseau et ses tests grâce à Chrome nous permet de tester notre site internet à travers différents types de connexions réseau comme la 3G et même sans connexion.
Étape 1
Nous pouvons également émuler le réseau dans lequel nous sommes. Pour ce faire, nous allons dans l'onglet "Réseau" et sélectionnons un type de réseau dans la liste réductible.
Étape 2
Si nous avons établi une limite, nous verrons un avertissement pour nous rappeler que nous l'avons activé.
3. Ajouter des limites à la connectivité du réseau mobile dans Google Chrome
Étape 1
Cette limite est importante et nous pouvons définir des limites personnalisées avec des conditions configurées par nous-mêmes. Pour ce faire, nous appuyons sur la touche suivante pour ouvrir le panneau Paramètres.
F1
Étape 2
Cliquez sur l'option "Limitation". Nous sélectionnons la possibilité de "Ajouter un profil personnalisé".
Étape 3
Ici, nous allons définir les paramètres de limites de manière personnalisée.
4. Ouvrir le panneau des conditions du réseau dans Google Chrome
Nous avons plus d'options dans le panneau des développeurs dans les DevTools.
Étape 1
Pour ce faire, on va dans le menu en trois points sur le côté droit et on clique sur « Plus d'outils » / « Conditions du réseau ».
Étape 2
À partir de là, nous pouvons activer ou désactiver le cache et remplacer l'agent par défaut par un agent personnalisé.
Avec cette fonctionnalité nous n'aurons plus à chercher notre mobile pour tester que notre site internet ou application fonctionne correctement, il ne reste plus à chacun qu'à explorer un peu plus cet outil et l'utiliser pour raccourcir les temps de test et de mise en œuvre.
