Skip to content

chore: add VSCode debugging configurations #1892

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shikanime merged 1 commit into from
Feb 6, 2026
Merged

chore: add VSCode debugging configurations #1892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .vscode/extensions.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
// Vitejs
"antfu.vite",
"antfu.browse-lite",
// Firefox Debugger
"firefox-devtools.vscode-firefox-debug",
// CSS
"csstools.postcss",
"stylelint.vscode-stylelint",
Expand Down
170 changes: 169 additions & 1 deletion .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,43 @@
"version": "0.2.0",
"configurations": [
{
"name": "Attach to Remote",
"name": "Launch Server (Integ)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/server",
"run",
"integ"
],
"console": "internalConsole",
"restart": true,
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/node_modules/**/*.js"
]
},
{
"name": "Launch Server (Dev)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/server",
"run",
"dev"
],
"console": "internalConsole",
"restart": true,
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/node_modules/**/*.js"
]
},
{
"name": "Attach Server",
"type": "node",
"request": "attach",
"port": 9229,
Expand All @@ -17,6 +53,138 @@
"<node_internals>/**",
"${workspaceFolder}/node_modules/**/*.js"
]
},
{
"name": "Serve Client (Chrome) (Integ)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/client",
"run",
"integ",
"--",
"--port",
"8080",
"--strictPort"
],
"console": "internalConsole",
"serverReadyAction": {
"pattern": "Local:.*(http://localhost:[0-9]+)",
"action": "startDebugging",
"name": "Launch Client (Chrome)"
}
},
{
"name": "Serve Client (Chrome) (Dev)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/client",
"run",
"dev",
"--",
"--port",
"8080",
"--strictPort"
],
"console": "internalConsole",
"serverReadyAction": {
"pattern": "Local:.*(http://localhost:[0-9]+)",
"action": "startDebugging",
"name": "Launch Client (Chrome)"
}
},
{
"name": "Serve Client (Firefox) (Integ)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/client",
"run",
"integ",
"--",
"--port",
"8080",
"--strictPort"
],
"console": "internalConsole",
"serverReadyAction": {
"pattern": "Local:.*(http://localhost:[0-9]+)",
"action": "startDebugging",
"name": "Launch Client (Firefox)"
}
},
{
"name": "Serve Client (Firefox) (Dev)",
"type": "node",
"request": "launch",
"runtimeExecutable": "pnpm",
"runtimeArgs": [
"--filter",
"@cpn-console/client",
"run",
"dev",
"--",
"--port",
"8080",
"--strictPort"
],
"console": "internalConsole",
"serverReadyAction": {
"pattern": "Local:.*(http://localhost:[0-9]+)",
"action": "startDebugging",
"name": "Launch Client (Firefox)"
}
},
{
"name": "Launch Client (Chrome)",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/apps/client"
},
{
"name": "Launch Client (Firefox)",
"type": "firefox",
"request": "launch",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/apps/client"
}
],
"compounds": [
{
"name": "Launch (Chrome) (Integ)",
"configurations": [
"Launch Server (Integ)",
"Serve Client (Chrome) (Integ)"
]
},
{
"name": "Launch (Chrome) (Dev)",
"configurations": [
"Launch Server (Dev)",
"Serve Client (Chrome) (Dev)"
]
},
{
"name": "Launch (Firefox) (Integ)",
"configurations": [
"Launch Server (Integ)",
"Serve Client (Firefox) (Integ)"
]
},
{
"name": "Launch (Firefox) (Dev)",
"configurations": [
"Launch Server (Dev)",
"Serve Client (Firefox) (Dev)"
]
}
]
}
32 changes: 29 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -323,13 +323,39 @@ pnpm --filter @cpn-console/server run db:wrapper
pnpm --filter @cpn-console/server run db:wrapper -h
```

### Débogage avec VS Code

Le projet est configuré pour être débogué directement dans VS Code via le fichier `.vscode/launch.json`.
Rendez-vous dans l'onglet "Run and Debug" (ou `Ctrl+Shift+D`) pour voir les configurations disponibles.

#### Configurations disponibles

- **Launch Server** : Lance le serveur en local (hors Docker) et attache le débogueur.
- *Note : Assurez-vous que les bases de données (Postgres) et Keycloak sont accessibles (ex: lancés via `pnpm run dev` dans un autre terminal pour les dépendances).*
- **Attach Server** : S'attache au processus Node.js du serveur.
- Utile lorsque le serveur tourne dans un conteneur Docker.
- Pour que cela fonctionne, le serveur doit être lancé avec le mode debug activé.
- **Serve Client (Chrome/Firefox)** : Lance l'application client en local et ouvre une instance de navigateur dédiée au débogage.
- **Launch (Chrome/Firefox)** : Lance simultanément le serveur et le client pour une session de débogage complète (Compound task).

#### Déboguer avec d'autres outils (Chrome DevTools, WebStorm, etc.)
Copy link
Collaborator

@StephaneTrebel StephaneTrebel Feb 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: Nickel 👌


Le serveur Node.js expose le port de débogage `9229` lorsqu'il est lancé en mode debug (ou avec l'option `--inspect`). Vous pouvez utiliser n'importe quel client de débogage compatible avec le protocole Inspector de Node.js.

**Exemple avec Chrome DevTools :**

1. Lancez le serveur en mode debug (voir section précédente pour Docker, ou `pnpm run debug` en local).
2. Ouvrez Chrome et naviguez vers `chrome://inspect`.
3. Cliquez sur "Open dedicated DevTools for Node" ou attendez que votre target apparaisse sous "Remote Target".
4. Vous pouvez maintenant mettre des points d'arrêt, inspecter les variables, etc.

### Construction des images

Ce dépôt utilise des fichiers docker-compose pour construire les images docker:

- [docker-compose.dev.yml](./ci/docker/docker-compose.dev.yml) pour la construction des images docker du mode développement.
- [docker-compose.ci.yml](./ci/docker/docker-compose.ci.yml) pour la construction des images docker utilisées dans nos pipelines d'Intégration Continue.
- [docker-compose.prod.yml](./ci/docker/docker-compose.prod.yml) pour la construction des images docker du mode production.
- [docker-compose.dev.yml](./docker/docker-compose.dev.yml) pour la construction des images docker du mode développement.
- [docker-compose.ci.yml](./docker/docker-compose.ci.yml) pour la construction des images docker utilisées dans nos pipelines d'Intégration Continue.
- [docker-compose.prod.yml](./docker/docker-compose.prod.yml) pour la construction des images docker du mode production.

## Configuration du Keycloak

Expand Down
Loading