Tester

JSLint récupère un code JavaScript et l'analyse.
S'il rencontre un problème, il retourne un message et l'emplacement dans la source. Le problème n'est pas nécessairement une erreur de syntaxe, même si c'en est souvent une. JSLint regarde aussi (optionnellement) les conventions de formatage et les problèmes de structure. Il ne permet pas de savoir si le code est correct, mais offre un autre regard sur le code.

JsUnit est un framework de test unitaire pour le JavaScript coté client. C'est essentiellement un portage de JUnit pour JavaScript. Une plate-forme d'automatisation des tests sur différents navigateurs et différents OS est aussi inclue.

SugarTest facilite l'écriture de tests JavaScript élégants et compréhensibles. Son API est inspirée à la fois de RSpec, Shoulda et jQuery.

YUI Test est une librairie de test pour le JavaScript coté client (navigateur). En l'utilisant, vous pouvez facilement ajouter des tests unitaires dans vos scripts.

Disponible en extension Firefox, script GreaseMonkey ou commande Ubiquity, Obtrusive JavaScript Checker parse une page Web et surligne les balises événements (ce qui est contraire à l'aspect non intrusif de JavaScript).

Un framework de tests JavaScript. JSpec peut être utilisé de différentes façons. Via le terminal avec Rhino, dans le navigateur en utilisant le DOM ou la console ou encore avec le framework de test JavaScript en Ruby, tournant en tâche de fond et traçant les résultats dans la console.

Crosscheck est un framework open source de test de vos scripts dans les navigateurs. Il vous permet de vérifier que vos scripts fonctionneront dans différents navigateurs (entre autre Internet Explorer et Firefox) mais sans avoir à les installer.

JSLitmus est un outil léger pour effectuer des tests de performance sur vos scripts.

Librairie de tests pour JavaScriptMVC. Il fourni des simulations d'événements, des tests unitaires, des outils AJAX et une console.

Une extension Firebug de tests unitaires JavaScript.

Débugger

Javascript Debug Toolkit est un plugin Eclipse pour débugger JavaScript sur différents navigateurs. Il peut débugger sur Internet Explorer, Firefox, Safari, Chrome, Opera et même sur des navigateurs mobiles.

L'un des plus populaires outils de développement. Firebug est une extension de Firefox qui permet d'éditer, de débugger, de contrôler le CSS, le HTML et le JavaScript directement sur une page Web. Il offre une console avec de nombreuses fonctionnalités, entre autres, une visualisation des appels AJAX, un interpréteur JavaScript et un explorateur du DOM. Vous pouvez utiliser Firebug Lite sur IE, Opera et Safari.

Venkman offre un environnement de débuggage puissant pour les navigateurs basés sur Gecko. Il est disponible comme extension pour Firefox et Mozilla. Il peut être utilisé en mode graphique ou console. Ses fonctionnalités, telles les points d'arrêt, l'inspecteur de pile d'appels, l'inspecteur de variables ou d'objets sont disponibles en mode graphique ou console et vous permettent de travailler selon votre convenance et vos habitudes.

NitobiBug est un outil d'accès aux objets JavaScript basé sur le navigateur (similaire à Firebug). Il peut être utilisé dans différents navigateurs (IE6+, Safari, Opera, Firefox) et offre un outil stable et puissant pour développer des applications AJAX riches.

DamnIT est un service gratuit qui vous envoie un email quand un utilisateur rencontre une erreur JavaScript sur votre site.

JS Bin est une application Web en ligne spécialement conçue pour aider les développeurs JavaScript à tester leur code dans différents contextes et à le débugger collaborativement. Vous pouvez donc éditer le HTML et le JavaScript en ligne et le tester. Une fois que c'est fait, vous pouvez le sauvegarder et l'envoyer sur un serveur pour la gestion des versions et l'aide.

La plupart des développeurs utilisent principalement alert() pour obtenir différentes informations lorsqu'ils débuggent leurs scripts. Blackbird offre un moyen simple de se connecter à une console attractive pour y afficher leurs messages, les voir et les filtrer.

JSON Formatter a été créé pour aider au débuggage. Comme le format JSON est souvent codé sur une seule ligne, cela devient vite compliqué de le lire. Cet outil formate les objets JSON pour les rendre plus faciles à lire.

Faux Console est un script qui simule une console de débuggage pour IE. Si vous écrivez du code JavaScript, vous avez certainement besoin de le débugger en même temps que vous l'écrivez.

Contrôler les requêtes HTTP

Fiddler est un proxy de débuggage qui récupère tout le trafic HTTP(S) entre votre ordinateur et Internet. Vous pouvez inspecter tout le trafic HTTP(S), créer des points d'arrêt et modifier les informations entrantes ou sortantes.

TamperData est une extension Firefox pour tracer et modifier les requêtes HTTP(S). Vous pouvez l'utiliser pour tester la sécurité d'applications Web et tracer les requêtes et les réponses.

Cet outil vous permet de visualiser les en-têtes HTTP d'une page. Vous pouvez l'utiliser pour débugger une application Web, vérifier quel type de serveur Web le site utilise et voir les cookies envoyés par le serveur.

Documenter

jGrouseDoc permet de générer une documentation de l'API basée sur les commentaires placés dans le code. Cet outil vous permet de documenter tout ce dont vous avez besoin, pas uniquement les variables et les fonctions, mais aussi les classes, les interfaces, les espaces de noms etc. En plus, vous pouvez générer la documentation quel que soit le framework utilisé, vous documentez votre code comme vous en avez envie, pas comme pourrait l'imposer un framework ou un autre outil.

Un générateur de documentation pour JavaScript. Ecrit en JavaScript, il génère automatiquement la documentation selon un formatage multipages HTML (ou XML, JSON ou n'importe quel format texte) en fonction des commentaires du code source JavaScript.

Compresser

Un compresseur de code JavaScript en ligne. Il vous permet de compresser votre code avec différents algorithmes (JSMin et Packer). Les fichiers compressés sont idéaux pour les environnements de production car ils réduisent leur taille de 30 à 90%. L'essentiel de la compression consiste à retirer les espaces, retours chariots et commentaires inutiles pour le navigateur et les visiteurs.

Un outil en ligne qui rassemble plusieurs fichiers JavaScript en un seul.

Un utilitaire en ligne de commande Java qui permet de réduire la taille du code JavaScript et du coup, diminue les temps de chargement par les navigateurs. Le compresseur Dojo se base sur Rhino, le moteur JavaScript du projet Mozilla. De ce fait, ce compresseur prend mieux en compte le contexte d'une correspondance que les outils basés sur les expressions régulières.

Le compresseur YUI qui, au-delà de supprimer les espaces et commentaires, réduit les noms des variables au minimum de façon sure, y compris pour l'utilisation de commandes comme eval() ou with (bien que la compression n'est pas optimale dans ces cas). Le gain peut aller jusqu'à 20% comparé à JSMin.

Compresse et réduit en ligne le code JavaScript.

Formater

Ce formateur de code rend vos scripts compressés ou désordonnés plus lisibles et correctement indentés.

Editeurs et EDI

Aptana Studio est un environnement de développement Web complet, il permet la complétion et le débuggage de JavaScript, une assistance dans l'écriture du code HTML/CSS/JavaScript et reconnait les principales bibliothèques JavaScript. L'assistance de code JavaScript est aussi possible sur vos pages !

Komodo Edit est un éditeur open source gratuit qui apporte l'auto-complétion, l'aide à la syntaxe, le support de différents langages de programmation, la coloration syntaxique, la vérification de syntaxe et plus. L'un des principaux avantages de Komodo Edit est sa possibilité d'extension. Vous pouvez retrouver de nombreuses extensions utiles au développement JavaScript comme : l'extension JSLint pour Komodo, le débuggeur JavaScript Venkman etc.

Spket IDE est un puissant IDE pour le développement JavaScript et XML. L'éditeur est particulièrement efficace pour le développement avec JavaScript, XUL/XBL et Yahoo ! Widget. L'éditeur JavaScript propose la complétion de code, la coloration syntaxique et des rappels de syntaxe pour aider les développeurs à coder efficacement. Spket est gratuit pour une utilisation non commerciale.

Autres outils

Google's AJAX APIs Playground charge des exemples de code des API JavaScript de Google (Maps, Search, Feeds, Calendar, Visualization, Language, Blogger, Libraries, Earth, etc) que vous pouvez éditer et exécuter pour voir ce dont sont capables ces API. Vous avez aussi la possibilité de sauvegarder et d'exporter vos codes. La sauvegarde permet de garder une trace de votre code pour retravailler dessus plus tard, l'exportation vous permet de récupérer le résultat et de le stocker sur votre site.

Source la plus populaire pour vérifier la compatibilité sur différents navigateurs des propriétés CSS2, CSS3, noyau DOM, DOM HTML, DOM CSS, événements DOM, modèle d'affichage CSS et HTML5.

Le convertisseur HTML vers JavaScript récupère les balises et converti la page en instructions document.write() utilisables dans le code JavaScript.

Glimmer est une application de bureau qui exploite la puissance de jQuery pour vous permettre de créer des éléments interactifs sur vos pages Web. Il vous permet de créer des galeries d'images, des menus déroulants de navigation, des effets de survol ou d'autres animations personnalisées.

Utilisez cet outil pour créer des collections de fonctions qui se chargeront lorsque la page sera chargée.

Outil en ligne pour créer des bookmarklet (marque-pages scriptés) depuis une fonction JavaScript.

Un outil en ligne pour créer vos propres expressions régulières.

Autres extensions pour les navigateurs

L'extension Web Developer ajoute une barre d'outils et des options dans le menu contextuel du navigateur. Parmi les fonctionnalités, citons par exemple la validation du code HTML/CSS, la récupération des erreurs JavaScript/CSS, la visualisation de la structure de la page, le test des formulaires, la modification du code HTML/CSS à la volée, l'inspection des en-têtes HTTP...

Opera Dragonfly est un environnement de débuggage multi environnement. Vous pouvez l'utiliser pour débugger JavaScript, inspecter et éditer le code HTML/CSS et voir les erreurs que ce soit sur votre ordinateur ou votre mobile.

La Developer Toolbar d'Internet Explorer offre divers outils pour monitorer rapidement vos pages Web.

Les aides-mémoire

Cet aide-mémoire est conçu comme une feuille de rappels et de références. Elle liste les méthodes et fonctions de JavaScript, inclue la syntaxe des expressions régulières et une vue d'ensemble de l'objet XMLHttpRequest.

Cette feuille de référence résume les principales caractéristiques du noyau JavaScript (JavaScript Core), dont les conventions de nommage, les types de variables, les structures de contrôle et les fonctions principales.

Cet aide-mémoire de 6 pages contient la référence complète de l'API jQuery. Les descriptions sont détaillées et contiennent des exemples de code.

Liste des principales propriétés et fonctions de la librairie jQuery 1.3.

Une référence des sélecteurs de la librairie jQuery.

La documentation pour les classes Core, Native, Class, Element, Utilities et Request de la bibliothèque Mootools 1.2.

Liste des principales propriétés et fonctions de la librairie Dojo 1.3.

Liste des principales propriétés et fonctions de la librairie Prototype 1.6.0.2.

Conclusion et remerciements

N'hésitez pas à proposer d'autres outils dans les commentaires pour enrichir cette liste !
6 commentaires Donner une note à l'article (5)

Autres articles de la série :

Un grand merci à Kerod pour sa relecture avisée et ses conseils précieux !