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

Question

我想不再使用console.log，而是更频繁地使用Chrome开发者调试工具。我发现了这个不错的方法：如何停止使用console.log（）并开始使用浏览器的调试器进行常规调试（设置断点，逐行执行等）。

但是，当我尝试在现实生活中使用它时-意味着要在我正在研究的vue（nuxt）应用程序中使用它-我无法使其正常工作。

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

然后，我找到了这篇文章： 在Chrome中调试.vue组件， 我认为这可以为您解决这个问题，但是不幸的是，我不知道该怎么办。

我添加了这个：

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

到我的nuxt.config.js

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

Answer 1

Nuxt.js 在nuxt.config.js文件的build属性中定义了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

第3步：打开chrome，按ctrl + shift + I或按F12通过以下方式打开源：/// webpack ...

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

Answer 2

在 nuxt 配置文件中使用以下配置

    build: {
        filenames: {
          chunk: '[name].js'
        },
      extend(config, ctx) {
          const path = require('path');
          // Run ESLint on save
          if (ctx.isDev && ctx.isClient) {
            if (ctx.isDev && ctx.isClient) {
              config.devtool = '#source-map'
            }
          }
        }
}

希望它能满足您的目的，您可以在 javascript 代码中使用debugger关键字来有意设置断点，也可以在浏览器中设置断点。