Débugger en mode fullstack une application Web

Comment débugguer simultanément le côté serveur en PHP/Node.js et le côté client en javascript ?

4 juin 2017

Introduction

Cet article propose une solution pour débugger, optimiser et modifier dynamiquement le code source des différents éléments d'une application Web que nous avons développé :

Visual Studio Code

Atom et Visual Studio Code sont basés sur Electron avec lequel nous avons déjà réalisé un navigateur personnalisé.

Visual Studio Code offre un meilleur environnement de développement et a une meilleure gestion des incompatibilités entre les extensions.

VS Code de $soft est open source, gratuit, et fournit une documentation complète.

Veillez à désactiver l'expédition de vos données d'utilisations à $soft en ajoutant au fichier .vscode/settings.json :

{
    "telemetry.enableCrashReporter": false,
    "telemetry.enableTelemetry": false
}

Configuration

Plusieurs configurations différentes de débuggage peuvent être déclarées dans VS Code.

Dans le répertoire .vscode du projet, créer le fichier launch.json qui contiendra les différentes configurations permettant de débugger la partie PHP, la partie Node.js et la partie client sous Chromium.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "config1",
        "type": "php",
    }, {
        "name": "config2",
        "type": "node",
    }, {
        "name": "config3",
        "type": "chrome",
    }]
}

Côté serveur

PHP

XDebug

XDebug est une extension de PHP qui permet de débugger et optimiser le code.

Pour l'installer et le configurer, exécuter en ligne de commande :

php -i > config_php.txt

Copier le contenu du fichier généré config_php.txt dans la page d'assistance à la configuration de XDebug : https://xdebug.org/wizard.php

XDebug wizard

Cliquer sur le bouton intitulé Analyse my phpinfo() output.

Le site affiche les instructions à suivre pour installer et configurer XDebug.

XDebug wizard

Modifier le fichier php.ini pour autoriser l'utilisation de XDebug par le réseau :

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

VS Code

Installer l'extension PHP Debug

Modifier le fichier de configuration .vscode/launch.json en y ajoutant la configuration de XDebug :

{
    "version": "0.2.0",
    "configurations": [{
        "name": "server-php",
        "type": "php",
        "request": "launch",
        "port": 9000
    }, {
        "name": "config2",
        "type": "node",
    }, {
        "name": "config3",
        "type": "chrome",
    }]
}

Lancer le débuggage du code PHP en sélectionnant server-php dans la page Debug de VS Code :

Debug php

demo php debug

Remarques :

Node.js

nodemon

node.js ne permet pas d'appliquer une modification du code source sans devoir redémarrer son serveur Web.

L'extension nodemon permet de relancer automatiquement le serveur Node.js dès qu'un fichier source est modifié.

Installer nodemon à l'aide de npm :

npm install -g nodemon

VS Code

L'extension de débuggage d'une application Node.js est installée par défaut dans VS Code.

Ajouter dans le fichier .vscode/launch.json la configuration pour exécuter le débuggage de Node.js en utilisant nodemon.

{
    "version": "0.2.0",
    "configurations": [{
        "name": "server-php",
        "type": "php",
        "request": "launch",
        "port": 9000
    }, {
        "name": "server-node",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}/node",
        "runtimeExecutable": "nodemon",
        "stopOnEntry": false,
        "args": [
            "--debug",
            "--nolazy",
            "${workspaceRoot}/node/server.js"
        ]
    }, {
        "name": "config3",
        "type": "chrome",
    }]
}

L'option --nolazy oblige Node.js à tout recompiler même si un seul fichier source a été modifié.

La nouvelle configuration devient visible depuis la page de débuggage et peut être exécutée individuellement.

Debug node

Debug node play

Côté client

Installer Debugger for Chrome

Rajouter au fichier .vscode/launch.json, la configuration pour débugger la partie client :

{
    "version": "0.2.0",
    "configurations": [{
        "name": "server-php",
        "type": "php",
        "request": "launch",
        "port": 9000
    }, {
        "name": "server-node",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}/node",
        "runtimeExecutable": "nodemon",
        "stopOnEntry": false,
        "args": [
            "--debug",
            "--nolazy",
            "${workspaceRoot}/node/server.js"
        ]
    }, {
        "name": "browser",
        "type": "chrome",
        "request": "launch",
        "sourceMaps": false,
        "url": "http://localhost:8000/",
        "runtimeExecutable": "/usr/bin/chromium-browser",
        "webRoot": "${workspaceRoot}/www",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    }]
}

Description des paramètres :

Debug browser

Debug node play

Combiner les configurations

Modifier le fichier de configuration .vscode/launch.json pour ajouter la composition des 3 configurations PHP, Node.js et Chromium en une seule :

{
    "version": "0.2.0",
    "configurations": [{
        "name": "server-php",
        "type": "php",
        "request": "launch",
        "port": 9000
    }, {
        "name": "server-node",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}/node",
        "runtimeExecutable": "nodemon",
        "stopOnEntry": false,
        "args": [
            "--debug",
            "--nolazy",
            "${workspaceRoot}/node/server.js"
        ]
    }, {
        "name": "browser",
        "type": "chrome",
        "request": "launch",
        "sourceMaps": false,
        "url": "http://localhost:8000/",
        "runtimeExecutable": "/usr/bin/chromium-browser",
        "webRoot": "${workspaceRoot}/www",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    }],
    "compounds": [{
        "name": "all",
        "configurations": ["server-php", "server-node", "browser"]
    }]
}

Des points d'arrêt d'exécution peuvent être créés au niveau du serveur PHP, du serveur Node.js et du client Chromium.

En exécutant le debug avec la configuration all, on peut suivre le traitement d'une requête de sa réception jusqu'à son affichage dans le navigateur.

Debug browser

PHP Debug all php play

Node.js Debug all node play

Chromium Debug all browser play