vscode 在 firefox 中调试 vuejs

Question

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

没有错误，应用程序直接运行，没有在断点处停止。

我使用的是官方vuejs的配置cookbook

{
  "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

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

Answer 2

我建议看一下这个配置：

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

Source

Answer 3

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

这是文档

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

Answer 4

我在使用 Visual Studio 代码的调试功能时也遇到了麻烦。所以我改用 Firefox 的调试器，它运行良好，满足了我的所有需求。希望这个回答能对您有所帮助。

我这样调试 Vue.js 代码：

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

module.exports = { 配置网络包：{ 开发工具：'source-map' } ... };
运行 Vue 应用在命令行中使用这条语句：yarn serve
在Firefox中，打开Developer tools中的Debugger选项卡，在Webpack文件夹中找到你要调试的src文件.vue，然后设置断点进行调试。（如果你不知道在哪里查找 src 文件，你可以在这里查看我的屏幕：example screen

vscode 在 firefox 中调试 vuejs

vscode debugging vuejs in firefox

debugging

firefox

vue.js

visual-studio-code