Informatique

Comment déboguer le code client et serveur d'une application SvelteKit avec VSCode?

Temps de lecture : 10 minutes

Le déboguage est une compétence primordiale de tout développeur. Mais sans des outils de déboguage adaptés, ça peut devenir une tâche pénible et laborieuse.

Avant même d’exécuter le code, il est possible de faire certaines étapes pour s’assurer que (l’on est suffisamment convaincu que) notre programme fait bien ce qu’on attend qu’il fasse.

Ça a l’air niaiseux, mais une relecture du code problématique (quand on a réussi à le localiser) est une bonne première étape à ne pas négliger.

Très souvent, un code qui plante va fournir un message d’erreur avant de mourir. Prendre le temps de lire ce message est aussi une bonne idée.

Prendre des notes durant ce processus permet une meilleure compréhension du problème. On peut noter ses observations générales sur le problème, des liens qui pointent vers des ressources intéressantes, des anomalies remarquées…

Il est parfois nécessaire de comprendre ce que fait précisément le code quand il s’exécute (« runtime »).

Simplement imprimer dans la console une information arbitraire à un moment de l’exécution du code.

C’est une technique très simple et rapide à mettre en place, mais assez limitée.

// script.js

function main(arg) {
  console.log('run de la fonction main');
  console.log('argument =', arg);
}

main(1);
main('abc');

# console

$ node script.js
run de la fonction main
argument = 1
run de la fonction main
argument = "abc"
$

Il existe des fonctions telles que console.dir() et console.error() qui permettent d’être plus efficace, mais le débogage par sortie reste fastidieux et imprécis.

Il peut convenir pour une analyse rapide de certaines erreurs ou pour tracer un bug simple.

Mais comme ça serait merveilleux de pouvoir stopper le code en cours d’exécution sur demande pour inspecter ce qui se passe en interne…

Et oui, c’est possible!

Voici comment déboguer une application SvelteKit avec VSCode, autant le code du côté serveur que celui du côté client.

Déboguer le code client est possible très facilement avec les Outils de Développement Chrome. Il suffit d’aller dans l’onglet « Sources » et d’utiliser les différentes fonctions tel que les points d’arrêt (« breakpoints ») et l’espionnage de variables (« watch expressions »).

Cependant, il est beaucoup plus pratique de déboguer directement dans son éditeur de code.

Pour ce faire, il faut lancer Chrome en mode « Remote debug » et « attacher » le débogueur VSCode au serveur de débogage de Chrome.

Fermer toutes les fenêtres de Chrome
Lancer Chrome avec l’option --remote-debugging-port=9222^[1]
Attacher le débogueur VSCode en lançant la configuration « Attach to chrome »^[2] dans le débogueur VSCode
Voilà! Maintenant, VSCode devrait permettre le débogage des fichiers du répertoire de travail exécutés dans Chrome.

Raccourci !

Après avoir fermé et relance Chrome en mode « Remote debug », il peut être intéressant de rouvrir les onglets ouverts en utilisant le raccourci clavier ctrl + shift + T

Voici un exemple de fichier .desktop modifié pour lancer facilement Chrome en mode « Remote debug » :

google-chrome.desktop

[Desktop Action new-window]
#...

[Desktop Action new-private-window]
# ...

[Desktop Action remote-debug]
Exec=/usr/bin/google-chrome-stable --remote-debugging-port=9222
Name[fr_CA]=Remote Debug (Port 9222)
Name=Remote Debug (Port 9222)
StartupWMClass=Google-chrome

[Desktop Entry]
Actions=new-window;new-private-window;remote-debug;
# ...

Pour déboguer le code côté serveur, il faut inspecter le code exécuté par le processus node qui s’exécute généralement dans un terminal.

Pour lancer node en mode inspection avec un script npm, je recommande d’utiliser une variable d’environnement comme ceci :

NODE_OPTIONS='--inspect' vite dev

Voir package.json.

Le processus est similaire :

Lancer son application avec node en mode --inspect
Attacher le débogueur VSCode au processus node avec la commande de déboguage « NodeJS: Attach »^[3]
Déboguer ses fichiers côté serveur! (+page.server.js, +layout.server.js, +page.svelte, …)

VSCodium	1.80.1
NodeJS		16.20
PNPM		8.6.9
Chrome		115
zsh		5.9

Svelte		4.0.5
Vite 		4.4.2

{
  // début de la config...
  "scripts": {
    "dev": "vite dev",
    "debug": "NODE_OPTIONS='--inspect' vite dev",
    // autres scripts...
  },
  "type": "module",
  // reste de la config...
}

{
  "version": "0.2.0",
  "configurations": [
    {	// config par défaut "Attach to Chrome"
      "name": "Attach to Chrome",
      "port": 9222,
      "request": "attach",
      "type": "chrome",
      "webRoot": "${workspaceFolder}"
    },
    {	// config par défaut "NodeJS: Attach"
      "name": "Attach",
      "port": 9229,
      "request": "attach",
      "skipFiles": [
        "<node_internals>/**"
      ],
      "type": "node"
    },
    // ...
  ]
}