在vue中设置 VS Code 断点

Bertha 。 2023-10-11 14:09 20阅读 0赞

## 在 VS Code 中调试 ##

每个应用，不论大小，都需要理解程序是如何运行失败的。在本案例中，我们会探索一些 VS Code 用户在浏览器中调试应用的工作流程。

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

注意：这个案例覆盖了 Chrome 和 Firefox。如果你知道如何在其它浏览器中进行 VS Code 调试，欢迎分享你的观点 (请看页面底部)。

### [先决条件][Link 1] ###

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 [Debugger for Chrome][] 扩展的最新版本。

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

*  [Debugger for Chrome][]
 *  [Debugger for Firefox][]

请通过 [Vue CLI][]，遵循它的 [Vue CLI 教程][Vue CLI 1]并创建一个项目。然后进入这个新创建的应用的目录，打开 VS Code。

#### [在浏览器中展示源代码][Link 2] ####

在可以从 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'
      }
    }

#### [从 VS Code 启动应用][VS Code] ####

<p class=”tip>我们这里假设端口号为 `8080`。如果与实际情况不符 (比如 `8080` 端口已经被占用且 Vue CLI 为你自动选取了另一个端口号)，可以修改相应的配置。

点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图，然后点击那个齿轮图标来配置一个 `launch.json` 的文件，选择 **Chrome/Firefox：Launch** 环境。然后将生成的 `launch.json` 的内容替换成为相应的配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk5OTE3_size_16_color_FFFFFF_t_70][]

{
      "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}/" }]
        }
      ]
    }

### [设置一个断点][Link 3] ###

1.  在 **`src/components/HelloWorld.vue`** 的 `line90` 的地方设置一个断点，这里的 `data` 函数返回一个字符串。
    
    ![断点渲染器][format_png]
2.  在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用：
    
        npm run serve
3.  来到 Debug 视图，选择**“vuejs：chrome/firefox”**配置，然后按 F5 或点击那个绿色的 play 按钮。
4.  随着一个新的浏览器实例打开 `http://localhost:8080`，你的断点现在应该被命中了。
    
    ![命中断点][format_png 1]

### [替代方案][Link 4] ###

#### [Vue Devtools][] ####

我们还有一些其它的调试方法，复杂度不尽相同。其中最流行和简单的是使用非常棒的 [Chrome 版本][Chrome]和 [Firefox 版本][Firefox]的 Vue.js devtools。使用 devtools 有很多好处，比如它可以让你能够实时编辑数据 property 并立即看到其反映出来的变化。另一个主要的好处是能够为 Vuex 提供时间旅行式的调试体验。

![Devtools Timetravel Debugger][]

请留意如果页面使用了一个生产环境/压缩后的 Vue.js 构建版本 (例如来自一个 CDN 的标准的链接)，devtools 的审查功能是默认被禁用的，所以 Vue 面板不会出现。如果你切换到一个非压缩版本，你可能需要强制刷新该页面来看到它。

#### [简单的 debugger 语句][debugger] ####

上述示例的工作流程非常好。不过这里还有一个替代选项，就是你可以直接在代码中使用[原生的 `debugger` 语句][_debugger_]。如果你选择了这种方式，请千万记得当你调试完毕之后把这个语句移除。

[Vue CLI]: https://github.com/vuejs/vue-cli
[Link 1]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E5%85%88%E5%86%B3%E6%9D%A1%E4%BB%B6
[Debugger for Chrome]: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
[Debugger for Firefox]: https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-firefox-debug
[Vue CLI 1]: https://cli.vuejs.org/
[Link 2]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E5%9C%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E5%B1%95%E7%A4%BA%E6%BA%90%E4%BB%A3%E7%A0%81
[VS Code]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E4%BB%8E-VS-Code-%E5%90%AF%E5%8A%A8%E5%BA%94%E7%94%A8
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk5OTE3_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200717105221882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwOTk5OTE3,size_16,color_FFFFFF,t_70
[Link 3]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E8%AE%BE%E7%BD%AE%E4%B8%80%E4%B8%AA%E6%96%AD%E7%82%B9
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jbi52dWVqcy5vcmcvaW1hZ2VzL2JyZWFrcG9pbnRfc2V0LnBuZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jbi52dWVqcy5vcmcvaW1hZ2VzL2JyZWFrcG9pbnRfaGl0LnBuZw?x-oss-process=image/format,png
[Link 4]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E6%9B%BF%E4%BB%A3%E6%96%B9%E6%A1%88
[Vue Devtools]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#Vue-Devtools
[Chrome]: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
[Firefox]: https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/
[Devtools Timetravel Debugger]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jbi52dWVqcy5vcmcvaW1hZ2VzL2RldnRvb2xzLXRpbWV0cmF2ZWwuZ2lm
[debugger]: https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html#%E7%AE%80%E5%8D%95%E7%9A%84-debugger-%E8%AF%AD%E5%8F%A5
[_debugger_]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/debugger