Ajax et les erreurs invisibles…

Pas toujours évident de trouver une erreur quand on fait de l'AJAX (javascript & php), c'est à dire avec des .load et autre .post / .get en jQuery.

De ces transactions qui n'affichent rien et qui, quand cela ne marche pas, ne le disent pas…

Aspects PHP

Fonctions d'affichages de variables

Quand on cherche des erreurs, un simple echo ou print ne suffit pas toujours si nous sommes face à des variables complexes. C'est à dire matrices de variables (array), des instances (class) et autres fantaisies. Pour elles, PHP nous fournit des fonctions intéressantes :

• var_dump
• print_r
• var_export

(voir la doc pour exemples d'usage)

La plupart du temps, pour un affichage lisible, nous les ferons précéder d'une balise de préformatage.

print '<pre>';
print_r ( $objet );
print '</pre>';

Bien sûr, ces fonctions n'ont d'intérêts que si on peut les afficher… ce qui n'est pas toujours le cas en AJAX.

Fichier spécifique

Pour la partie PHP du projet, on a la possibilité de créer un fichier texte. Exemple :

$fp = fopen('erreurs.txt', 'w');
   fwrite($fp, var_export($annexe, true) );
fclose($fp);

En faisant attention aux droits d'écriture si vous êtes sous Linux.

Dans les logs

Plus simple (à peine), utiliser la fonction error_log du php qui écrit dans les logs d'apache!

Exemple:

error_log( $sql ); // pour une variable simple
error_log( var_export($_POST, true) ); // pour une complexe (class, array...)

Ne pas hésiter à utiliser des logs séparés, par exemple en précisant dans le .htaccess un fichier de log spécifique (et lui donner des droits d'écriture).

php_flag  display_startup_errors on
php_flag  display_errors on
php_flag  html_errors on
php_flag  log_errors on
php_value error_log  c:/wamp/www/projet/PHP_errors.log

En l'occurrence, ce sont surtout les 2 dernières lignes qui nous intéressent dans notre problématique spécifique. Les autres nous serviront d'une manière générale en phase de mise au point.

Aspects Javascript / jQuery

Je précise jQuery, mais c'est sous entendu. Je me vois mal monter un projet utilisant AJAX sans passer par la surcouche jQuery…

Alerte !

Bon, la fonction Javascript classique qui sert souvent, mais que l'on couplera avec un .get ou autre de jQuery.

$.get("fichier.php", function(data){
   alert( data );
});

Ici, le fichier php sera appelé en invisible, exécutera ce qu'il veut (!), y compris des affichages qui seront récupérés par le javascript pour être alertés.

Plus élégant, afficher cela dans le DOM, dans une balise <pre id="debug"> par exemple:

$.get("fichier.php", function(data){
   $('#debug').html( data );
});

Une fois au point, sera remplacé par :

$.get("fichier.php");

Console…

Si vous avez Firebug… Non, car vous avez Firebug (il serait inconcevable de faire de l'AJAX sans avoir Firebug)… Donc reprenons.

Puisque vous avez Firebug, vous pouvez utiliser la console intégrée. L'équivalent des logs php, mais en Javascript… Elle vous indiquera les erreurs css, javascript, mais également les transactions get / post (y compris en arrière plan).

Pour la voir : Ctrl + maj + K (comme Konsole ?)

Et pour écrire dedans ?

$.get("fichier.php", function(data){
   console.log(data);
});

Bien entendu, je ne résume ici que des pistes de débuggage, qui permettent de gagner du temps.

Si vous en avez d'autres…