在Vs code中使用debugger for chrome

如何配置debugger for chrome，包含attach、launch两种模式的介绍，讲述关键步骤应该呈现的状态。实际安装过程中出现的一些问题该如何解决。

欢迎补足。

下载插件

插件安装.PNG

安装完后记得重新加载

重新加载页面.PNG

将自己的项目先运行起来,我是用vue-cli搭建的。
注意要开启source-map功能
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#在浏览器中展示源代码

切换到debugger模式,为自己的项目添加配置

切换到debugger模式.PNG

选择chrome 环境后，你会得到下面这个文件

配置文件.PNG

request 是指具体的模式 有launch和attach两种

launch 模式会新打开一个浏览器窗口

url 浏览器标签页的url,这里要输入项目的有效地址
webRoot 源代码的位置,这一项非常重要,如果出现打断点不起作用或者断电的位置不对都与此项配置有关。

下面是我的配置，仅供参考!

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome",
        "url": "http://192.168.10.144:8080/#/",
        "webRoot": "${workspaceFolder}/src",
        "sourceMaps": true
      }
  ]
}

"webRoot": "${workspaceFolder}/src" 指向的位置就是项目中src文件夹

src文件夹.PNG

在源代码中设置一个断点,正常境况下断点是红色的

断点.PNG

启动插件

启动插件.PNG

点击绿色按钮启动后,vs code 的显示是这样的,你可以Ctrl + ` 打开控制台查看输出

vscode开启debugger后.PNG

同时会新弹出一个浏览器窗口

新弹出浏览器窗口.PNG

这时候,触发断点，正常境况下浏览器显示为

触发debugger后浏览器的样子.PNG

vscode 显示为

触发debugger后vscode的显示.PNG

如果控制台打印错误
(Error processing "setBreakpoints": Error: Could not resolve breakpoint): 需要再次检验项目是否开启sourcemap。

attach的开启

该模式是基于已开启浏览器窗口的监听，在配置上

url 一定是当前浏览器显示的路径,否则启动时会报错

attach模式url配置错误.PNG

下面是我的配置，仅供参考

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
    {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Chrome",
        "port": 9222,
        "url": "http://192.168.10.144:8080/#/",
        "webRoot": "${workspaceFolder}/src",
        "sourceMaps": true
    }
]
}

要开启chrome浏览器的远程调试端口

找到chrome浏览器快捷方式所在的文件夹 在目标一栏末尾添加一个空格后 在加入 --remote-debugging-port=9222

开启远程端口.PNG

注意端口要和配置的一致

点击确定后 重启浏览器，请直接双击配置好的快捷方式,其他地方的快捷方式可能为何其产生关联从而导致程序失效，报如下错误

attach无法连接错误.PNG

配置好后 开启成功后的样式如下。

正常开启attach模式.PNG