web-dev-qa-db-ja.com

VSCodeでAngularをデバッグするにはどうすればいいですか？

ブレークポイントが機能するようにAngularとVSCodeを設定するにはどうすればよいですか。

angulardebuggingwebpackvisual-studio-code
103
Asesjix

Angular 5/CLI 1.5.5でテスト済み

  1. インストールする Chrome Debugger Extension
  2. launch.json （.vscodeフォルダ内）を作成します。
  3. 私のlaunch.jsonを使ってください（下記参照）
  4. tasks.json （.vscodeフォルダ内）を作成します。
  5. 私のtasks.jsonを使ってください（下記参照）
  6. 押す CTRL+SHIFT+B
  7. 押す 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
        }
      }
    ]
  }

Angular 2.4.8でテスト済み

  1. インストールする Chrome Debugger Extension
  2. launch.json を作成してください
  3. 私のlaunch.jsonを使ってください（下記参照）
  4. NG Live Development Server（ng serve）を起動します。
  5. 押す 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/*"
      }
    }
  ]
}
151
Asesjix

VS Codeチームがデバッグレシピを保存しているようです。

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

これは、Visual Studio Codeサイトで詳細に説明されています。 https://code.visualstudio.com/docs/nodejs/angular-tutorial

7
Victor Ionescu

その方法は2つあります。 新しいプロセスを起動するか、既存のプロセスに添付することができます。

両方のプロセスで重要な点は、webpack devサーバーとVSCodeデバッガーを同時に実行することです。

プロセスを起動する

  1. launch.jsonファイルに次の設定を追加します。

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

  2. npm startを実行してAngular CLIからWebpack dev serverを実行します。

  3. VSCodeデバッガに行き、 "Angular debugging session"設定を実行してください。その結果、アプリケーションを含む新しいブラウザウィンドウが開きます。

既存のプロセスに添付

  1. そのためには、Chromeをデバッガモードで開いたポートで実行する必要があります（私の場合は9222になります）

    マック：

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

    Windows：

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

  2. launch.jsonファイルは次のようになります。

    {
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome Attach",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "url": "http://localhost:4200/",
      "webRoot": "${workspaceFolder}"
    } 
  ]
}
  3. npm startを実行してAngular CLIからWebpack dev serverを実行します。
  4. 「Chrome Attach」設定を選択して実行します。

この場合、デバッガは新しいウィンドウを起動する代わりに既存のChromeプロセスに接続します。

私は自分自身の記事を書きました。そこで私はこのアプローチをイラストで説明しました。

VSCodeでAngularのデバッガを設定する簡単な方法

6
skryvets

これは少し軽い解決策で、Angular 2+で動作します（私はAngular 4を使用しています）。

MEANスタックを実行する場合は、OLAP Serverの設定も追加しました。

{
  // 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

この設定を使うことができます：

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