Déboguer du PHP avec Javascript

bazooka07 · juin 2017

Cela ne concerne pas directement PluXml mais cela peut vous aider à développer un plugin ou à modifier n'importe quel code PHP.

Quand un script PHP ne rend pas le service attendu contre toute attente, le besoin de tracer quelque variable devient vite pressant.

PluXml propose une fonction plxUtils::debug() qui permet d'afficher à l'écran une variable ou un tableau. L'ennui, c'est que cela modifie l'affichage.
Une autre technique est d'envoyer des commentaires dans la page HTML. Supposons qu'on a deux variables PHP $a='Cool' et $t=array('bonjour', 'bonsoir').
On peut tracer la valeur de ces variables dans un commentaire de la page HTML comme ceci:

[== PHP ==]
echo "<!--\n";
echo '$a = '.$a."\n";
echo '$t = ';
print_r($t);
echo "-->\n";

Si la page HTML n'est pas trop compliquée, c'est assez rapide à retrouver en tapant Ctrl-u dans le navigateur. Mais si la page est bien touffue avec un code pas "pretty print", c'est vite prise de tête.

Une autre façon est d'afficher le contenu de la variable dans la console Javascript les outils de développement de votre navigateur, accessible sous Firefox avec la touche F12.
On va pour cela ajouter à la fonction plxUtils::debug, une fonction plxUtils:debugJS(..):

[== PHP ==]
    /**
     * Envoie un message vers la console javascript pour aider au déboggage.
     * @author J.P. Pourrez alias bazooka07
     * @version 2017-06-09
     * */
    public static function debugJS($obj, $msg='') {

        if(!empty($msg)) $msg .= ' = ';
        $msg .= (is_array($obj)) ? print_r($obj, true) : ((is_string($obj)) ? "\"$obj\"" : $obj);
        echo <<< EOT
    <script type="text/javascript">
        console.log(`$msg`);
    </script>

EOT;

    }

Vous pouvez maintenant ajouter à la fin du fichier header.php de votre theme favori :

[== PHP ==]
<?php plxUtils::debugJS($plxShow->plxMotor->aConf, 'Config de Pluxml ='); ?>

et voir afficher la configuration de votre instance PluXml si vous avez auparavant ouvert la console Javascript ci-dessus.

Jerry Wham · juin 2017

Merci pour l'astuce. Fallait y penser.

Jerry Wham · juin 2017

La méthode ne fonctionne pas si on lui passe un objet.
Pour qu'elle fonctionne, voici les modifications à faire :

/**
     * Envoie un message vers la console javascript pour aider au déboggage.
     * @author J.P. Pourrez alias bazooka07
     * @version 2017-06-09
     * */
    public static function debugJS($obj, $msg='') {

        if(!empty($msg)) $msg .= ' = ';
        $msg .= (is_array($obj) ? json_encode($obj, JSON_PRETTY_PRINT) : ((is_string($obj)) ? "\"$obj\"" : json_encode($obj,JSON_PRETTY_PRINT)));
        echo '
	    <script type="text/javascript">
	        console.log(`'.$msg.'`);
	    </script>
	    ';

    }

Déboguer du PHP avec Javascript

Réponses