Adobe Shadow – Outil de debug sur devices mobiles (iOS et Android) sorti des labs

Adobe l’avait clairement annoncé, ils se concentrent sur les technologies autour de HTML5, notamment en contribuant à jQuery, Webkit et autres PhoneGap. Aujourd’hui, ils viennent de sortir un nouveau produit de leur labs, Adobe Shadow.

Pour l’instant, celui-ci est encore en phase de beta et peut être téléchargé sur les Adobe Labs:

Adobe Shadow sur Adobe Labs

Un outil de debug sur mobile

Faire du développement HTML5 sur son PC / Mac, c’est assez pratique car on peut suivre un cycle de développement / debugging « cyclique ». On modifie le code dans son IDE, on va dans son navigateur, on recharge la page et on peut inspecter ce qu’il se passe directement avec les outils intégrés au navigateur. Google Chrome se révèle d’ailleurs excellent sur ce point, encore meilleur que le couple Firefox + Firebug quand on a pris un peu l’habitude.

Mais quand on passe sur mobile, c’est une autre histoire, les outils de debug sur mobile sont extrêmement limités. Bien sûr, on peut toujours caler des « alert() » comme en 1990 mais c’est plus long qu’autre chose.

Sur Safari (iPhone / iPad), vous pouvez activer la console qui va vous afficher de manière succincte, ce que vous loggez avec console.log(…). Sur Android, vous avez le navigateur Google Chrome pour Android (disponible sur le Marker) qui vous permet d’aller plus loin mais on est bien loin du confort que l’on a sur son PC/Mac.

Adobe Shadow tente de vous rendre la tâche plus facile en réalisant une synchronisation de votre navigateur (Google Chrome seulement) avec de multiples devices connectés. Le nombre de devices n’est pas limité, vous pouvez donc y connecter une armada de téléphones / tablettes. Seule contraintes, tous vos appareils doivent être sur le même réseau mais si vous avez un réseau Wifi, ce n’est pas un souci.

Le système se compose de 2 parties, une extension Google Chrome pour votre browser PC et une application native disponible sur l’AppStore / Google Play que vous devrez installer sur votre appareil. Notez que pour les utilisateurs Windows, vous devrez aussi installer le logiciel « Bonjour » présent dans l’installation de Shadow pour que votre machine soit automatiquement détectée.

Vous lancez l’application sur votre mobile et on va vous donner un mot de passe (pour éviter un conflit avec d’autres utilisateurs du réseau Wifi) que vous allez rentrer directement dans l’extension Google Chrome

Votre device est désormais connecté. Lorsque vous naviguez sur une page web sur votre PC, celle-ci va automatiquement s’afficher sur toutes les devices connectés. Ce n’est pas un simple screenshot qui vous est balancé mais bien la page telle que vous la verriez sur Safari sur iOS par exemple. Cela vous permet de tester facilement le look de vos pages web sur vos appareils sans aller taper l’adresse dans tous les navigateurs. Voici par exemple la page Twitter sur mon PC, sur un iPad et sur un smartphone Android:

On voit bien que l’affichage n’a rien à voir (cela vient aussi du fait que je ne suis pas connecté avec mon compte sur les devices).

Jusque là, c’est pratique mais ce qui est vraiment intéressant, c’est la suite!

Debugging sur device depuis le Desktop

Comme je le disais en introduction, les outils de debug des navigateurs mobiles sont assez ridicule par rapport à ceux que l’on a sur Desktop. Grâce à Adobe Shadow, on peut avoir « le meilleur de deux mondes » en ayant les outils de debug de Google Chrome qui agissent directement sur le rendu sur device avec notamment:

  • Inspection et modification des éléments du DOM
  • Highlight des éléments du DOM au survol sur le device (pratique)
  • Utilisation de la console JavaScript
  • Onglet Network pour voir le trafic entrant / sortant

Voici un aperçu de l’interface que vous devez connaître si vous utilisez déjà Chrome:

Démonstration

Under the hood

Comme je suis assez curieux, j’ai lancé un petit tweet pour savoir grâce à quoi était réalisé Adobe Shadow, ce à quoi le compte officiel @AdobeShadow m’a répondu:

@fnicollet Shadow 4 iOS/Android use Native SDKs. Shadow 4 Chrome uses HTML, CSS & Javascript. Remote inspect uses @phonegap weinre. cc@adobe

Pour info, « weinre » (à prononcer winery) est un projet qui était déjà existant, pour le debug des applications PhoneGap:

http://phonegap.github.com/weinre/

Il existe d’autres outils du même genre comme  Shim (merci @jsgeneve), un projet pour synchroniser la navigation qui tourne sur node.js:

https://github.com/marstall/shim#readme

Perso, j’ai utilisé Shadow cette après-midi et cela fonctionne déjà très bien, même pour une beta. Je pense qu’il devrait me faire gagner pas mal d’heures par la suite.

N’hésitez pas à proposer des évolutions pour rendre cet outil encore meilleur ;)

Plus d’informations:

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *