vscode chrome vue 双端源码调试应用

这个案例展示了如何在 VS Code 中调试浏览器中运行的通过 Vue CLI 生成的 Vue.js 应用程序。

一、先决条件

请确保你安装了 VS Code 以及适合的浏览器，并且安装激活了最新版的相应的 Debugger 扩展：

Debugger for Chrome

此扩展已弃用。请改用 JavaScript Debugger扩展。因此咱们采用离线包安装，如下：

点击vscode【市场】，打开浏览器，点击【Download Extension】，即下载安装包。

最后，在vscode中安装：

二、在浏览器中展示源代码

在可以从 VS Code 调试你的 Vue 组件之前，你需要更新 webpack 配置以构建 source map。做了这件事之后，我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试，即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool property。将其更新为：

如果你使用的是 Vue CLI 2，请设置并更新 config/index.js 内的 devtool property：

devtool: 'source-map',

如果你使用的是 Vue CLI 3，请设置并更新 vue.config.js 内的 devtool property

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
    //或加入判断条件
    //devtool: process.env.NODE_ENV === 'production' ? '' : 'source-map'
  }
}

三、从 VS Code 启动应用

创建并修改 launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",//替换为自己的端口号
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    {
      "type": "firefox",
      "request": "launch",
      "name": "vuejs: firefox",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
    }
  ]
}

修改电脑默认浏览器为chrome，执行【npm run serve】后,启动debug：

期间可能遇到内存溢出异常，修改如下文件：

在任意 *.vue 文件中加入断点，即可在浏览器或vscode中源码调试：

注意：请使用vscode查看变量值，浏览器中不准确

视图面板查看实时变量：

DEBUG 控制台，操作变量（输入变量，回车）：