38.vscode怎样调用谷歌浏览器调试断点

1. 下载插件debug for chrome

屏幕快照 2018-09-28 17.01.52.png

2. 配置chrome 的9222端口

步骤：Mac打开终端，输入
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

3. 配置vscode配置

屏幕快照 2018-09-28 17.02.15.png

launch.json

{
 // 使用 IntelliSense 了解相关属性。 
 // 悬停以查看现有属性的描述。
 // 告诉vscode可以通过连接chrome浏览器的9222端口对http://localhost:8080网页进行调试；
 "version": "0.2.0",
 "configurations": [
     {
         "type": "chrome",
         "request": "launch",
         "name": "Attach to Chrome",
         "port": 9222,
         "webRoot": "${workspaceFolder}/src",
         "url":"http://localhost:8080",
         "sourceMaps": true,
         "sourceMapPathOverrides": {
             "webpack:///src/*":"${webRoot}/*"
         }
     }
 ]
}

4.修改config 目录下的 index.js

修改 webpack 的 sourcemap如果你是基于 webpack 打包的 vue 项目， 可能会存在断点不匹配的问题, 还需要做些修改：
打开根目录下的 config 目录下的 index.js 文件将dev 节点下的

• devtool 值改为 'eval-source-map'将dev节点下的
• cacheBusting 值改为 false

屏幕快照 2018-09-28 17.27.34.png

5. 之后一定要记得关闭所有的chrome 窗口，（一定要记得，不然会链接失败的）

6. 然后点击图2的步骤4，就会自动打开谷歌浏览器的窗口，对应的项目也会启动，然后你就可以开心的调试了。。。

7. vscode增加断点

屏幕快照 2018-09-28 17.32.20.png

看红色圈住的地方，点在200行数在的地方是打不上断点的

8. 调试

屏幕快照 2018-09-28 17.39.18.png

屏幕快照 2018-09-28 17.43.23.png

1. 运行到下一个断点处
2. 跳到下一行代码
3. 跳进断点函数里面进行调试
4. 跳出断点函数
5. 刷新
6. 停止程序