2018-11-16

Debugger Angular via VSCode

Voici une rapide procédure de configuration de votre projet Angular pour débugger dans VSCode (points d’arrêt, évaluation des variables, …)

  • Installer l’extension Chrome Debugger
  • Créer le fichier launch.json (dans le dossier .vscode)
  • Utiliser le contenu de launch.json décrit ci-dessous
  • Créer le fichier tasks.json (dans le dossier .vscode)
  • Utiliser le contenu de tasks.json décrit ci-dessous
  • Compiler votre code via CTRL+SHIFT+B
  • Démarrer via F5

launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200/#",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

tasks.json

{
    "version": "2.0.0",
    "tasks": [
      {
        "identifier": "ng serve",
        "type": "npm",
        "script": "start",
        "problemMatcher": [],
        "group": {
          "kind": "build",
          "isDefault": true
        }
      }
    ]
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *