9.6 Comment déboguer une requête AJAX

Lorsqu'on fait une requête AJAX, il faut savoir déboguer autant du côté client que du côté serveur car les deux entrent en jeu.

Les raisons pouvant causer le problème sont nombreuses. Le problème peut provenir de l'exécution de la fonction JavaScript, de l'appel AJAX en tant que tel, du code serveur, du traitement effectué lorsque l'appel AJAX a été réussi, ...

Et tous nos tests ne seront valides que si on est assuré que la version testée correspond bel et bien à la dernière version écrite. Le piège de la mémoire cache vous guette !

Avez-vous la dernière version du code JavaScript en cache ?

Puisque les navigateurs conservent une copie du code JavaScript en cache, il est important de s'assurer que c'est bien la dernière version écrite qui est exécutée. Voici une technique infaillible pour y parvenir :

• Lancez le site Web.
• Dans la page à tester, cliquez dans la barre d'URL puis appuyez sur Entrée. Ceci assurera que vous n'êtes pas en PostBack.
• Actualisez l'écran (actualisation ou actualisation forcée).

Quelle ligne de code cause le problème ?

Les tests suivants vous permettront de cibler ce qui ne fonctionne pas.

La fonction JavaScript qui fait l'appel AJAX est-elle exécutée ?

Dans le débogueur JavaScript de Chrome (F12 sous Windows ou ⌘ Cmd+⌥ Option+I sous Mac, onglet Sources), placez un point d'arrêt sur la première ligne exécutable dans la fonction qui se chargera d'effectuer la requête AJAX. Lancez le site Web et assurez-vous que le code s'arrête sur cette ligne.

Si ce n'est pas le cas, c'est que vous avez fait une erreur.

• Avez-vous oublié le $(function () { ... } ?
• Si l'appel AJAX est en réponse à un événement, avez-vous bien orthographié la classe ou l'identifiant utilisé dans le sélecteur jQuery ? (ex : si on réagit au clic sur le bouton dont le id est soumettre : $('#soumettre'))
• Avez-vous utilisé le bon événement jQuery ? (ex : .click(), .change(), .on(), ...)

La fonction serveur est-elle exécutée ?

Une fois qu'on est assuré que l'appel AJAX est exécuté, si le problème persiste, l'étape suivante consiste à vérifier si le code serveur est exécuté. Dans votre environnement de développement (dans l'image qui suit, on a utilisé CodeLobster), placez un point d'arrêt sur la première ligne du code serveur puis lancez le site.

Attention : vous ne pouvez pas faire un affichage à l'écran pour déboguer du code serveur appelé via AJAX. Utilisez plutôt le débogueur ou, si votre IDE ne vous offre pas cette possibilité, effectuez une écriture dans un fichier journal.

Pourquoi n'est-il pas possible d'afficher une valeur à l'écran pour déboguer un appel AJAX ? Simplement parce que tout ce qui sort du code serveur sera envoyé en tant que réponse à l'appel AJAX. Donc, si j'affiche la valeur de $produit_id à l'écran, la variable response dans AJAX contiendra l'identifiant du produit. Ceci causera un problème si l'appel AJAX attend une réponse de type JSON.

En passant, si vous n'avez pas accès à un débogueur, vous devriez songer sérieusement à passer à PhpStorm...

Si le programme n'arrête pas sur le point d'arrêt, c'est qu'il y a une erreur dans l'appel AJAX.

L'appel AJAX est-il réussi (.done()) ou non (.fail()) ?

Dans le débogueur JavaScript, placez un point d'arrêt sur la première ligne exécutable du .done() et sur la première ligne exécutable du .fail(). 

Si le programme s'arrête sur .done()

Si le programme s'arrête sur .done(), l'appel AJAX a eu lieu alors le problème se trouve :

• soit dans le code serveur;
• soit dans le code du .done();
• soit dans le lien entre les données qui transigent de l'appel AJAX vers le code serveur;
• soit dans le lien entre les données qui transigent du code serveur vers le .done().

À vous de réviser votre code. L'affichage des paramètres response, textStatus et jqXHR pourront vous aider. L'utilisation du débogueur côté client (pour votre code JavaScript dans Chrome) ou côté serveur (pour votre code PHP dans votre IDE) sera d'une grande utilité.

Dans l'exemple suivant, on voit qu'il manquait un point-virgule dans le code serveur.

Si le programme s'arrête sur .fail()

Si le programme s'arrête sur .fail(), c'est que l'appel AJAX en tant que tel a rencontré un problème.

Parfois, les paramètres textStatus ou errorThrown contiennent un message clair. Dans d'autres cas, c'est jqXHR qui fournira la piste recherchée ou plus précisément jqXHR.responseText.

Il est souvent très aidant d'afficher la valeur de jqXHR.responseText, textStatus et errorThrown dans le débogueur JavaScript.

Dans cet exemple, on voit que le caractère < n'était pas attendu. Puisque notre code avait pour but de retourner du HTML et que le code < fait partie intégrante du HTML, une cause possible serait que le dataType: soit configuré à autre chose que "html".

Autre source d'information : les réponses HTTP

Le Web est composé d'une série d'échanges entre le client et le serveur. Le client fait une requête au serveur et le serveur retourne une réponse au client. Ces réponses peuvent être explorées afin de déterminer ce qui cause problème.

Dans Chrome, les réponses peuvent être visualisées en appuyant sur F12 puis sur l'onglet Network. Il faut recharger le site Web pour que les réponses apparaissent.

Dans cet exemple, on voit que l'appel au fichier generer-liste-cat.php cause une erreur 404.

Un clic sur le nom du fichier dans cet écran donnera plus de détails. L'exploration des onglets Headers, Preview, Response, etc. peut vous fournir de l'information intéressante.