'vscode debugging vuejs in firefox

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.

vue.jsdebuggingfirefoxvisual-studio-code


Solution 1:[1]

I suggest looking at this configuration:

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

Solution 2:[2]

I get troubles when using the debug function of Visual Studio Code too. So I use debugger of Firefox instead, it works well, satisfies all of my needs. I hope this answer may help you.

I debug my Vue.js code like this:

  1. Inside the file vue.config.js (you already did this):

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

  2. Run the Vue app in the command line using this statement: yarn serve

  3. In Firefox, open Debugger tab inside Developer tools, find the src file .vue you want to debug inside the folder Webpack there, then set breakpoints to debug. (if you don't know where to look up the src file, you can look at my screen here: example screen

Solution 3:[3]

just open browser, and run your project and open you developer tools, and mark point there. you can do essay way.

here is documentation

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 sebfried
Solution 3 Noor Fahad

Related Questions