ブレークポイントが機能するようにAngularとVSCodeを構成するにはどうすればよいですか？
回答:
launch.json（.vscodeフォルダー内に）を作成します。launch.json（下記参照）tasks.json（.vscodeフォルダー内に）を作成します。tasks.json（下記参照）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
}
}
]
}
launch.jsonlaunch.json（下記参照）ng serve）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/*"
}
}
]
}
NG Live Development Server起動Chromeして起動する方法を知っていF5ますか？
launch.jsonし、tasks.jsonここで行います。私が理解したとおりlaunch.json、ノードサーバーを起動してポート8080をリッスンし、アプリケーションを実行するコマンドをtasks.json使用npmして実行するように指示しng serveます。
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"]
}
]
}
それには2つの異なる方法があります。新しいプロセスを起動するか、既存のプロセスにアタッチできます。
両方のプロセスの重要なポイントは、webpack開発サーバーとVSCodeデバッガーを同時に実行することです。
あなたにはlaunch.json、ファイル次の設定を追加します：
{
"version": "0.2.0",
"configurations": [
{
"name": "Angular debugging session",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}"
}
]
}
次のコマンドを実行して、Angular CLIからWebpack開発サーバーを実行します。 npm start
そのためには、ポートを開いた状態でChromeをデバッガモードで実行する必要があります（私の場合は9222）：
マック：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
ウィンドウズ：
chrome.exe --remote-debugging-port=9222
launch.json ファイルは次のようになります。
{
"version": "0.2.0",
"configurations": [
{
"name": "Chrome Attach",
"type": "chrome",
"request": "attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceFolder}"
}
]
}
npm startこの場合、デバッガーは、新しいウィンドウを起動するのではなく、既存のChromeプロセスに接続されます。
私は自分の記事を書き、このアプローチをイラストで説明しました。
chrome.exe --remote-debugging-port=9222Chrome を起動するたびにこのコマンドを実行する必要があります
これについては、Visual Studio Codeサイトで詳しく説明されています：https : //code.visualstudio.com/docs/nodejs/angular-tutorial
これは少し軽量なソリューションで、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"
]
}
]
}
@Asesjixの回答は非常に詳細ですが、指摘されているように、ng serveChromeでAngularアプリを起動して起動するには、複数の操作が必要です。次の設定を使用して、シングルクリックでこれを機能させました。@Asesjixの答えとの主な違いは、タスクタイプが現在でshellあり、コマンド呼び出しがstart以前に追加されるng serveためng serve、独自のプロセスに存在してデバッガーの起動をブロックしないことです。
tasks.json：
{
"version": "2.0.0",
"tasks": [
{
"label": "ng serve",
"type": "shell",
"command": "\"start ng serve\""
},
{
"label": "ng test",
"type": "shell",
"command": "\"start ng test\"",
}
]
}
launch.json：
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch in Chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}",
"preLaunchTask": "ng serve"
}
]
}
私の場合、元のAngularプロジェクトフォルダーツリーを使用しなかったため、webRoot/で問題が発生していることがわかりました{workspaceFolder}ビットに、すべての実験で結果が得られませんでした。別のSOの回答からヒントを得ました。もう一度見つけたらリンクします。
私を助けたのは{workspaceFolder}、実行時に変数の内容を見つけ、それを「app / *」がある「src」フォルダーの場所に変更することでした。それを見つけるために、preLaunchTasklaunch.jsonファイルにとの値を出力するタスクを追加しました{workspaceFolder}。
launch.json、これはChromeデバッガーのインストール後に表示されます
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceFolder}/src/newProjectRoot/",
"preLaunchTask": "Echo values" //Just to see what the cryptic vs code variables actually are https://code.visualstudio.com/docs/editor/variables-reference
}
]
}
Tasks.jsonデフォルトでは存在しません。Ctrl + Shift + pを押すと、「他のコマンドのタスクを作成する」などと呼ばれていると思います。tasks.jsonの作成後は表示されないようです。また、launch.jsonと同じ場所にファイルを作成することもできます。
{
"version": "2.0.0",
"tasks": [
{
"label": "Echo values",
"command": "echo",
"args": ["${env:USERNAME}", "workspaceFolder = ${workspaceFolder}"],
"type": "shell"
}
]
}
$ {workspaceFolder}の値がわかったら、新しいプロジェクトツリーのsrcフォルダーを指すように修正し、すべて機能しました。デバッグはng serve、起動前タスクとして、またはビルドの一部として（上記の例）、またはコマンドプロンプトで実行されている必要があります。
以下は、使用できるすべての変数へのリンクです。