Nouvelles Chroniques d'Amethyste

Penser au Sens, pas au Verbe

Débogage distant avec Chrome

Poster un commentaire

Cette semaine, Emmanuel un de mes collègues, m’a montré une fonctionnalité Chrome que je ne connaissais pas et qui est bien utile pour déboguer un site mobile en particulier.

Pour la suite vous aurez besoin:

  • d’un périphérique avec Androïd > 4.0
  • un câble usb
  • installer Chrome

Configuration

  • Sur le périphérique rendez vous dans les paramètres Système

2015-03-19_21-59-00

Si comme moi vous ne voyez pas apparaître les options développeur un petit réglage sera nécessaire:

  • Allez dans le menu A PROPOS tout en bas

Regardez si le numéro de build est affiché. Si ce n’est pas le cas comme ici:

2015-03-19_22-04-03

Cliquez sur INFORMATIONS LOGICIELLES:

2015-03-19_22-21-42

  • Tapotez plusieurs fois sur Numéro de build (Build Number).

La suite dépend un peut de son système si j’en crois les forums, de mon coté des instructions se sont affichées au bout de 4 ou 5 tapotages.

Et un nouveau menu apparaît:

2015-03-19_22-23-06

Bien sûr soyez prudent avec.

  • Allez dans le menu développeur et sélectionnez DEBOGAGE USB:

2015-03-19_22-26-02

Il ne reste plus qu’à connecter le câble usb et on est prêt!

Sous Windows il faudra peut être installer le driver Usb suivant:

http://developer.android.com/tools/extras/oem-usb.html

  • Lancer Chrome sur son desktop
  • lancer l’url chrome://inspect

2015-03-19_22-30-19

  • Cocher Discover USB Devices

Côté périphérique ceci s’affiche:

2015-03-19_22-32-07

Cocher la case et faire OK

Premier essai

  • Lancer Chrome sur le périphérique et ouvrez une page
  • Allez (côté desktop) sur la page d’inspection

2015-03-19_22-35-36

On voit dans la partie DEVICES la liste de tous les périphériques connectés ainsi que tous les onglets ouvert. Ici la page d’accueil d’un site d’information!

  •  Cliquer sur le lien INSPECT:

L’application DEVELOPER TOOLS s’ouvre:

2015-03-19_22-40-53

C’est la fenêtre correspondant à F12 que l’on connaît bien. Mais on observe le navigateur distant et non pas local.

Activer Screencast

Je conseille d’activer la session Screencast pour plus de confort.

  • Dans la fenêtre DEVELOPER TOOLS observez l’icône à droite dans le menu:

2015-03-19_22-47-37

  • Cliquer juste dessus et l’écran se transforme:

2015-03-19_22-51-18

L’affichage de votre tablette sur votre desktop apparaît.

Ce n’est pas une image, c’est actif. Essayez de faire défiler ou ouvrir un menu, les deux écrans réagissent!!!

Vous pouvez même jouer sur l’orientation du périphérique et screencast s’adapte!

 

Voilà ce sera tout.

Il y a bien plus à découvrir ici:

https://developer.chrome.com/devtools/docs/remote-debugging

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s