jQuery et Ajax

Ajax

ajax_logo.png

Apparu en 2005, Ajax (Asynchronous JavaScript and XML) regroupe un ensemble de technologies déjà existantes, notamment HTML, JavaScript et XML. Avec Ajax, les applications web peuvent mettre à jour partiellement la page affichée par le navigateur sans avoir à recharger la page entière. L'interface graphique peut ainsi évoluer par petits bouts, devenant ainsi plus interactive et reproduisant la sensation d'utiliser une application type client lourd. Nous parlons alors d'applications RIA (Rich Internet Applications). Le terme "Asynchronous" signifie que l'exécution du JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur est "gelé" en attendant la réponse du serveur.

Les modes d’Internet Explorer

Même si - espérons le - Internet Explorer 6 ne sera bientôt plus que de l'histoire ancienne (de celles que les anciens informaticiens raconteront à leurs petits enfants pour leur faire peur ) ; les nouvelles versions d'Internet Explorer, et même la très attendue version 9 d'Internet Explorer, amènent leurs lots de "modes" destinés entres autres à garantir la compatibilité ascendante avec les anciennes versions.

Cet article du IEBlog explique ces différentes modes (Browser Mode et Document Mode) et leur dérivation IE7, IE8, IE9 et les façons de les détecter.

Debogguer sous IE6+ (suite)

En rapport avec l'article précédent sur le sujet, j'ajoute ma pierre à l'édifice. En effet, pour débugger sous IE6, j'ai utilisé le Microsoft Script Debugger, cependant, j'ai souvent été confronté au fait qu'une fois celui-ci lancé, mon navigateur plantait et du coup j'étais obligé de tout recommencer à chaque fois (clôture d'IE et de MSD par le taskmanager).

Du coup, j'ai cherché une autre solution, et j'ai pensé à Visual Studio, dans l'article précédent il était précisé que Visual Studio est payant, ce qui est vrai. Cependant, il existe des versions gratuites dites "express" qui permettent un développement rapide d'applications. Et il existe particulièrement la version Visual Web Developer 2008 Express Edition (téléchargeable ici).

J'ai donc installé cette version. Après un redémarrage de ma machine j'ai cherché comment utiliser le debugger avec mon application. Et au lieu que tout le monde galère ou fasse sa recherche sur Google, voici ma recette.

Premièrement il faut créer un nouveau site web (choisir un site vide) dans Visual Web Developer 2008 Express Edition (appelé par la suite VWDEE). Ensuite, j'ai activé la barre d'outils du débugger (Affichage -> Barre d'outils -> Déboguer), il faut ensuite cliquer sur la petite flèche verte pour activer le débuggeur, celui-ci lance le navigateur par défaut. Si votre navigateur par défaut est Firefox, une petite démarche supplémentaire est à faire. A savoir, arrêter le débuggeur. Et dans l'explorateur de solutions, faire un clic droit sur le projet de site web qui vient d'être créé et cliquer sur "Naviguer avec...", et donc il faut choisir le navigateur pour les tests (dans notre cas IE).

Une fois ceci effectué, notre Internet Explorer est lancé en mode debug et il suffit de saisir l'adresse de la page à tester pour que la page s'ajoute dans WSDEE avec les fichiers de scripts associés. Il est possible alors de poser des points d'arrêts dans les fichiers javascript.

Les raccourcis sont les suivants :

  • F9 - ajouter/supprimer un point d'arrêt sur la ligne courante
  • F10 - pas à pas principal
  • F11 - pas à pas détaillé
  • Shift + F11 - pas à pas sortant
  • F5 - Continuer jusqu'au prochain point d'arrêt

Autre petite astuce, le survol d'une variable permet une inspection de celle-ci.

J'espère que cet article vous servira pour un debuggage plus efficace sous Internet Explorer

Debogguer sous IE6+

Pour ceux qui ont l'inénarrable chance de devoir debogguer sous IE6, qui ont besoin des fonctionnalités non couvertes par firebug lite, et qui n'ont pas la possibilité d'utiliser VisualStudio, il reste une possibilité gratuite : utiliser le Microsoft Script Debugger.
Il faut utiliser le fichier scd10en.exe qui installe un fichier mdm.exe dans le répertoire WINDOWSsystem32
Ce fichier est disponible dans mon partage public ou sur le web (attention aux virus).

Ne pas oublier dans les options d'IE6 de désactiver la case à cocher "Désactiver le débogage des scripts (Internet Explorer)"
(Menu Options Internet / Onglet Avancé / groupe "Navigation").

Théoriquement, une erreur javascript suffit à déclencher l'ouverture de la fenêtre du debugger. Dans le cas contraire, on peut forcer son ouverture via le mot clef debugger dans le code source javascript de la page à déboguer.

Noter que le mot clef debugger déclenche sous firefox l'ouverture des debuggers classiques (Venkman et Firebug).

Quelques trucs complémentaires :

1) Ce soft est très fragile : lors de déboguages répétés, il faut vérifier à intervalles réguliers s'il ne reste pas un process mdm.exe dans la liste des tâches et le tuer manuellement.

2) La console est "spéciale", si l'on saisi un objet ou une fonction et qu'on demande son affichage, la console affiche juste un saut de ligne.
Pour afficher le type de l'objet rajouter +"" de façon à forcer la création d'une chaîne.

Par exemple maFonction+""
donne [Function]

Pour afficher les propriétés d'un objet, utiliser la bonne vieille fonction dp dans votre console.

function dp(obj) {
for (var i in obj) {
str+=i+": "+obj[i]+" n";
}
return(str)
}

Qu'on utilise avec l'appel


dp(monObjet)