vscode如何直接调试chrome中的Vue项目

 第一步，下载 chrome debuger 插件

 

第二步，添加配置文档 launch.json，打开 debug 面板，点击 “添加配置”

 将下面配置文档覆盖到你的 launch.json 文件中

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "“Launch Chrome Instance",
            "url": "http://localhost:9001/#/",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceRoot}",
            "urlFilter": "http://localhost:9001/*"
        }
    ]
}

这里我配置了两个调试配置, “Launch Chrome Instance” 是直接通过 vscode 打开 Chrome 浏览器，也就是本地调试，整个 Chrome 实例都是可以用 vscode 控制的，”Attach to Chrome” 是调试外部环境的 Chrome 实例，也就是说这个 Chrome 浏览器的窗口是你另外打开的。

其中 9222 是浏览器远程调试的接口，意思是chrome会在9222端口打开，此时vscode可以attach到9222端口来调试。此配置需要在 Chrome 浏览器运行的时候加参数指定，只需可执行程序命令后面添加 –remote-debugging-port=9222 就可以了，如下：

找到你的chrome快捷键位置，点击属性，在目标处最后加上命令

注意：vscode打开的浏览器是没有一些用户信息的，比如书签、插件，例如我们需要使用vue的devtools就无法加载出来。所以建议还是使用Attach to Chrome的方式。

第三步，配置 webpack 的 config 文件, 在 dev 中修改如下两个配置

module.exports = {
  dev: {
    host: 'localhost',
    port: 9001,
    devtool: 'source-map',
    cacheBusting: false,
  }

第四步，打断点，调试

 先启动应用

npm install
npm run dev

第五步，关闭chrome浏览器

 关闭你的chrome所有浏览器窗口，也可在任务管理器杀死此进程。

第六步，调试

 选择你的调试配置，代码中打上断点，进行调试

 在你的工程页面中刷新页面，即可进入断点

在右上角处可进行相应操作。

也可以在chrome的开发者工具中使用vue的devtools插件。

至此，用vscode调试chrome中的vue项目的流程完毕。