vue.js - vscode debugging vuejs in firefox

Question

I have been trying to debug my vuejs app in Firefox but so far i am unable to do it. Chrome seems to work fine, but in Firefox breakpoints do not work.

There is no error, the app just runs without stopping on breakpoints.

I am using the config from official 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
      }
    }
  }
};

There seems to be a lot of help available for debugging in chrome in contrast to Firefox. Therefore it will be highly appreciated by many developers like me who want to keep Firefox as their primary browser.

question from:https://stackoverflow.com/questions/65933696/vscode-debugging-vuejs-in-firefox

Answer 1

Browser devtools extension for debugging Vue.js applications. https://github.com/vuejs/vue-devtools