Comment déboguer Angular avec VSCode?

Question

Comment puis-je configurer Angular et VSCode pour que mes points d'arrêt fonctionnent?

Answer 1

Testé avec Angulaire 5 / CLI 1.5.5

1. Installer le Chrome Extension du Débogueur
2. Créer l' launch.json (à l'intérieur .vscode dossier)
3. Utiliser mon launch.json (voir ci-dessous)
4. Créer l' tasks.json (à l'intérieur .vscode dossier)
5. Utiliser mon tasks.json (voir ci-dessous)
6. Appuyez sur CTRL+MAJ+B
7. Appuyez Sur La Touche F5

launch.json for angular/cli >= 1.3

{
  "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}"
    },
    {
      "name": "Launch Chrome (Test)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceFolder}"
    },
    {
      "name": "Launch Chrome (E2E)",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceFolder}/protractor.conf.js"]
    }
  ]
}

tasks.json for angular/cli >= 1.3

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

Testé avec Angulaire 2.4.8

1. Installer le Chrome Extension du Débogueur
2. Créer l' launch.json
3. Utiliser mon launch.json (voir ci-dessous)
4. Démarrer le NG Vivre Serveur de Développement (ng serve)
5. Appuyez Sur La Touche F5

launch.json for angular/cli >= 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

launch.json for angular/cli < 1.0.0-beta.32

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Lunch Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      },
      "userDataDir": "${workspaceFolder}/.vscode/chrome",
      "runtimeArgs": [
        "--disable-session-crashed-bubble"
      ]
    },
    {
      "name": "Attach Chrome",
      "type": "chrome",
      "request": "attach",
      "url": "http://localhost:4200",
      "port": 9222,
      "webRoot": "${workspaceFolder}/src/app",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

Answer 2

On dirait que l'équipe de VS Code stocke maintenant des recettes de débogage.

https://github.com/Microsoft/vscode-recipes/tree/master/Angular-CLI

 {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Chrome with ng serve",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch Chrome with ng test",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:9876/debug.html",
      "webRoot": "${workspaceRoot}"
    },
    {
      "name": "Launch ng e2e",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
      "protocol": "inspector",
      "args": ["${workspaceRoot}/protractor.conf.js"]
    }      
  ]
}
 

Answer 3

Il y a deux façons différentes de le faire. Vous pouvez lancer un nouveau processus ou de l' attacher à un existant.

Le point clé dans les deux processus est d'avoir webpack serveur de dev et VSCode débogueur en cours d'exécution en même temps.

Le lancement d'un processus de

1. Dans votre launch.json fichier, ajoutez la configuration suivante:

   {
     "version": "0.2.0",
     "configurations": [
       {
         "name": "Angular debugging session",
         "type": "chrome",
         "request": "launch",
         "url": "http://localhost:4200",
         "webRoot": "${workspaceFolder}"
       }
     ]
   }
   

2. Exécuter Webpack serveur de dev Angulaires de la CLI par l'exécution de l' npm start

3. Aller à VSCode débogueur et exécuter "Angulaire de la session de débogage de configuration". En conséquence, une nouvelle fenêtre de navigateur avec votre demande sera ouvert.

Joindre à un processus existant

1. Pour cela, vous devez exécuter Chrome dans le mode debugger avec port ouvert (dans mon cas, il sera 9222):

   Mac:

   /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
   

   Windows:

   chrome.exe --remote-debugging-port=9222
   

2. launch.json se présente de la manière suivante:

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

3. Exécuter Webpack serveur de dev Angulaires de la CLI par l'exécution de l' npm start
4. Sélectionnez "Chrome Attacher" de la configuration et de l'exécuter.

Dans ce cas, le débogueur de l'existant Chrome processus au lieu de lancer une nouvelle fenêtre.

J'ai écrit mon propre article, où j'ai décrit cette approche avec des illustrations.

Simple des instructions sur la façon de configurer débogueur Angulaire dans VSCode

Answer 4

Ceci est expliqué en détail sur le site du code Visual Studio: https://code.visualstudio.com/docs/nodejs/angular-tutorial

Answer 5

Voici une solution un peu plus légère, fonctionne avec Angular 2+ (j'utilise Angular 4)

Vous avez également ajouté les paramètres pour Express Server si vous exécutez la pile MEAN.

 {
  // Use IntelliSense to learn about possible Node.js debug attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Angular Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:4200",
      "runtimeArgs": [
        "--user-data-dir",
        "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "trace": true,
        "webRoot": "${workspaceRoot}/client/",
        "userDataDir": "${workspaceRoot}/.vscode/chrome"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Express Server",
      "program": "${workspaceRoot}/server/bin/www",
      "outFiles": [
        "${workspaceRoot}/out/**/*.js"
      ]
    }
  ]
}