Valence (Firefox Tools Adapter)

Valence (anciennement Firefox Tools Adapter) est un module expérimental qui permet aux outils de développement de Firefox de déboguer un plus grand éventail de navigateurs et plus uniquement les navigateurs Firefox, Firefox pour Android et Firefox OS.

Les cibles de débogage de départ sont Chrome sur Android et Safari sur iOS.

Installation et configuration

Installation de Valence

Si vous utilisez Firefox Developer Edition (n'importe quelle version) ou Firefox 37 ou plus récent (n'importe quel canal), Valence est installé automatiquement lorsque vous ouvrez WebIDE. Vous pouvez donc sauter cette étape.

Sinon, installez la dernière version pour votre plate-forme ici.

Configuration de Chrome sur Android

Valence requiert Chrome 37.0 ou plus récent. Si vous avez installé Chrome et Chrome beta et que les deux sont ouverts lorsque vous connectez les outils de développement, vous ne verrez les onglets que d'un seul navigateur.

Vous avez besoin d'autoriser le mode développeur ainsi que le débogage USB sur votre appareil. Suivez ces instructions pour activer le mode développeur.

Configuration de Safari, Firefox, et autres WebViews sur iOS

Valence a été testé avec Safari sur iOS 6, 7 et 8 ainsi que sur le simulateur iOS de Mac OS X. Le même code supporte le débogage de Firefox pour iOS et les autres WebViews intégrés sur iOS ou sur le simulateur iOS.

Vous avez besoin d'activer le « developer support » sur votre appareil. Pour cela, suivez les instructions sur cette page (la section "To enable Web Inspector on iOS").

Le support iOS utilise le ios-webkit-debug-proxy de Google et son fork ios-webkit-debug-proxy-win32 sur Windows. Aucun réglage spécial n'est nécessaire sur Mac, Linux et Windows Vista (ou plus récent), Valence contient et gère le proxy. En revanche sur Windows XP il est nécessaire de télécharger Microsoft PowerShell, qui est requis par le module complémentaire. Sur Windows vous aurez un pervertissement de firewall la première fois que le proxy est lancé, vous aurez alors besoin de cliquer sur "Autoriser". Notez que sur Windows, les drivers de l'appareil sont installés par iTunes, donc vous avez besoin de l'avoir d'installé, ou du moins les applications "Apple Mobile Device Support" et "Apple Application Support".

Configuration de Chrome pour ordinateur

Valence requiert Chrome 37.0 ou plus récent. Vous avez également besoin de lancer Chrome avec un drapeau spécial, étant donné que le débogage distant n'est pas activé par défaut sur Chrome.

Le drapeau important est : --remote-debugging-port=9222. Voici la page qui contient les informations sur comment lancer Chrome avec ces drapeaux.

Certains autres drapeaux peuvent être également utile si vous désirez lancer le processus avec un profil de Chrome différent : --no-first-run, --no-default-browser-check, et --user-data-dir

Par exemple sur OSX, vous pouvez utiliser la commande suivante pour lancer une copie débogable de Chrome :

$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')

Si vous cliquez sur le bouton de la barre d'outils et que rien ne se passe, vous n'avez probablement rien qui tourne sur le port 9222. Vérifiez la Console du navigateur pour voir ce qui a mal tourné.

Lancer Valence

Valence fonctionne en s’ajoutant à la fenêtre WebIDE qui est utilisée pour se connecter à Firefox OS.

1. Connecter votre appareil: Branchez le, ouvrez votre navigateur et naviguez vers la page sur laquelle vous voulez travailler. Si vous utilisez OS X et que vous avez installé Xcode vous pouvez également utiliser le simulateur iOS.
2. Lancez WebIDE : Lancez WebIDE depuis le menu "Développement" de Firefox.
3. Sélectionnez votre environnement : Ouvrez la liste des environnement sur la droite de la barre d'outils. Dans la section "Autres", choisissez "Safari, Firefox, and other WebViews on iOS" ou "Chrome Desktop". Pour les appareils Android, choisissez "Chrome on Android" dans la section "Périphériques USB". Il est possible que vous ayez à accepter une option de débogage depuis votre appareil.
4. Choisissez votre onglet : Dans la liste des applications sur la droite de la barre d'outils, sélectionnez l'onglet que vous voulez déboguer.
5. Commencez à déboguer : Cliquer sur le bouton de Debug (celui qui ressemble à une clé à mollette) pour vous connecter aux outils de développement.

Faites-nous part de vos retours : Pour reporter tous les problèmes que vous rencontrez, vous pouvez utiliser l'issue tracker du projet GitHub . Il y a encore une montagne de fonctionnalités à ajouter et votre avis nous aidera à nous concentrer sur les plus importantes !

FAQ

Qu'y a-t-il sous le capot ?

Ce module est une nouvelle implémentation du protocole des outils de développement. Plutôt que de l'interfacer directement avec du contenu, le protocole dialogue avec le protocole de débogage distant de Chrome et iOS. Cette implémentation est faites à l’intérieur de Firefox et utilisée en interne par les outils de développement.

Quand est-ce que ce sera prêt ?

Nous ne savons pas encore ! Nous travaillons dur et nous voulons montrer notre progression. Quand nous serons sûr que Valence est prêt à être utilisé pour du développement à plein temps, nous ferons une release complète. En attendant, la démo sera mise à jour régulièrement.

Comment puis-je contribuer ?

La page du projet GitHub contient toutes les instructions sur comment s'impliquer dans le code. Vos retours sont également précieux : Contactez nous via twitter à @FirefoxDevTools, via les issues GitHub, ou via UserVoice.

Est-ce la même chose que remotedebug.org?

Non. Le but final du projet remotedebug.org est de fournir un protocole unifié pour que les outils tiers puissent communiquer avec tout les navigateurs en standardisant une version du protocole Chromium. Nous ne connaissons aucun constructeur de navigateur engagé à unifier les protocoles.

Avec les modules complémentaires des outils de développement, nous n’essayons pas de résoudre le problème de protocole standard. Nous faisons juste ce que nous avons besoin de faire pour que les outils de développement de Firefox soient disponibles avec ces navigateurs. Notre outil est basé sur le protocole des outils de développent de Firefox plutôt que sur le protocole Chromium.

Bien que les premières versions du bridge du protocole de remotedebug.org’s ont été une de nos sources d'inspiration, nous avons orienté l'idée dans une autre direction.

Est-ce que les protocoles en aval ne changent pas en permanence ?

Si et nous trouvons que c'est très bien comme ça. En tant que constructeur, nos outils de développement évoluent à un rythme élevé. Nous étendons nos protocoles en même temps que nous développons de nouvelles fonctionnalités. Nous sommes engagés à mettre à jour le Firefox Tools Adapter à mesure que les protocoles changent. C'est une des raisons pour lesquelles nous distribuons cet outil sous forme de modules complémentaires et non sous forme de nouvelles fonctionnalités intégrées. Nous voulons que les mises à jours vers les nouvelles versions de protocoles aillent aussi vite que nous pouvons les coder.

Ce n'est pas un travail facile, mais nous accordons tellement d'attention à ce problème, que nous allons faire ce qui est nécessaire pour que le projet continue de fonctionner.

Puis-je utiliser ce protocole moi-même pour cibler plusieurs navigateurs avec mon outil ?

Ce n'est pas un des buts du projet de l'adaptateur. Mais s'il y a une grosse demande, nous pourrons le considérer - Contactez nous pour plus de détails.

Obtenir de l'aide

Allez dans la salle  #devtools surIRC et nous tenterons de vous aider.