断点调试

November 08, 2023 1839

一、Chrome断点调试

（一）项目中配置

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

    1
    devtool: 'source-map',

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

    1
    2
    3
    4
    5
    6
    7
    module.exports = {
      configureWebpack: {
        devtool: 'source-map'
      }
    }

    这里配置source-map是为了使webpack处理过的压缩文件还能还原，方便调试

（二）chrome浏览器中sources中调试

webpack://文件夹下 . 目录下找到对应文件夹，其中第一个js文件就是可调试页面

二、Vscode中断点调试

（一）项目中配置

  1. 如果是基于 webpack 打包的 vue 项目， 可能会存在断点不匹配的问题, 还需要做些修改：

    • 打开根目录下的 config 目录下的 index.js （ Vue CLI 2）文件或者vue.config.js（Vue CLI 3）
    • 将dev 节点下的 devtool 值改为 ‘eval-source-map’
    • 将dev节点下的 cacheBusting 值改为 false
    1
    2
    3
    4
    5
    6
    7
    module.exports = {
      configureWebpack: {
        devtool: 'eval-source-map'
      }
    }

    配置值必须为：‘eval-source-map’，为了是解决vscode调试vue代码断点没有在项目中被命中问题

（二）创建 Debug 配置文件

  1. 点击 Visual Studio Code 左侧边栏的 调试 按钮， 在弹出的调试配置窗口中点击 设置 小齿轮， 然后选择 chrome, VS Code 将会在工作区根目录生成.vscode 目录，里面会有一个 lanch.json 文件并会自动打开

    用下面的配置文件覆盖自动生成的 lanch.json 文件内容。

    注意：URL中的端口号要跟WEBPACK配置的启动端口号一致

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    {
      // 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",
          "webRoot": "${workspaceRoot}/src",
          "url": "http://localhost:8080/#/",　
          "sourceMaps": true,
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*",
              "webpack:///./src/*": "${webRoot}/*"
           }
        }
      ]
    }