VS Code - Debugger for Chrome

A VS Code extension to debug your JavaScript code in the Google Chrome browser, or other targets that support the Chrome DevTools Protocol.

在Chrome中运行代码，使用vscode进行调试。

我的项目使用了webpack + babel + vue，开发环境使用webpack-dev-server。

1. 首先你得知道怎么在vscode里调试代码。

2. 直接在vscode的插件管理里安装Debugger for Chrome。这样在.vscode/lanch.json里就可以添加"type": "chrome"类型的调试配置了。

image.png

1. 点击侧边栏的调试图标，或者直接使用cmd + shift + d快捷键，打开调试页面。

image.png

1. 在调试页面点击添加配置(Add configuragion), Chrome Debugger会生成一个.vscode/launch.json。可以在这个文件中添加调试启动参数。比如我的项目中的配置如下（每次运行调试都会打开一个新的Chrome进程）：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "chrome",
         "request": "launch",  // 可以是attach和launch
         "name": "Launch Chrome",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
         "url": "http://localhost:8088",  // chrome 自动启动时打开的网址(你开发环境的部署地址)。
         "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(正常情况下就是项目根目录)。
         "sourceMaps": true
       }
     ]
   }
   

2. 如果你的Chrome一直处于开启远程调试状态(自行找开启方法，mac下可用/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222)，可以使用一下配置（使用已经打开的Chrome进程）:

   {
       "type": "chrome",
       "request": "attach",
       "name": "Attach to Chrome",
       "port": 9222,  // 远程调试端口。
       "webRoot": "${workspaceFolder}"  // 静态文件所在的本机目录(正常情况下就是项目根目录)。
   }
   

3. Chrome Debugger需要知道你的代码保存在哪里，所以我们需要配置webRoot项，除非你在webpack的配置中做了特别处理(比如context: path.resolve(__dirname, 'somePath')或devServer:{contentBase: 'somePath'})，否则配置为项目根目录(${workspaceFolder})就可以了。

4. 先启动webpack-dev-server，再点击调试页的绿色三角就可以启动调试了。

5. 如果在vscode中设置断点时出现如下错误(Error processing "setBreakpoints": Error: Could not resolve breakpoint):

image.png

检查你的webpack配置，需要配置devtool: 'source-map'，关于devtool的配置可以查看devtool。

3. 然后就可以愉快的使用vscode进行调试了。

总结

这次尝试纯属折腾，体验下来感觉不错。这个插件不是为了成为Chrome devtools的替代品，可以成为其一个补充，可以在编辑器里直接修改要调试的代码了，这个功能对我这么一个做过后端开发的前端同学来说感觉还是极好的。