vscode与chrome调试配置与常见问题

这篇文章将介绍如何配置 Visual Studio Code 和 Chrome 来完成直接在 VS Code 断点调试代码。
核心：
VScode不能直接调试VUE代码，我们使用vscode 通过调用chrome浏览器许可的9222远程调试端口，实现对VUE代码的调试
1）准备工作：安装vscode，Chrome。
2）打开右键点击 Chrome 的快捷方式图标，选择属性，在目标一栏，最后加上–remote-debugging-port=9222 注意要用空格隔开。
3）点击 Visual Studio Code 左侧边栏的扩展按钮， 然后在搜索框输入Debugger for Chrome并安装插件，再输入，安装完成后点击 reload 重启 vscode。
4）点击 Visual Studio Code 左侧边栏的 调试 按钮， 在弹出的调试配置窗口中点击 设置 小齿轮， 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录，里面会有一个 lanch.json 文件并会自动打开，告诉vscode可以通过连接chrome浏览器的9222端口对http://localhost:8080/#/ 网页进行调试；

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}/src",
            "url":"http://localhost:8080/#/",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*":"${webRoot}/*"
            }
        }
    ]
}

5）打开根目录下的 config 目录下的 index.js 文件：
将dev 节点下的devtool 值改为 ‘eval-source-map’，确保此值会被webpack读到(做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系)。
6）启动node服务器：npm start ，等待其启动、自动打开chrome完毕，在调试页，按F5,Attach to Chrome，开始调试。

常见报错原因：

1) 无法连接到运行中的进程，将在10000毫秒后超时 - （原因：找不到有效的匹配目标: http://localhost:8080/#/)。
可能原因：
（1） lanch.json配置里url不正确，必须与chrome打开页面地址栏路径保持一致。
（2） chrome里未打开与配置里url(http://localhost:8080/#/)对应标签页。
2）由于未找到生成代码，已忽略断点。
可能原因：
（1）vscode自动生产的目录.vscode及该文件下的 lanch.json位置不正确。该文件夹应位于vue项目根目录，与src同级目录。
参考：https://segmentfault.com/a/1190000013392459
https://go.microsoft.com/fwlink/?linkid=830387
https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html