在 VS Code 中调试

每个应用程序都会达到需要理解故障的程度，无论大小。在本菜谱中，我们将探讨一些针对希望在浏览器中调试其应用程序的 VS Code 用户的工作流程。

本菜谱展示了如何在 VS Code 中调试 Vue CLI 应用程序，因为它们在浏览器中运行。

注意：本菜谱涵盖 Chrome 和 Firefox。如果您知道如何使用其他浏览器设置 VS Code 调试，请考虑分享您的见解（参见页面底部）。

先决条件

确保您已安装 VS Code 和您选择的浏览器，以及已安装并启用了最新版本的相应调试器扩展。

• Chrome 调试器
• Firefox 调试器

按照 vue-cli 中的说明安装并创建一个项目，并按照 Vue CLI 指南 进行操作。进入新创建的应用程序目录并打开 VS Code。

在浏览器中显示源代码

在您可以在 VS Code 中调试 Vue 组件之前，您需要更新生成的 Webpack 配置以构建源映射。我们这样做是为了让我们的调试器能够将压缩文件中的代码映射回其在原始文件中的位置。这确保即使您的资产经过 Webpack 优化后，您也可以调试应用程序。

如果您使用的是 Vue CLI 2，请在 config/index.js 中设置或更新 devtool 属性。

devtool: 'source-map',

如果您使用的是 Vue CLI 3，请在 vue.config.js 中设置或更新 devtool 属性。

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

从 VS Code 启动应用程序

我们假设端口为 8080。如果不是这种情况（例如，如果 8080 已被占用，而 Vue CLI 自动为您选择另一个端口），只需相应地修改配置即可。

单击活动栏中的调试图标以调出调试视图，然后单击齿轮图标以配置 launch.json 文件，选择 **Chrome/Firefox: 启动** 作为环境。将生成的 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}/" }]
    }
  ]
}

设置断点

1. 在 src/components/HelloWorld.vue 中的 第 90 行 设置一个断点，data 函数在该行返回一个字符串。

   

2. 在根文件夹中打开您喜欢的终端，并使用 Vue CLI 提供应用程序。

   npm run serve

3. 转到调试视图，选择 **‘vuejs: chrome/firefox’** 配置，然后按 F5 或单击绿色播放按钮。

4. 当新的浏览器实例打开 http://localhost:8080 时，您的断点现在应该会被命中。

   

替代模式

Vue Devtools

还有其他调试方法，复杂程度各不相同。其中最流行且最简单的方法是使用出色的 Vue.js 开发者工具 for Chrome 和 for Firefox。使用开发者工具的一些好处是，它们使您能够实时编辑数据属性，并立即看到更改反映出来。另一个主要好处是能够对 Vuex 进行时间旅行调试。

请注意，如果页面使用 Vue.js 的生产/最小化版本（例如来自 CDN 的标准链接），则默认情况下会禁用开发者工具检查，因此 Vue 面板不会显示。如果您切换到非最小化版本，您可能需要对页面进行硬刷新才能看到它们。

简单的调试器语句

上面的示例有一个很好的工作流程。但是，还有一个替代方案，您可以在代码中直接使用 本机调试器语句。如果您选择以这种方式工作，重要的是要记住在完成操作后删除这些语句。

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    const hello = 'Hello World!'
    debugger
    this.message = hello
  }
};
</script>

鸣谢

本菜谱基于 Kenneth Auchenberg 的贡献，可在此处获取。