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

【问题标题】：How to debug Vue application with google chrome如何使用谷歌浏览器调试 Vue 应用程序
【发布时间】：2019-04-07 03:24:32
【问题描述】：

我想不再一直使用 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 组件、每个 store 文件以及我编写的其他实用程序文件的所有 js 文件，那就太好了。我不确定这是否可能，但我想必须有一种方法可以在调试器工具中找到我的 Javascript 代码来实际调试它。还是我错了？

【问题讨论】：

您使用的是什么编辑器/IDE？在 VS Code 中有专门的帖子调试 Vue：vuejs.org/v2/cookbook/debugging-in-vscode.html
vue devtools chrome 扩展-非常有用chrome.google.com/webstore/detail/vuejs-devtools/…
感谢@BennettDams 和 efrat。我已经有了 vue devtools，但我想更深入地挖掘..（或者我缺少这些工具的一些功能）。我正在使用原子。所以没有视觉代码。我已经找到那篇文章了，谢谢。

标签： javascript google-chrome debugging vue.js nuxt.js

【解决方案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通过: ///webpack 开源...

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

【讨论】：

我已经找到了一个解决方案来让它发挥作用。但是您的解决方案并没有解决我的问题，现在构建时间已经过去了......
@Merc 很久以前你问过sourcemap，现在你还有问题吗？还是您在谈论热重载的缓慢？请为读者澄清一下，我刚开始使用 nuxtjs 并想知道您在 OP 中提出的相同问题。
@bob 我询问了源映射。这是正确的。我应该将第一个解决方案标记为解决方案。（我确实在 cmets 中提到过......）但也如上所述（我提供了一个链接）它使构建速度非常慢，所以它绝对对开发没有帮助，因为等待构建的时间让我放慢了速度不仅仅是源图可以帮助我加快工作速度...... - 所以TLDR; 我仍然没有调试我的 vue 应用程序的好方法！
实际上不，我无法将解决方案标记为解决问题的解决方案，因为我从未测试过。正如我在评论中提到的，我自己用configureWebpack: { devtool: 'source-map' },...

【解决方案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关键字来故意设置断点，也可以在浏览器中设置断点。

【讨论】：

实际上，我前段时间用configureWebpack: { devtool: 'source-map' }, 让它工作了，但问题是构建时间太长了，我不能再用它了。只会慢一点。所以我的日志记录速度更快，构建时间也更快，而不是拥有漂亮的调试工具，但我必须等待最小的变化出现在屏幕上......（对此有什么想法吗？）但还是谢谢。
我在最初的问题?中发布的代码是什么。我不记得为什么它一开始就不起作用。反正就是太慢了……
构建过程慢没关系，因为Nuxt有热重载机制，所以运行后对代码的任何更改都会自动加载，在生产模式下不会造成任何缓慢，所以不用担心
只有这样。我试过了，当我对一些 scss 文件进行小的更改时，它需要更多的时间才能重新加载我的页面......这里也说明了这一点：webpack.js.org/configuration/devtool/#devtoolsource-maps - slow

【解决方案3】：

对于那些尝试调试 nuxt 并使用 typescript 的人。以下是使用 nuxt-ts 的 vs 代码配置。

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "client: chrome",
      "url": "http://localhost:{ADD_YOUR_APP_PORT_HERE}",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "server: nuxt",
      "args": ["dev"],
      "osx": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      },
      "linux": {
        "program": "${workspaceFolder}/node_modules/.bin/nuxt-ts"
      }
    }
  ],
  "compounds": [
    {
      "name": "fullstack: nuxt",
      "configurations": ["server: nuxt", "client: chrome"]
    }
  ]
}

您还需要像这样启用源映射：

// nuxt.config.ts
    extend (config: any, ctx: any) {
        if (ctx.isDev) {
          config.devtool = ctx.isClient ? 'source-map' : 'inline-source-map'
        }
    }

我在博客上写了详细教程：https://mansour.blog/enable-vs-code-debugger-for-nuxt-and-typescript

【讨论】：