Remote Debugging - Chrome sur Android

Fabien 🚀

Administrateur
Président d'honneur
Inscription
13 Janvier 2012
Messages
6 126
Réactions
19 186
Points
29 755
RGCoins
0
info.png


La navigation web sur mobile s'est relativement améliorée au fil des années, mais elle reste tout de même très différente de celle sur ordinateur, et beaucoup moins évoluée.
Grâce au "Remote Debugging" présent sur le navigateur web mobile "Google Chrome" sur Android, nous pouvons effectuer des tâches qui étaient réservées aux ordinateurs... sur mobile (DevTools).


config.png


Tout d'abord, il est impératif d'installer les drivers USB correspondant à votre mobile ou à la marque de celui-ci, .

Voir la pièce jointe 14086

Vous allez devoir activer – dans les options développeurs – “Débogage USB”.
(Mode débogage lorsqu'un câble USB est connecté.)

4.png


Les options développeurs sont disponibles dans les paramètres pour la plupart des appareils, néanmoins il y a quelques exceptions.

Vous n'avez pas accès aux options développeurs ?

Voir la pièce jointe 14088

Pour faire apparaître ces options il faut se rendre dans "A propos du téléphone" et cliquer 5 fois consécutives sur « Numéro de build ».

Voir la pièce jointe 14090
Voir la pièce jointe 14087
Voir la pièce jointe 14089

Félicitations, vous avez débloqué les options développeurs. :nerd:

Flaticon_30930-(1).png


Une fois les drivers adéquats installés, branchez le téléphone à l'ordinateur, autorisez bien évidemment ce dernier à utiliser le débogage USB.

5.png


Ouvrez le navigateur sur mobile et allez sur le navigateur de l'ordinateur simultanément, et ouvrez un nouvel onglet puis mettez "chrome://inspect/" dans la barre d'adresse ou allez dans "Menu" > "Outils" > "Inspecter les appareils".

6.png


N'oubliez pas de cocher la case "Discover USB devices" si celle-ci ne l'ai pas déjà. Si tout fonctionne correctement, vous devriez voir votre mobile d'affiché.

Si la détection n'a pas eu lieue (kit de développement - méthode "Legacy Workflow"), lancez l'executable "adb.exe" disponible dans l'arborescence suivante : "sdk" > "platform-tools".

Vous me connaissez maintenant je pense, ma politique est qu'on apprend beaucoup mieux en visionnant une vidéo qu'en lisant un texte, donc voici un exemple d’exécution :
Vous devez être inscrit pour voir les médias
En bas à droite se trouve l'écran de mon téléphone que j'ai filmé.

Ce n'est pas tout ! Vous pouvez donc utiliser le célèbre outils de développement mais également gérer vos onglets via l'ordinateur : ouvrir un nouvel onglet, fermer un onglet, rafraîchir un onglet, etc...

Et le top du top, vous pouvez voir en live screencasting le résultat sur votre mobile sans le regarder. :)

screencasting.png


Voici le résultat de la page que j'ai édité dans ma vidéo... mais vue depuis le navigateur de l'ordinateur et non depuis l'écran de mon mobile.

Pour illustrer de manière professionnelle ce tutoriel, visionnons une petite vidéo issue des développeurs de Google.
Vous devez être inscrit pour voir les médias

A noter que depuis la version 4.4 (KitKat) d'Android, les applications qui utilisent une instance Google Chrome afin d'accéder au web peuvent également être éligibles à l'utilisation des outils de développement, exemple avec la PlayStation App :
Screenshot at 2014-02-17 22-48-34.png


Voilà, vous avez appris quelque chose ? :)
Ne fonctionne que sur Android.

:RG:
 

Lyrix

UX/UI Designer
Ancien staff
Inscription
20 Août 2012
Messages
22 672
Réactions
8 161
Points
36 866
RGCoins
0
Dommage que ce tuto ne s'applique pas sur iphone, sinon sa reste un superbe tuto très complet et explicatif et très utile, merci pour ton partage @Fabien ;)
 

Magz'

Vétéran
Ancien staff
Inscription
29 Août 2012
Messages
11 457
Réactions
6 984
Points
19 898
RGCoins
0
Sa a l'air super, étant sur iPhone je ne peux malheureusement pas essayer D:

Meme toi tu va rejoindre la GTP :trollface:
 

Rivals

Ancien staff
Inscription
27 Août 2016
Messages
1 706
Réactions
897
Points
13 104
RGCoins
0
Bravo pour ce tutoriel (la rédaction, le soin, l'effort), le RTE sur mobile :bave:

Tu es accepté d'office dans la GTP. :trollface:
 
Haut