Tips & tricks

Débugguer une page web sur iOS avec Windows et Weinre

17 Nov , 2014  

Comment tester une page web, ou une application web , sur un périphérique iOS. L’idéal est évidemment d’utiliser le débogage à distance disponible via Safari (depuis Safari 6), mais si l’on n’ a pas de Mac sous la main c’est malheureusement impossible. Heureusement il reste Weinre! Développé avant que le débogage à distance soit disponible de manière simple et systématique, il demeure aujourd’hui toujours particulièrement utile.

Note : il existe d’autres alternatives telles Adobe Edge Inspect, mais ce dernier n’est d’une part pas totalement gratuit, et il comporte certaines restrictions.

Installation

L’installation nécessite que Node.js soit préalablement installé sur votre poste.

Pour lancer l’installation lancer la commande suivante depuis l’invite de commandes Windows:

[bash gutter=”false” padlinenumbers=”10″] npm -g install weinre [/bash]

Utilisation

Une fois Weinre installé, il faut lancer le serveur et lui lier une ou des adresses IP des machines pouvant y avoir accès.  Nous souhaitons que le serveur soit accessible depuis l’ordinateur sur lequel nous allons debugger notre code ainsi :

[bash gutter=”false” padlinenumbers=”10″] weinre boundHost -all- [/bash]

Le serveur est lancé comme vous le confirme l’invite :

Rendons-nous maintenant sur le serveur , ici http://localhost:8080 (port défini par défaut),

Nous avons d’une part le lien vers notre interface Weinre de deboggage :

screen3

ainsi le script que nous devons ajouter aux pages que nous souhaitons déboguer, qu’il nous suffit de copier/coller dans les pages à tester:

screen5

Ouvrons maintenant la page de débogage client dans le navigateur, en allant à l’url http://localhost:8080/client/#anonymous

En haut le menu des outils disponibles.

Dans la partie “Clients” s’affiche le périphérique sur lequel tourne le serveur Weinre. Dans la partie “Targets” , s’affiche la liste des périphériques qui sont actuellement sur la page que nous souhaitons tester. Si plusieurs périphériques ont affichés (par exemple nous ouvrons notre page sur un iPad et un mobile Android), sélectionnez celui qui vous intéresse. Le lien devient alors de couleur verte tout comme celui du client auquel il est associé.

Si vous inspectez les éléments de la page via l’interface, vous pouvez constater que lorsque vous sélectionnez un élément, il s’affiche en surbrillance sur votre périphérique de test (cf capture ci-dessous), et que les infos le concernant s’affiche dans les panneaux correspondants.  Il ne reste plus qu’à utiliser les outils disponibles dans Weinre pour inspecter et tester la page, tout comme vous le feriez avec Firebug (ou identique).

screen7

Conclusion

Comme vous pouvez le constater l’utilisation est très simple et rapide. Évidemment  cela ne remplace pas le débogage distant avec Safari (pour iOS) ou Chrome (pour Android), ou via des émulateurs, mais pas mal de problèmes peuvent déjà ainsi résolus et permettre de palier à l’absence d’un Mac. Par ailleurs, onn peut également l’utiliser pour tester des applications développées avec Cordova.


One Response

  1. … est une solution plus trop recente mais qui a le merite de fonctionner partout, facilement et surtout sur Android browser. Celui-ci va creer une page web avec un webkit-debugger-like, qui lui est connecte via un websocket sur le site que vous etes en train de deboguer, vous permettant a la fois d’avoir une console mais aussi une inspection du DOM. Et ca, c’est vraiment chouette.

Leave a Reply

Your email address will not be published. Required fields are marked *

*