代码之家 › 专栏 › 技术社区 › Merc

如何使用google chrome调试vue应用程序

nuxt.js vue.js debugging google-chrome javascript

Merc · 技术社区 · 6 年前

我不想一直使用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代码来实际调试它。还是我错了?

1 回复 | 直到 5 年前

Huá»³nh Tú 5 年前

nuxt.js定义 源映射 来自nuxt.config.js文件的内部生成属性: 步骤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

Mahamudul Hasan 5 年前

在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代码中,以便自己有意设置断点,也可以在浏览器中设置断点。

ahmedmansour 5 年前

对于那些试图调试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