【VsCode、Vue】Debug Vue-Cli 2.0项目

先记录后整理

  在 VsCode 中要调试 Vue 项目，要进行如下操作。

创建 debug配置文件：

1.创建 launch.json 文件
2. 选中使用 chrome 调试
3. 会生成下图的文件
文件内容如下：

{
    // 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": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

修改 VsCode 配置:

1. 打开 VsCode 的 settings
2. 然后 搜索 debug 关键字
3. 选中 Debug: Allow Breakpoints Everwhere, 如下图:
   

Error:

crbug/1173575, non-JS module files deprecated.

  如果运行 debug 的时候提示 crbug/1173575, non-JS module files deprecated. 的时候，就是 launch.json 的配置有问题。
  解决方法，下面的注释说明:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            /**
             * url 这里的端口号，改成正在运行的服务的端口号。
             */
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}