Debugging AJAX facile avec Firefox

Par NiKo le dimanche 26 juin 2005, 19:42 - Dev - Lien permanent

Peut-être cette astuce est-elle déjà archie connue de tous, mais moi je suis drôlement content de l'avoir trouvée : je développe beaucoup en AJAX ces derniers temps, et lorsque l'on injecte du contenu dynamique via javaScript dans un élément de l'arbre DOM, il est très difficile de voir le code source HTML du contenu injecté.

Heureusement, Firefox dispose d'un outil fort pratique : la possibilité de voir la source HTML de la sélection (menu contextuel clic-droit sur une selection dans une page). L'avantage de cette fonctionnalité est qu'elle affiche la source du contenu chargé post-traitement, c'est à dire notamment après nos fameuses injections ! D'ailleurs cela marche également avec le contenu généré par javaScript seul

Ce qui nous donne, en affichant normalement la source de la page :

L'affichage de la source ne montre pas le contenu injecté

Si on affiche la selection de la zone chargée dynamiquement :

L'affichage de la source montre le contenu dynamique injecté

Une astuce pour afficher rapidement le code source post-traitement d'une page, le focus étant fait sur celle-ci, revient à faire CTRL + A, Clic-droit -> Code source de la sélection.

PS : Les plus observateurs avides de remontrances signaleront que générer des formulaires en javaScript est tout sauf accessible, et ils auront raison. Mais je tiens de suite à préciser qu'il existe une version du site en cours de dev disposant d'une version en html statique

Edition du 27/06/2005

Je note avec amusement que le code source affiché par la fonction Code source de la sélection modifie le code source original. Je m'explique : admettons que l'on écrive cette portion de code XHTML :

<form name="form1" id="form1" action="./">
  <label for="q">Rechercher</label><br />
  <input type="text" name="q" id="q" value="" style="background:#eee url(images/bgq.png) no-repeat top left" /><br />
  <input type="hidden" name="a" id="a" value="search" />
  <input type="submit" name="s" id="s" value="Rechercher" />
</form>

L'affichage du code source de la selection du formulaire affichera :

<form name="form1" id="form1" action="./">
  <label for="q">Rechercher</label><br>
  <input name="q" id="q" value="" style="background: rgb(238, 238, 238) url(images/bgq.png) no-repeat scroll left top; -moz-background-clip: initial; -moz-background-origin: initial; -moz-background-inline-policy: initial;" type="text"><br>
  <input name="a" id="a" value="search" type="hidden">
  <input name="s" id="s" value="Rechercher" type="submit">
</form>

On notera que Firefox réinterprète le code source en le formattant à sa sauce, notamment au niveau des styles mais surtout en transformant les balises fermées correctement (<balise />) en balises HTML-like (<balise>). Bon, la validation passe quand même au validateur puisque ce dernier ne vérifie pas les sorties javascript.

Voilà, c'était juste à titre anécdotique en fait

Commentaires

1. Le lundi 27 juin 2005, 00:09 par Yazerty

Je n'ai pas tout compris mais l'AJAX m'intéresse. Vous auriez des liens en français pour se renseigner de façon "générale à détaillée" (pour ceux qui ne sont pas programmeurs mais qui ont quelques petites notions...) ? Après je comprendrais peut-être l'astuce :siffle:.

2. Le lundi 27 juin 2005, 09:15 par NiKo

Je manque terriblement de temps, mais si j'en ai l'occasion, je ferai un petit tuto perso

En attendant, voici quelques liens pour comprendre un peu mieux :

AJAX sur openWeb

Un tuto accessible sur le JDN

Tutorial sur l'objet XMLHttpRequest

La classe XHRconnection de solo, très simple à mettre en oeuvre et nourrie d'exemples parlants.

3. Le lundi 27 juin 2005, 15:28 par wildmary

mais c'est excellent ça, le coup d'afficher le code généré !! j'avais jamais eu l'idée d'essayer, pourtant j'utilise régulièrement l'affichage du code de la sélection.
merci pour l'astuce fort utile
qui m'a permis de trouver des vilains <span></span>

4. Le lundi 27 juin 2005, 16:59 par Yazerty

Merci NiKo, je regarde ça :). M'est avis que je mettrai un bon moment à intégrer ces techniques AJAX mais ça a l'air très intéressant...
Le tuto du JDN a l'air pas mal pour commencer à voir un truc simple, après avoir lu quelques explication sur openweb...

5. Le mardi 28 juin 2005, 10:49 par Tonio

Pas mal, pratique pour du html bidouillé en javascript. La même chose pour pouvoir chopper aussi les headers qui seraient modifiés, je suis preneur :green:

6. Le mardi 28 juin 2005, 11:56 par solo

>Tonio

Qu'appelles-tu header modifié?

7. Le mardi 28 juin 2005, 14:54 par Tonio

bah, pour le html (ce qui m'intéresse) le contenu de <head></head>.
Parce qu'en faisant Ctrl+A ->afficher source de la séléction, tu n'a le contenu que du body
Et là j'aurais besoin du head (aussi modifié par javascript)

Ouala

8. Le mardi 28 juin 2005, 15:18 par NiKo

Tonio > Perso, quand je fais Ctrl + A -> Code source de la sélection, je vois l'intégralité de la source html, balise <head/> y compris...

9. Le mardi 28 juin 2005, 17:33 par wildmary

moi aussi : faut scroller vers le haut, on est positionné par défaut au début du <body>

10. Le mercredi 29 juin 2005, 12:22 par Tonio

Le quoi? le petit bouton qui monte et qui descend à droite?
OK, suis un branlot
Merci

11. Le mardi 12 juillet 2005, 10:32 par solo

Tiens je l'avais jamais utilisé avant mais l'inspecteur DOM voit aussi les éléments créés via les méthodes DOM (heureusement?).

Comme dirait l'autre : "ça fait plaisir"

12. Le vendredi 30 décembre 2005, 18:10 par manuel

Merci beaucoup à vous pour cette trouvaille avec Firefox. Cela m'a beaucoup aidé pour debugger mon code même si je n'ai pas entierement reussi.

Ce que je veux faire c'est d'injecter un code Javascript pour reloader la page entiere dans le contenu dynamique.

D'apres ce que je vois, le browser n'execute pas le code Javascript qui a été injecté dynamiquement.

Si quelqu'un a une explication merci de me la signaler.

Manuel