VS Code - Debugger for Chrome► 參數基本配置 : 開啟專案內 launch.json 設置參考如下
{
// 使用 IntelliSense 以得知可用的屬性。
// 暫留以檢視現有屬性的描述。
// 如需詳細資訊，請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:4200",
"webRoot": "${workspaceRoot}/src",
"userDataDir": "Z:/MyProfile/GoogleChromeUser", //指定不同的 chrome 環境設置
//"sourceMaps": false,//設為 false 除錯似乎不太正常
//"sourceMapPathOverrides": {
// "webpack:///./src/*": "${webRoot}/*"
//}
}
]
}
► 參數欄位
- trace: When true, the adapter logs its own diagnostic info to a file. The file path will be printed in the Debug Console. This is often useful info to include when filing an issue on GitHub. If you set it to "verbose", it will also log to the console.
- runtimeExecutable: Workspace relative or absolute path to the runtime executable to be used. If not specified, Chrome will be used from the default install location.
- runtimeArgs: Optional arguments passed to the runtime executable.
- env: Optional dictionary of environment key/value pairs.
- cwd: Optional working directory for the runtime executable.
- userDataDir: Normally, if Chrome is already running when you start debugging with a launch config, then the new instance won't start in remote debugging mode. So by default, the extension launches Chrome with a separate user profile in a temp folder. Use this option to set a different path to use, or set to false to launch with your default user profile.
- url: On a 'launch' config, it will launch Chrome at this URL.
- urlFilter: On an 'attach' config, or a 'launch' config with no 'url' set, search for a page with this url and attach to it. It can also contain wildcards, for example, "localhost:*/app" will match either "http://localhost:123/app" or "http://localhost:456/app", but not "https://stackoverflow.com".
- sourceMaps: By default, the adapter will use sourcemaps and your original sources whenever possible. You can disable this by setting sourceMaps to false.
- pathMapping: This property takes a mapping of URL paths to local paths, to give you more flexibility in how URLs are resolved to local files. "webRoot": "${workspaceFolder}" is just shorthand for a pathMapping like { "/": "${workspaceFolder}" }.
- smartStep: Automatically steps over code that doesn't map to source files. Especially useful for debugging with async/await.
- disableNetworkCache: If true, the network cache will be disabled.
- showAsyncStacks: If true, callstacks across async calls (like setTimeout, fetch, resolved Promises, etc) will be shown.
參考 :
https://github.com/Microsoft/vscode-chrome-debug
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-fo...
