Question

Visual Studio Code的插件debugging in chrome怎么配置

Answer 1

在chrome浏览器中调试，需要用到Debugger for Chrome插件。
使用Debugger for Chrome插件生成三个调试配置项。
使用前警告，这个插件相当恶心，你得先把chrome关闭，并且确保所有chrome进程都被杀死了，才能正常使用调试，否则就会总报错：
[debugger-for-chrome] Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222

默认的第一个是文件，第二个是服务器环境，第三文件和服务器环境，但是需要先启动相应的端口的chrome。
第一个就比较简单了，可以直接启动调试。
第二个也比较简单，但是注意需要你的项目有个服务器环境，调试不会给你起个服务器环境的，你需要自己起个服务器环境，比如使用live-server、gulp或者iis、apache、nginx等，而且访问地址要和配置项中的url一致。比如你用gulp起了一个http://localhost:9000，那么你的配置项中url也得是http://localhost:9000，这样就启动调试，就会主动打开chrome进行调试了，但是你关闭了调试，它也会自动把你的chrome关闭的。
第三个需要先在终端中使用和配置项port一致的端口号将chrome启动
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

，然后启动调试，在打开的浏览器中输入服务器url或者文件路径都可以进行调试。并且你关闭调试也不会关闭chrome浏览器。
以上三种方式，都是在mac下测试过的。再次强调调试前，先杀死chrome所有进程，一般退出chrome即可。

Answer 2

1.配置一个参数就可以启用一个新的Chrome，不用再杀死Chrome的进程了。
{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "启动Chrome调试",
"url": "localhost:4200",
"sourceMaps": true,
"runtimeArgs": [
"--disable-session-crashed-bubble",
"--disable-infobars"
],
"trace": true,
"webRoot": "${workspaceRoot}/src",
"userDataDir": "${workspaceRoot}/chrome",
"sourceMapPathOverrides": {
"webpack:///*": "/*"
}
}
]
}
对，就是userDataDir，设置这个属性后就可以很愉快的调试了。
2. 如果sourcemap对应不上，可以在【调试控制台】输入.scripts来查看文件对应的映射路径，非常方便。