Archive

Articles taggués ‘weinre’

Analyser à distance votre application Web Mobile

Afin de cibler un public plus large – généralement iOS et Android – nombre d’entre nous avons décidé de nous lancer dans la création d’applications Web mobile.

L’outillage est souvent vu par les développeurs comme un point faible du Web Mobile par rapport à des approches de développement plus traditionnelles : Objective C ou Java. Comment par exemple déboguer et analyser une application qui s’exécute sur le mobile ?

En effet, bien que les smartphones et les tablettes utilisent très massivement le moteur de rendu Webkit (à l’exception de Windows Phone), ces derniers le configurent de manière différente. Ainsi, certaines fonctionnalités de HTML5/CSS3 sont désactivées, ou encore le comportement des pages peut varier.

Pour ma part, avant d’utiliser Weinre, je commençais par tester mon application dans Google Chrome en mode non sécurisé (désactivation de la sécurité cross-domain, accès aux fichiers locaux) et  en exploitant les nombreux outils et plugins de Chrome. Pour avoir la sensation d’être sur un mobile, j’incorporais mon application dans un template représentant un smartphone.

Enfin, je terminais mes tests en lançant l’application sur les différents émulateurs et simulateurs. Néanmoins, quand l’affichage n’était pas satisfaisant, j’étais obligé de modifier HTML, CSS et JavaScript souvent en tâtonnant et de recommencer les tests jusqu’à trouver la solution : ce qui était long et fastidieux.

Heureusement pour nous, un outil vient nous aider : Weinre !

Cet outil est intégré dans la solution Cloud de PhoneGap. Il permet d’analyser son application Web à distance ! Et cela très facilement ! Pour cela, rien de plus simple, télécharger le projet puis taper la commande suivante :

java -jar "DIRECTORY_PATH\weinre.jar" -httpPort 8081 -boundHost -all-

A partir de là, vous pouvez ouvrir sur votre navigateur de bureau deux liens :

Ensuite, il suffit d’ajouter ce bout de script en bas de votre page HTML (dans le tag BODY, évidemment) :

<!– —————————————————————— –>

<!– ————————– Weinre Part ————————— –>

<!– ——————— For debugging —————————— –>

<script type= »text/javascript » src= »http://youripaddress:8081/target/target-script-min.js#anonymous »></script>

<!– —————————————————————— –>


Et voilà ! Désormais, c’est à vous de jouer !

En vous rendant sur le lien http://127.0.0.1:8081/client/, vous ferez alors une liste de liens. Elle correspond aux pages qui se sont connectés sur notre serveur Weinre.

Nous pouvons cliquer sur l’un des liens et alors nous pourronsons naviguer dans l’explorateur de DOM et de CSS, le gestionnaire de ressources et la console JavaScript.

Et ce qui est pas mal, c’est que lorsque nous inspectons un élément DOM, l’élément est en surbrillance sur la page à distance !

Voilà comment installer et utiliser un outil tout simple qui va nous faciliter la vie.