Sommaire
- La console JavaScript
- Les avertissements de JavaScript strict
- Le contrôle des cookies
- La visionneuse de source avec mise en valeur par couleur
- Afficher la source de la séléction
- Infos Page
- Le débogueur JavaScript
- Les en-têtes HTTP
- Le DOM Inspector
- Le gestionnaire de cache
- Composer, l'éditeur HTML de Mozilla
- Conclusion
- Version originale d'Henrik Gemal
- © Copyright 2003 Henrik Gemal
- Publiée en anglais le 11 avril 2003 sur Netscape Devedge
- Traduction avec autorisation de l'auteur parue le 30 avril 2003
- Dernière mise à jour le 4 mai 2003
Documents proches
Utiliser Mozilla pour tester et déboguer les sites Web
Mozilla est un fantastique outil à utiliser dans le développement de sites et d'applications Web. Pas lui-même comme outil de développement, comme un éditeur, mais comme outil de test et de débogage.
Dans cet article, je décrirai quelques fonctions très cool de Mozilla qui vous autorisent à rapidement trouver et déboguer les erreurs de vos sites et applications Web.
En écrivant cet article, j'ai utilisé Mozilla 1.4a (en anglais) et Internet Explorer 6.0 SP1 sur Windows XP.
Toutes vos réactions seront les bienvenues, n'hésitez pas à me contacter (en anglais) [Traducteur français].
La console JavaScript
Beaucoup des erreurs présentes dans les pages et applications Web actuelles sont dues à des erreurs de JavaScript. La plupart du temps ce sont des erreurs très simples. C'est, à mon avis, la raison la plus commune pour laquelle les sites ne fonctionnent pas dans Mozilla. Mais ces erreurs pourraient facilement être évitées.
Avec Internet Explorer, si vous l'avez configuré correctement, vous êtes en présence d'une boîte de dialogue qui ne sert pas à grand chose et affirme que « la page contient de erreurs ». La boîte ne vous laisse pas copier l'erreur dans le presse-papiers. Pour mieux déboguer avec Internet Explorer, vous pouvez installer le Microsoft Script Debugger qui est un environement de débogage de script dans Internet Explorer.
Avec Mozilla d'un autre côté, vous avez la console JavaScript. Toutes les erreurs JavaScript sont recueillies ici. Ainsi, si vous gardez la console JavaScript ouverte pendant que vous testez votre site, vous pouvez voir, à la volée, s'il y a des erreurs de JavaScript. C'est un outil indispensable pour développer des sites et applications Web.
La console JavaScript rapporte l'erreur et le nom du fichier ainsi que le numéro de ligne. En plus, le contexte de l'erreur est montré. Il devient alors très facile d'obtenir un indice sur la localisation de l'erreur et sur ce qui l'a causé.
Vous pouvez cliquer à droite sur chaque erreur et la copier dans le presse-papiers. La console JavaScript aurait besoin de pas mal d'améliorations. Vous ne pouvez pas enregistrer l'intégralité d'un fichier et il a des problèmes avec l'encapsulation (wrapping).
La console JavaScript peut être lancée via le menu Tools -> Web Development -> JavaScript Console (Outils > Développement Web > Console JavaScript).
Les avertissements de JavaScript strict
Les avertissements de JavaScript strict sont des messages produits à l'intérieur du moteur JavaScript, qui est dans le noyau du navigateur. Les avertissements de JavaScript strict sont produits dans tous les navigateurs – Mozilla, Internet Explorer et Opera. Mais seul Mozilla les montre.
Les avertissements de JavaScript strict sont des avertissements du moteur Javascript au sujet de quelques malfaçons dans le code Javascript du côté client. Ces malfaçons, à la différence des erreurs JavaScript, n'arrêtent pas l'exécution de la page Web. Mais elles la ralentissent un peu, puisqu'elles produisent une exception à l'intérieur du moteur Javascript.
Dans les navigateurs non Mozilla, ces exceptions ne sont pas fournies au développeur, mais avec Mozilla vous pouvez accéder à ces avertissements. Ça vous met dans le siège du pilote pour faire un code Javascript valide à 100 % !
Une erreur commune en JavaScript est de déclarer une variable deux fois :
var response = true;var response = false;Ceci produira un avertissement de JavaScript strict disant :
La manière correcte est naturellement :
var response = true;La console JavaScript peut être activée dans les nocturnes via le menu Edit -> Preferences -> Debug -> Show Strict JavaScript Warnings. Si vous possédez une version officielle, vous pouvez utiliser la préférence javascript.options.strict qui peut être assignée en entrant about:config dans la barre d'adresse et en appuyant sur la touche Entrer (Enter/Return).
Plus d'infos…
- Tackling JavaScript strict warnings, par Alex Vincent et Robert Ginda, in JavaScript Kit.
Le contrôle des cookies
La plupart des sites et applications Web actuels utilisent des cookies. Déboguer les cookies peut être un problème. Mais pas si vous utilisez Mozilla.
Dans Internet Explorer, vous ne pouvez pas voir les cookies en cours. Au moins pas depuis Internet Explorer. Ainsi, la seule possibilité que vous avez depuis Internet Explorer est de supprimer tous les cookies présents. Si vous voulez supprimer tous les cookies provenant d'un domaine spécifique, vous devez détruire manuellement les fichier de cookie d'Internet Explorer qui est situé dans le dossier %USERPROFILE%\Cookies (pour Windows Xp). Depuis que les fichiers sont dans un format texte inconnu, je ne suis pas sûr que vous puissiez détruire ou éditer un cookie spécifique venant de tel site ou de tel domaine.
Avec Mozilla, c'est complètement différent. Vous avez la parfaite maîtrise sur les cookies. A la fois, lors de leur installation, puis ensuite. Vous pouvez vous servir du gestionnaire de cookies pour voir tous les cookies actuellement installés. Depuis ce gestionnaire de cookies, vous pouvez supprimer des cookies particuliers.
Ces deux navigateurs affichent des boîtes de dialogue pour garder la maîtrise des cookies qui doivent être acceptés et de ceux qui doivent être bloqués. Les boîtes de dialogue semblent à peu près identiques. Mais Mozilla est un peu meilleur. Il se rappelle l'état de l'afficheur d'informations sur les cookies. Si vous laissez la partie « More information » ouverte, elle restera ouverte la prochaine fois que cette boîte de dialogue apparaîtra. Dans Internet Explorer, vous devez presser le boutton « More information » à chaque fois.
La visionneuse de source avec mise en valeur par couleur
Un des dispositifs les plus utilisés des développeurs Web est la visionneuse de code source. Mozilla a quelques dispositifs de codage en couleur très sympa alors que vous devez aller voir ailleurs pour avoir la même chose dans Intenet Explorer.
L'application par défaut d'Internet Explorer pour afficher le code source est le bloc-notes (notepad.exe). Notepad est la plus simple application de tout l'environement Windows. Un très très simple éditeur de texte.
gemal.dk dans le bloc-notes (Notepad).Dans Mozilla, vous utilisez l'arengement dans l'outils d'affichage du code source qui est le codage par couleur. Cela fait qu'il est très simple d'avoir une vue d'ensemble de la structure du fichier HTML.
gemal.dk dans la visionneuse de source de Mozilla avec mise en valeur coloréeLe code source peut être affiché via le menu View -> Page Source (Affichage > Source Page).
Afficher la source de la séléction
Si vous vous servez de document.write dans votre JavaScript, alors vous êtes sûrement confronté à l'impossibilité de voir le contenu qu'il génère.
Le problème survient normalement quand vous rédigez des balises HTML depuis du JavaScript. Dans Internet Explorer, il est vraiment difficile de voir le HTML produit depuis les scripts. Vous pouvez voir le script lui-même. Le problème est normalement réglé en utilisant beaucoup d'alertes JavaScript.
Mais Mozilla a une très bonne fonction qui peut vous sauver de beaucoup d'alertes de commandes. Ça s'appelle « View Selection Source » (Voir la source de la sélection). Marquez la portion de contenu (texte, image, cadre, cellule…) dont vous voulez voir la source, faites un clic-droit et, dans le menu contextuel, cliquez sur « View Selection Source ».
Netscape 4 avait une option semblable. Là aussi des améliorations sont en chantier pour que dans la fenêtre d'affichage de la source il puisse être commuté entre le HTML généré et le HTML de la source.
Ci-dessous est présenté un exemple où le guillemet est à la mauvaise place, si bien qu'il est presque impossible de le trouver sans l'option d'affichage de la source de la sélection.
Infos Page
Internet Explorer et Mozilla ont tous deux la capacité de montrer les propriétés de la page courante.
Dans Internet Explorer, ça se fait via le menu Fichier -> Propriétés. L'information affichée est très limitée.
Dans Mozilla, vous avez accès à tout un bouquet d'informations sur la page courante.
Les Infos page peuvent être appelées via le menu View -> Page Info (Affichage > Infos page) – le deux logiciels permettent d'appeler cette fonction depuis le menu contextuel (clic-droit dans la page).
Le débogueur JavaScript
Venkman est le débogueur JavaScript de Mozilla. Venkman fournit un puissant environement de débogage JavaScript. Venkman est à la fois un GUI (Interface graphique) et une console de débogage. Des outils comme la gestion des breakpoint, l'inspection du Call Stack et l' inspection variable/object sont disponibles depuis l'interface utilisateur et comme la console de commandes, vous laissant travailler comme vous le sentez le mieux. La console interactive tient compte également de l'exécution d'un code JavaScript arbitraire. Les raccourcis clavier de Venkman sont les mêmes que dans les principaux environements de débogage et les utilisateurs de gdb devraient être familiers les commandes de Wenkman : break, step, next, finish, frame et where.
Le débogueur JavaScript supporte également le profilage. Le profilage peut être utilisé pour mesurer le temps d'exécution de vos JavaScripts.
Le débogueur JavaScript peut être lancé via le menu Tools -> Web Development -> JavaScript Debugger (Outils > Développement Web > Débogueur JavaScript).
Plus d'infos…
- Venkman, the new JavaScript Debugger for Netscape 7.x: Introduction to the JavaScript Debugger chez DevEdge, 4 octobre 2002, Ian Oeschger et Robert Ginda.
- La suite : Using Breakpoints in Venkman, 2 mai 2003, Ian Oeschger et Robert Ginda, toujours chez DevEdge.
- Venkman chez mozilla.org
- Venkman Development
- Venkman Walkthrough chez Mozilla.org
- Venkman 0.9.x Frequently Asked Questions
- Installer (sur un navigateur issu de Mozilla) le débogueur Wenkman 0.9.61 et son patch de francisation avec l'installeur d'Asbin.
Les en-têtes HTTP
Une des meilleurs extensions de Mozilla est le « Live HTTP Headers ». Cette extension vous donne la possibilité de voir les en-têtes HTTP qui sont échangées entre votre navigateur et le serveur Web. Si vous êtes par exemple entrain de déboguer un problème de cookie ou un problème d'en-tête MIME, vous pouvez voir tous les détails des en-têtes HTTP avec cette extension.
Une fois installé le « Live HTTP Headers » peut être lancé via le menu Tools -> Web Development -> Live HTTP Headers (Outils > Développement Web > Entêtes HTTP en direct).
Plus d'infos…
Le DOM Inspector
Le DOM Inspector est un outil qui peut être utilisé pour inspecter et éditer le DOM courant de n'importe quel document Web ou de n'importe quelle application XUL. La hiérarchie du DOM peut être pilotée en utilisant une fenêtre à deux ou trois volets de visualisation qui autorise une multitude de vues différentes du document et de tous ses nœuds. Vous pouvez aussi voir les feuilles de style (style sheets), les règles, etc., pas seulement le DOM.
Dans la capture d'écran suivante, vous pouvez voir un cadre rouge avec le texte « Home » mis en valeur. Ce texte est montré dans l'arborescence du DOM.
Le DOM Inspector peut être lancé via le menu Tools -> Web Development -> DOM Inspector. (outils > Développement Web > DOM Inspector).
Plus d'infos…
- DOM Inspector chez mozilla.org
- Introduction to the DOM Inspector chez Brownhen.com où vous pouvez installer le DOM Inspector sur votre navigateur basé sur Mozilla qui en serait dépourvu.
- Grayrest's Guide to the DOM Inspector for Web Developers.
- et sa traduction en français : DOM Inspector : Petit guide d'initiation, F. Constantineau.
Le gestionnaire de cache
Le gestionnaire de cache de Mozilla vous assure un plein accès au contenu de la mémoire et du cache. Vous pouvez voir toute sorte de détails sur toutes les enregistrements du cache. Il pourrait, par exemple, vous aider, comme développeur, à vérifier que les en-têtes envoyés par une application Web sont corrects.
Le gestionnaire de cache peut être lancée en saisissant about:cache dans la barre d'adresse et en appuyant sur la touche Entrer (Enter/Return).
Composer, l'éditeur HTML de Mozilla
La suite Mozilla comprend aussi un véritable éditeur HTML pour rédiger des pages Web. Cet article ne traite pas de Composer parce que la plupart des développeurs Web ont leur propre éditeur HTML préféré.
Conclusion
En tant que développeur Web, je ne peux plus vivre sans Mozilla. Les outils de développement Web et de débogage inclus dans Mozilla sont d'excellents outils pour déboguer et tester sites Web et applications.
Toutes vos réactions seront les bienvenues, n'hésitez pas à me contacter (en anglais).
[Le Traducteur français]
Seulement valide en HTML 4.01 Transitional à cause de l'attribut target :