B L utilisation d outils intelligents pour écrire du code valide Toutes les méthodes de développement, sans exception, incluent au moins une étape de test du code. C est parce que le code écrit par la plupart des développeurs ne fonctionne pas parfaitement dès sa première version, les auteurs de ce livre inclus. Peu importe quelles technologies ou quelles plates-formes vous choisissez, vous trouverez plusieurs outils sur le marché qui peuvent vous aider dans le test, le debug et le test de performance de votre application. Dans cette annexe, nous couvrirons quelques-uns des outils qui peuvent vous rendre la vie plus facile lors de l écriture des applications AJAX. AVOIR UN BON ÉDITEUR DE CODE Avoir un bon éditeur est la première étape pour augmenter l efficacité de votre codage. La liste des éditeurs de code est sans fin, et chaque programmeur (il ou elle) semble avoir ses propres préférences, ce qui fait que nous ne pouvons pas vous donner de recommandations définitives ici. Nous suggérons, cependant, que vous jetiez un œil à ce qui suit : PSPad est un éditeur libre qui sait comment faire ressortir la syntaxe pour tous formats de fichiers existants. Des plug-ins supplémentaires peuvent ajouter des fonctions d édition CSS et de contrôle orthographique. Cet éditeur est 1
disponible seulement pour la plate-forme Windows, et vous pouvez le télécharger depuis http://www.pspad.com. SciTE est un éditeur de code source libre basé sur le composant d édition Scintilla (http://www.scintilla.org), il est disponible pour les systèmes d exploitation basés sur Intel Win32 et les systèmes compatibles Linux avec GTK+. Vous pouvez voir des captures écrans et le téléchargez sur http://scintilla.sourceforge.net/scite.html. PHP Designer 2006 est un freeware de type PHP IDE avec un debugger intégré. Allez voir plus de détails à son sujet sur http://www.mpsoftware.dk. Il y a beaucoup d autres éditeurs, des commerciaux et des libres, et Google peut vous aider à trouver d autres bien meilleurs que ceux de la liste ici. Une fois que vous savez exactement ce que vous recherchez, la solution sera trouvée en quelques clics de souris. DEBOGAGE DE VOTRE CODE Alors que la méthode de débogage de code la plus populaire est l affichage de messages en utilisant alert, un grand nombre d outils sont disponibles lorsque de l efficacité est recherchée. La Console JavaScript disponible dans beaucoup de navigateurs web est peutêtre le premier outil que vous devriez personnaliser. La console JavaScript affiche les erreurs et les avertissements trouvés quand le code JavaScript fonctionne dans la page web. Accéder à cette fonction dans FireFox depuis le menu Outils Console JavaScript, dans Opera par Outils Avancé Console JavaScript, et dans Mozilla vous avez besoin de cliquer sur Outils Développement Web Console JavaScript. D autres navigateurs peuvent avoir cette fonction aussi. Notez que la Console JavaScript a des comportements différents dans chaque navigateur, et que la console attrapera les erreurs de toutes les pages web ouvertes. Les figures B.1 et B.2 montrent la même erreur interceptée par la Console JavaScript dans Firefox et Opera. 2
Figure B.1 - La Console JavaScript dans Firefox 1.5 Figure B.2 - La Console JavaScript dans Opera 8.5 L Inspection DOM est un outil très important qui montre le DOM de la page chargée. Cette fonction est apparue avec Mozilla (Outils Développement Inspection DOM). L Inspection DOM est fournie avec Firefox aussi, Mais il n est installé pas par défaut. Lors de l installation de Firefox, choisissez l installation personnalisée (au lieu de l installation Standard), et validez la case à cocher Outils Développement lorsque l on vous demande des composants additionnels. Parmi les fonctions très utiles de l Inspection DOM, il y a celles qui permettent de disséquer une page qui est générée dynamiquement sur le client et qui surligne dans une page web les nœuds que vous avez sélectionnés dans la fenêtre de l inspection. La figure B.3 montre l Inspection DOM en action, inspection de l application de discussion en ligne avec AJAX. 3
Figure B.3 - Fenêtre d inspection DOM de l application de discussion en ligne en AJAX avec Firefox Le Venkman Debugger est une arme lourde dans votre arsenal de débogage JavaScript. Il vous permet effectivement de debugger le code JavaScript, et cela inclut une fonction que l on peut espérer avoir de tout respectable débuggeur : la définition de point d arrêt, permettant l exécution du code dans une fenêtre de session interactive par la lecture de variables locales de données, et le traitement ligne par ligne à travers le code. Au moment de la rédaction du livre le Débuggeur Venkman est disponible pour Firefox 1.0 et 1.5, et peut être téléchargé depuis http://www.mozilla.org/projects/venkman. Fgure B.4, le Débuggeur Venkman en action, pour le débogage de l application de discussion en ligne en AJAX. 4
Figure B.4 - Débogage de l application de discussion en ligne en AJAX en utilisant le Débuggeur Venkman Le Débuggeur Venkman a aussi une option de code profiling, que vous pouvez utiliser pour analyser combien de fois, chaque code JavaScript a été exécuté et combien de temps cela a pris. Vous pouvez démarrer et arrêter la fonction de profiling par un clic sur le bouton Profile de la barre d outils, ou par la sélection de l option Collect Profile Data dans le menu Profile. Cependant dans le menu Profile vous pouvez choisir Clear Profile Data (que vous voulez utiliser après des modifications dans le code ou besoin d avoir de nouvelles données), et Save Profile Data. Lorsqu on sauvegarde les données du profiler, cela formatera l affichage suivant un type de fichier voulu. Le profiler collecte les données de tous les évènements JavaScript qui se sont produits dans toutes les fenêtres ouvertes du navigateur, ce qui fait que vous aurez besoin de descendre l ascenseur pour voir les fichiers et les fonctions qui vous intéresse. La figure B.5 montre un affichage de l exemple de démonstration de l application de tableau blanc partagé en AJAX (Reportez vous au livre électronique du tableau blanc partagé que vous pouvez trouver sur le mini-site de livre http://ajaxphp.packtpub.com). 5
Figure B.5 - Profiling de l application de tableau partagé en AJAX Le débogage JavaScript est aussi possible avec Internet Explorer, dans lequel vous pouvez avoir besoin d un débuggeur externe. En premier lieu, vous avez besoin de permettre le débogage, en dévalidant la case à cocher Outils Options Internet Avancés Navigateur Dévalide Débogage de script (Internet Explorer). Après avoir permis le débogage, vous avez besoin d un outil. Visual Studio (voir Figure B.6) est très puissant, et il supporte, parmi d autres fonctions le débogage du JavaScript. Visual Web Developer 2005 Express Edition est complètement disponible comme version d essai à http://msdn.microsoft.com/vstudio/express/vwd. Vous pouvez aussi utiliser le Débuggeur de script de Microsoft (le lien de téléchargement est si long que c est impossible de le saisir, mais vous pouvez facilement le rechercher depuis http://www.microsoft.com/downloads). 6
Figure B.6 - Débogage de l'application de discussion en ligne en AJAX en utilisant Visual Web Developer 2005 Express Edition Pour un script PHP côté serveur, vous pouvez utiliser un éditeur parmi plusieurs autres éditeurs PHP qui supportent cette fonction. Le plus puissant des IDE pour PHP est : Zend Studio, que vous pouvez acheter sur http://www.zend.com. D AUTRES OUTILS UTILES Web Developer Extension est un plug-in qui travaille avec Firefox, Flock, et Mozilla. Il inclut beaucoup de fonctions pour les développeurs web. La figure B.7 montre un des menus de Web Developer Extension. Vous pouvez télécharger Web Developer Extension depuis http://chrispederick.com/work/webdeveloper. 7
Figure B.7 - Web Developer Extension contient beaucoup de fonctions HTML Validator est un plug-in pour Mozilla qui valide si votre page web est compatible avec la norme W3C. Vous pouvez télécharger et installer ce plug-in depuis http://users.skynet.be/mgueury/mozilla. Le validateur affiche un simple symbole dans la barre de statut du navigateur montrant si la page est valide, et si vous double cliquez sur le symbole, une fenêtre comme celle dans la figure B.8 apparaît pour montrer les lignes qui ont un problème. 8
Figure B.8 - Google génère des avertissements pour la compatibilité W3C Checky est un autre validateur pour les navigateurs Mozilla, qui au contraire du validateur HTML, utilise les ressources en ligne pour réaliser la validation alors que l autre le réalise localement. Cependant, il supporte une validation pour une grande sélection de formats incluant HTML, XHTML, RDF, RSS, XML, et d autres encore. Vous pouvez télécharger le plug-in sur http://checky.sourceforge.net. DevBoi (http://devboi.mozdev.org) ajoute une barre sur le côté avec la documentation pour HTML, CSS, DOM, et XUL (XML User Interface Language). Vous pouvez choisir d installer la documentation localement, ce qui occupe 4 Mo, ou de laisser DevBoi exécuter le contrôle depuis des sources en ligne. Après l installation, le raccourci Ctrl + F9 exécutera le programme (Tools Zhluk.com DevBoid dans Firefox). La figure suivante montre l apparence visuelle de DevBoi: 9
Figure B.9 - DevBoi charge la page du W3C pour createattribute UrlParams (http://urlparams.blogwart.com) est un petit plug-in qui montre les paramètres POST et GET d une page web. Une fois installée, vous pouvez le montrer depuis View Sidebar UrlParams (Alt+U). Vous pouvez trouver ce plug-in très utile pour le développement web, grâce à ses paramètres POST/GET que vous avez à passer en arrière-plan. Dépendant de votre projet, vous voudrez jeter un œil à d autres plug-in pour FireFox, comme XSD Schema Validator (http://xsdvalidator.mozdev.org), XPather (http://xpath.alephzarro.com), et XPath Checker (http://slesinsky.org/brian/code/xpath_checker.html). 10
L UTILISATION DES OUTILS Ici débute les premières étapes pour l écriture et le débogage d un code efficace : Lorsque votre application ne fonctionne pas comme elle le devrait, la première étape à faire, est d ouvrir la console JavaScript. Le plus fréquemment, vous trouverez cette fenêtre remplie des erreurs des autres pages. Donc vous devrez l effacer et relancer le code qui pose problème. Si vous suspectez que le problème est du côté du serveur, alors contrôler le fichier de log d erreur. Ce fichier est par défaut installé dans Apache2/logs/error.log. Le passage de données en utilisant GET rend le débogage plus facile, parce qu il nous permet de tester simplement les scripts du serveur en les appelant directement depuis le navigateur. Cette technique a été montrée dans quelques études de cas. En montrant les messages du débogage utilisant alert dans JavaScript, ou l affichage (echo) et la sortie de PHP, tout cela sera efficace, et à peu d influence sur le nombre d outils de débogage que vous avez à votre disposition. Ce ne sont que quelques suggestions, et je suis sûr que vous en trouverez beaucoup plus pour vos propres projets, cela dépendant de la complexité du projet et de votre niveau de connaissance. 11