Déboguer l'application

Il existe plusieurs possibilités pour déboguer le code d'une application qui s'exécute dans un navigateur. Les principales sont :

1. Déboguer directement dans VSCode (approche recommandée).
2. Déboguer dans le navigateur.

Déboguer dans VSCode

Il faut en premier lieu ajouter à la section configurations du fichier .vscode/launch.json la configuration nécessaire pour démarrer l'application dans un navigateur. Exemples :

Chrome
.vscode/launch.json

"configurations": [
  {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome localhost", 
      "skipFiles": ["${workspaceFolder}/node_modules/**/*.js"], 
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}"
  },
]

Firefox
.vscode/launch.json

"configurations": [
  {
    "type": "firefox",
    "request": "launch",
    "reAttach": true,
    "name": "Launch Firefox localhost",  
    "skipFiles": ["${workspaceFolder}/node_modules/**/*.js"],  
    "url": "http://localhost:5173", 
    "webRoot": "${workspaceFolder}"
  }
]

Ensuite, pour déboguer et lancer l'application, il faut choisir le bon script de démarrage.

Déboguer dans le navigateur

Utiliser l'instruction debugger dans le code et exécuter l'application.

Aller dans le navigateur, afficher les outils de développement avec F12 et rafraîchir la page.