javascript - 如何使用谷歌浏览器调试 Vue 应用程序

Question

我想摆脱一直使用 console.log 并更频繁地使用 Chrome 开发者调试工具。我觉得这很好 How to stop using console.log() and start using your browser’s debugger关于一般调试(设置断点、逐行执行等)

但是当我尝试在现实生活中使用它时——这意味着在我正在处理的 vue (nuxt) 应用程序中使用它——我无法让它工作。

我的所有文件都组合成更复杂的 javascript 文件，我无法对其进行调试。

然后我找到了这个帖子: Debugging .vue component in Chrome我认为这会阐明这件事，但不幸的是我不知道该怎么做。

我添加了这个:

configureWebpack: {
  devtool: 'source-map'
},

到我的 nuxt.config.js

但我不会在调试器中看到所有 .js 文件的源映射。如果我能找到每个 vue 组件、每个商店文件以及我编写的其他实用程序文件的所有 js 文件，那就太好了。我不确定这是否可能，但我想必须有一种方法可以在调试器工具中找到我的 Javascript 代码来实际调试它。还是我错了？

Answer 1

Nuxt.js 在 nuxt.config.js 文件的构建属性中定义 sourcemap:第 1 步:

 build: {
        extend (config, { isClient }) {
          // Extend only webpack config for client-bundle
          if (isClient) {
            config.devtool = '#source-map'
          }
        }
 }

第 2 步:再次运行 npm 命令行(与其他页面不同，nuxt 不会在 nuxt.config.js 中应用代码

npm run dev

第三步:打开 chrome，按 ctrl + shift + I 或按 F12 打开源代码 via :///webpack ...

我在这位官员的网址中找到了这个:https://nuxtjs.org/api/configuration-build#extend