Comment déboguer un site web sur Chrome mobile ?

Le débogage d’un site web sur mobile peut être une tâche difficile pour les développeurs. En effet, les écrans mobiles sont beaucoup plus petits que les écrans d’ordinateur. Cela peut compliquer la visualisation des problèmes. En outre, les navigateurs mobiles ont souvent des fonctionnalités et des contraintes différentes de celles des navigateurs de bureau. Ces fonctionnalités peuvent entraîner des bugs spécifiques à la version mobile.

Malgré ces défis, il est important pour les développeurs de pouvoir déboguer des sites web sur mobile. Ainsi, le déboguage des sites web pourra garantir une expérience utilisateur cohérente et de qualité. Heureusement, Chrome DevTools offre des fonctionnalités qui permettent aux développeurs d’inspecter le code et de retracer les bugs au niveau du code.

Dans ce qui suit, nous allons passer en revue une des méthodes pour déboguer des sites web sur Chrome mobile. Cette méthode permettra aux développeurs d’inspecter et de corriger les problèmes sur les écrans mobiles. De ce fait, l’expérience utilisateur s’en trouvera améliorer.

Utilisation du mode de débogage USB Android

Dans la suite de cet article, nous allons détailler les étapes à suivre pour utiliser le mode de débogage USB Android et déboguer des sites web sur Chrome mobile. Cela suppose que les développeurs ont un appareil Android dédié aux tests.

Préparation de l’appareil mobile pour le débogage

En premier lieu, nous allons activer l’option de développement sous l’appareil mobile.

Pour activer les options de développement, appuyez sept fois sur l’option Numéro de build.

Remarque : Selon la documentation officielle d’Android, on peut trouver cette option à l’un des emplacements suivants, selon la version d’Android :

• Android 9 (niveau API 28) et supérieur : Paramètres > À propos du téléphone > Numéro de build ;
• Android 8.0.0 (niveau API 26) et Android 8.1.0 (niveau API 26) : Paramètres > Système > À propos du téléphone > Numéro de build
• Android 7.1 (niveau API 25) et inférieur : Paramètres > À propos du téléphone > Numéro de build

Une fois que l’option de développement est activé, nous allons activer l’option de débogage USB. L’option de débogage USB se trouve dans le menu des options de développement. On peut trouver cette option à l’un des emplacements suivants, selon la version d’Android :

• Android 9 (niveau API 28) et supérieur : Paramètres > Système > Options avancées > Options de développement > Débogage USB
• Android 8.0.0 (niveau API 26) et Android 8.1.0 (niveau API 26) : Paramètres > Système > Options de développement > Débogage USB
• Android 7.1 (niveau API 25) et inférieur : Paramètres > Options de développement > Débogage USB

Faire le débogage sur une machine avec chrome

Pour faire le débogage sur une machine chrome, il faut connecter l’appareil mobile avec une câble USB. Par la suite, il faut accéder à l’adresse :

chrome://inspect#devices

Une fois que c’est fait, il faut autoriser le débogage par USB sur l’appareil mobile. Cette autorisation ne se fera qu’une seule fois si on coche la case « Toujours autoriser ».

Ensuite, il faut s’assurer que la case à cocher Découvrir les périphériques USB (Discover USB devices) est activée comme indiqué ci-dessous.

Comme nous avons déjà connecté notre appareil à la machine par câble USB et que nous avons autoriser le débogage par USB, nous voyons le nom de l’appareil (SM-T220) dans la liste. S’il y a des problèmes veuillez consultez la documentation officielle pour en savoir plus sur le dépannage des problèmes.

Enfin, lancez maintenant Chrome sur l’appareil Android et vous verrez sur l’application chrome :