vscode调试vuejs在firefox

Question

我一直在尝试在 Firefox 中调试我的 vuejs 应用程序，但到目前为止我无法做到。 Chrome 似乎工作正常，但在 Firefox 断点不起作用。

没有错误，应用程序只是运行而不会在断点处停止。

我正在使用官方 vuejs食谱中的配置

{
  "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}/" }]
    }
  ]
}

vue.config.js

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  },
  productionSourceMap: false,
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
};

与 Firefox 相比，chrome 中的调试似乎有很多帮助。 因此，许多像我这样想要将 Firefox 作为他们的主要浏览器的开发人员将高度赞赏它。

Answer 1

我建议看看这个配置：

    {
      "name": "Launch localhost",
        "type": "firefox",
        "request": "launch",
        "reAttach": true,
        "firefoxExecutable": "/usr/bin/firefox",
        "url": "http://localhost:8080/",
        "skipFiles": [
            "${workspaceFolder}/app/node_modules/**"
        ],
        "pathMappings": [
            {
                "url": "webpack:///",
                "path": "${workspaceFolder}/app/src/components/"
            }
        ]
    }

资源

Answer 2

我在使用 Visual Studio Code 的调试 function 时也遇到了麻烦。 所以我改用 Firefox 的调试器，它运行良好，满足了我的所有需求。 我希望这个答案可以帮助你。

我像这样调试我的 Vue.js 代码：

1. 在文件 vue.config.js 中（你已经这样做了）：

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

2. 使用以下语句在命令行中运行 Vue 应用程序：yarn serve

3. 在Firefox中，打开Developer tools里面的Debugger选项卡，在Webpack文件夹里面找到你要调试的src file.vue，然后设置断点调试。 （如果您不知道在哪里查找 src 文件，可以在这里查看我的屏幕：示例屏幕

Answer 3

只需打开浏览器，运行您的项目并打开您的开发人员工具，然后在此处标记。 你可以做论文的方式。

这是文档

https://firefox-source-docs.mozilla.org/devtools-user/debugger/

Answer 4

用于调试 Vue.js 应用程序的浏览器 devtools 扩展。 https://github.com/vuejs/vue-devtools