Comment déboguer des pages web sur chrome pour Android sur ordinateur

En tant qu'administrateur de blog, je débogue mon site Web personnel à l'aide de Chrome pour voir comment les modifications apportées au thème et au CSS ressembleraient avant de les implémenter de manière permanente sur le serveur. Il n'y a pas si longtemps, je ne faisais jamais attention aux pages mobiles car peu de visiteurs visitaient mon site avec un smartphone. Mais aujourd'hui, un pourcentage important de visiteurs se compose de smartphones et de tablettes, il est donc devenu nécessaire de s’occuper de leur apparence et de leur présentation.

S'il s'agissait d'une page sur ordinateur, une personne aurait facilement pu déboguer à l'aide de l'option du menu contextuel de Chrome, mais ce n'est pas l'option avec les pages sur mobile. Donc, aujourd’hui, je vais vous montrer comment déboguer des 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échargez et installez Android SDK sur votre ordinateur et exécutez-le. Le programme d’installation vous demandera de télécharger Java si vous ne l’avez pas déjà installé.

Pour la première fois, vous exécutez Android SDK sur votre ordinateur. Il vous sera demandé 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 les outils de la plate-forme Android SDK et cliquez sur le bouton Installer le package.

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

Étape 3: Maintenez maintenant les touches Ctrl + Maj enfoncées et cliquez avec le bouton droit de la souris sur le dossier pour y ouvrir l’invite de commande. Vous pouvez également ouvrir l'invite de commande à l'aide de la boîte d'exécution 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 Web USB.

Étape 5: À 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 Chrome Android et ouvrez l'URL localhost: 9222 dans 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 correspondant. Vous pourrez suivre en temps réel les modifications que vous apportez au débogage sur votre ordinateur directement sous Android.

Conclusion

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