Comment déboguer des pages Web sur Chrome pour Android sur ordinateur

En tant qu'administrateur d'un blog, je débogue mon site Web personnel à l'aide de Chrome pour voir à quoi ressembleraient les modifications du thème et du CSS avant de les implémenter de manière permanente sur le serveur. J'étais il n'y a pas si longtemps quand je n'ai jamais payé attention aux pages mobiles car seuls quelques visiteurs ont visité mon site à l'aide d'un smartphone. Mais aujourd'hui, un pourcentage important de visiteurs se compose de smartphones et de tablettes, et il est donc devenu nécessaire de prendre également soin de l'apparence et de la présentation.

S'il s'agissait d'une page sur ordinateur, une page aurait pu être facilement déboguée à l'aide de l'option du menu contextuel du clic droit de Chrome, mais ce n'est pas l'option avec les pages sur mobile. Alors, aujourd'hui, je vais vous montrer comment vous pouvez déboguer pages Web mobiles sur votre ordinateur à l'aide de Chrome pour Android et du SDK Android.

Débogage de la page Web

Étape 1: Télécharger et installer

SDK Android sur votre ordinateur et exécutez-le. Le programme d'installation vous demandera de télécharger Java si vous ne l'avez pas installé.

Pour la première fois que vous exécutez Android SDK sur votre ordinateur, il vous demandera de télécharger plusieurs API et outils. Si votre seul objectif d'installer Android SDK est de déboguer les pages, décochez tout sauf Outils de la plate-forme SDK Android et cliquez sur le Installer le paquet bouton.

Étape 2: Après avoir installé les outils de la plate-forme Android, ouvrez la boîte d'exécution (Windows+R) et courir %userprofile%\AppData\Local\Android\android-sdk\platform-tools pour ouvrir le répertoire des outils de la plate-forme Android.

Étape 3: Maintenant, maintenez la touche Ctrl + Maj enfoncée et cliquez avec le bouton droit dans le dossier pour y ouvrir l'invite de commande. Vous pouvez également ouvrir l'invite de commande à l'aide de la zone Exécuter et accéder au dossier manuellement.

Étape 4: Cela fait, ouvrez Chrome sur votre téléphone Android, ouvrez Paramètres—> Outils de développement et cochez l'option Activer le débogage USB Web.

Étape 5 : Maintenant, sur l'invite de commande, exécutez la commande adb forward tcp: 9222 localabstract: chrome_devtools_remote et ouvrez le navigateur Chrome sous Windows en cas d'exécution réussie.

Étape 6 : Ouvrez la page que vous souhaitez déboguer sur votre navigateur Android Chrome et ouvrez l'URL hôte local: 9222 sur le navigateur Chrome de votre ordinateur.

C'est tout, vous verrez toutes les pages ouvertes sur votre navigateur Android sous forme de vignettes sur votre ordinateur. Pour ouvrir la page de débogage, cliquez simplement sur la vignette du site Web respectif. Vous pourrez suivre les modifications de débogage que vous apportez sur votre ordinateur directement sur Android en temps réel.

Conclusion

Je suis sûr que cette astuce aidera de nombreux développeurs Web à optimiser leurs pages Web pour les smartphones. J'ai utilisé l'astuce pour configurer mes pages Web et cela a fonctionné comme un charme. Cependant, si vous connaissez un meilleur moyen de déboguer les pages Web d'un smartphone sur un ordinateur, partagez-le avec nous.