Caractéristiques :

WebDevHelperLogo Cet outil s'adresse aux développeurs Web utilisant Internet Explorer, tout comme FireBug permet aux développeurs de page web de faire du debug sous FireFox. L'outil est porté par Nikhil Kothari, architecte Microsoft, aussi responsable du Script#.

Page :

  • Inspecteur DOM
  • Screen-shot
  • Informations de la page (meta-data, tags, resources)

Réseau :

  • Log des flux HTTP (page web, ou ajax)
  • Visualisation du détail des requêtes et réponses
  • Filtres sur URL

Scripts :

  • Analyse des erreurs de script (call stack comprise)
  • Console script
  • Immediate window (permet d'écrire et tester immédiatement du script)
  • Explorateur de classes pour les scripts

ASP.Net :

  • Visualisation du view state (raw ou décodé)
  • Visualisation et édition du cache (on peut ainsi enlever certains éléments au vu de tests)
  • Visualisation de la trace, et interception de celle-ci pour qu'elle ne soit pas directement dans le layout de la page

A l'usage

L'outil s'avère très orienté ASP.Net et Ajax.

Face à FireBug

firebug_logoLa plupart des développeurs Web faisant de l'ASP.Net disposent sur leur poste de travail simultanément de IE et de FireFox. La question n'est pas d'une course entre explorateurs web mais bien de tirer parti des outils à disposition. Dans ce cadre, a-t-on intérêt à utiliser l'un ou l'autre ou bien les deux à la fois ?

FireBug est bien plus abouti même pour débuguer de l'ASP.Net. Il est notamment d'une aide incroyable pour débuguer les css. Il permet en effet de voir l'arborescence des définitions css influent sur un élément mais permet aussi de voir dans le navigateur lui même les zones concernées. Et pour ce qui est de l'arbre DOM ou du javascript, rien à dire, c'est parfait.

Firebug est disponible depuis assez longtemps maintenant et bénéficie de cet historique.

Et les autres ?

Dragonfly (anciennement Opera Developer Tools), encore en version alpha possède déjà un débuggeur javascript, un inspecteur CSS, un utilitaire en ligne de commande, une console d'erreur, des onglets call stack, Thread log, Frame inspection, et le support Proxy. Un outil très joli et très prometteur. A quelques détails près, on est très proche de Firebug.

Web developer Toolbar est une autre extension pour firefox. Sous forme d'une barre d'outil, elle offre pas mal de possibilités. Comme un outil de désactivation (Cache, Java, Javascript, Meta redirect, Minimum font size, Page colors, popup blocker, referrers). Mais aussi des validateurs (CSS, Feed, HTML, Links, Section 508, WAI). Un Dom inspector, une console javascript, et un ensemble d'affichages d'informations (anchors, DIV, Tab etc.). Plus la manipulation des cookies (y compris par domaine). Assez pratique et offrant une interface différente de Firebug. Parfait pour du debug plus ponctuel.

 

Conclusion

Pour débuguer précisément des pages ASP.Net et de l'Ajax, mieux vaut avoir les deux. Firebug est clairement incontournable. Mais Web Development Helper est complémentaire et pourra vite s'avérer indispensable.

 

Télécharger Web development Helper :

http://projects.nikhilk.net/WebDevHelper/

Ou Firebug :

https://addons.mozilla.org/fr/firefox/addon/1843