web-dev-qa-db-fra.com

Comment déboguer Angular avec VSCode?

Comment obtenir la configuration Angular et le VSCode afin que mes points d'arrêt fonctionnent?

angulardebuggingwebpackvisual-studio-code
108
Asesjix

Testé avec Angular 5/CLI 1.5.5

  1. Installez le Chrome Debugger Extension
  2. Créez le launch.json (dans le dossier .vscode)
  3. Utilisez mon _launch.json_ (voir ci-dessous)
  4. Créez le tasks.json (dans le dossier .vscode)
  5. Utilisez mon _tasks.json_ (voir ci-dessous)
  6. Presse CTRL+SHIFT+B
  7. Presse 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 Angular 2.4.8

  1. Installez le Chrome Debugger Extension
  2. Créez le launch.json
  3. Utilisez mon _launch.json_ (voir ci-dessous)
  4. Démarrer le NG Live Development Server (_ng serve_)
  5. Presse 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/*"
      }
    }
  ]
}
_
155
Asesjix

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"]
    }      
  ]
}
42
Levi Fuller

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

7
Victor Ionescu

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

Le point clé dans les deux processus est que le serveur de développement Webpack et le débogueur VSCode s'exécutent simultanément .

Lancer un processus

  1. Dans votre fichier launch.json 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écutez le serveur de développement Webpack à partir de Angular CLI en exécutant npm start

  3. Accédez au débogueur VSCode et exécutez la configuration "Session de débogage angulaire". En conséquence, une nouvelle fenêtre de navigateur avec votre application sera ouverte.

Attacher à un processus existant

  1. Pour cela, vous devez exécuter Chrome en mode débogueur avec le port ouvert (dans mon cas, il s'agira de 9222):

    Mac:

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

    Les fenêtres:

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

  2. Le fichier launch.json ressemblera à ceci:

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. Exécutez le serveur de développement Webpack à partir de Angular CLI en exécutant npm start
  4. Sélectionnez la configuration "Chrome Attach" et lancez-la.

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

J'ai écrit mon propre article dans lequel je décrivais cette approche avec des illustrations.

Instruction simple pour configurer le débogueur pour Angular en VSCode

6
skryvets

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"
      ]
    }
  ]
}
2
Isak La Fleur

Peut utiliser cette configuration:

{
 "version": "0.2.0",
"configurations": [
{
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "preLaunchTask": "npm: start",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
]
}
0
Ahmad Aghazadeh