vscode调试vuejs在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.

Answer 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

Answer 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

Answer 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/

Answer 4

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