Débugger avec des breakpoints

En plus de la balise @debug, vous pouvez également débugger des projets Svelte et SvelteKit en utilisant des breakpoints au sein de différents outils et environnement de développement, tant pour le code frontend que backend.

Les guides suivants supposent que votre environnement d’exécution JavaScript est Node.js.

Visual Studio Code

Avec le terminal de debug intégré, vous pouvvez définir des breakpoints dans vos fichiers source au sein de VSCode.

1. Ouvrez la palette de commandes : CMD/Ctrl + Shift + P.
2. Trouvez et exécutez “Debug: JavaScript Debug Terminal”.
3. Démarrez votre projet en utilisant le terminal de debug. Par exemple : npm run dev.
4. Définissez quelques breakpoints dans votre code source client ou serveur.
5. Déclenchez le breakpoint.

Lancer via le panneau de debug

Vous pouvez également définir un fichier .vscode/launch.json dans votre projet. Pour en définir un automatiquement :

1. Allez sur le panneau “Run and Debug”.
2. Dans le menu de sélection “Run”, choisissez “Node.js...”.
3. Sélectionnez le “run script” qui correspond à votre projet, comme “Run script: dev”.
4. Appuyez sur le bouton de lecture “Start debugging”, ou appuyez sur la touche F5 pour commencer à débugger avec les breakpoints.

Voici un exemple de fichier launch.json :

{
	"version": "0.2.0",
	"configurations": [
		{
			"command": "npm run dev",
			"name": "Run development server",
			"request": "launch",
			"type": "node-terminal"
		}
	]
}

Plus de lecture : https://code.visualstudio.com/docs/editor/debugging.

Autres éditeurs

Si vous utilisez un autre éditeur, ces guides communautaires peuvent être vous être utiles :

• WebStorm Svelte: Debug Your Application
• Debugging JavaScript Frameworks in Neovim

Outils de développement Google Chrome et Microsoft Edge

Il est possible de débugger des applications Node.js en utilisant un débuggeur basé sur le navigateur.

Notez que ceci ne fonctionne que si vous débuggez avec les source maps de code SvelteKit côté client.

1. Utilisez l’option --inspect lorsque vous lancez le serveur Vite avec Node.js. Par exemple : NODE_OPTIONS="--inspect" npm run dev
2. Ouvez votre site dans un nouvel onglet. En général localhost:5173.
3. Ouvrez les outils de développement de votre navigateur, et cliquez sur l’icône “Open dedicated DevTools for Node.js” qui se situe en haut à gauche. Elle devrait ressembler au logo de Node.js.
4. Définissez des breakpoints et débugger votre application.

Vous pouvez également ouvrir les outils de debug en naviguant sur chrome://inspect dans Google Chrome, sur edge://inspect dans Microsoft Edge.

Références

• Debugging Node.js