Breakpoints not working properly with devtool strategy in the Quasar document on fresh new project

[umonaca]

Probably related issue: #8235 . This is not a duplicate. It may or may not be a document issue. I am unable to determine the reason.
In the quasar document https://quasar.dev/start/vs-code-configuration the devtool strategy devtool: 'source-map' prevents breakpoints to work properly in VS Code with Chrome. I've successfully reproduced this bug in a fresh new quasar project.
By simply removing this line I am able to properly debug in Chrome, and it pauses properly at the breakpoint.

To reproduce

1. Run quasar create, enter anything
2. Add devtool: 'source-map' to the build section
3. Run quasar dev
4. Create a launch.json according to the document at https://quasar.dev/start/vs-code-configuration
5. Start VS Code. Just add a QButton to Index.vue. See the following section for the code. Set breakpoint at the first line of simulateProgress().
6. It will break on loading of the page, which is unexpected. Press F5 to continue. Then click the button. This time it does not break at all.
7. Now, to fix the problem above, just remove the `devtool: 'source-map' line. Stop and restart the debugger. This time it will only break at the that line when the button is clicked.

Expected behavior
The breakpoint should work for VS Code with Chrome. And it should only break when it runs the given line.

Index.vue

<template>
  <q-page class="flex flex-center">
    <img
      alt="Quasar logo"
      src="~assets/quasar-logo-vertical.svg"
      style="width: 200px; height: 200px"
    />
    <q-btn
      :loading="loading1"
      color="secondary"
      @click="simulateProgress(1)"
      label="Button"
    />
  </q-page>
</template>

<script>
export default {
  name: "PageIndex",
  data() {
    return {
      loading1: false
    };
  },
  methods: {
    simulateProgress(number) {
      // we set loading state
      this[`loading${number}`] = true;
      // simulate a delay
      setTimeout(() => {
        // we're done, we reset loading state
        this[`loading${number}`] = false;
      }, 3000);
    }
  }
};
</script>

Just some copy-and-paste from QButton document.

quasar.conf not working properly (all lines are auto generated except the devtool config)

/*
 * This file runs in a Node context (it's NOT transpiled by Babel), so use only
 * the ES6 features that are supported by your Node version. https://node.green/
 */

// Configuration for your app
// https://v1.quasar.dev/quasar-cli/quasar-conf-js
/* eslint-env node */
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = function (/* ctx */) {
  return {
    // https://v1.quasar.dev/quasar-cli/supporting-ts
    supportTS: false,

    // https://v1.quasar.dev/quasar-cli/prefetch-feature
    // preFetch: true,

    // app boot file (/src/boot)
    // --> boot files are part of "main.js"
    // https://v1.quasar.dev/quasar-cli/boot-files
    boot: [
      
      'axios',
    ],

    // https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
    css: [
      'app.scss'
    ],

    // https://github.com/quasarframework/quasar/tree/dev/extras
    extras: [
      // 'ionicons-v4',
      // 'mdi-v5',
      // 'fontawesome-v5',
      // 'eva-icons',
      // 'themify',
      // 'line-awesome',
      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!

      'roboto-font', // optional, you are not bound to it
      'material-icons', // optional, you are not bound to it
    ],

    // Full list of options: https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-build
    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      devtool: 'source-map',

      // transpile: false,

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: false, // https://v1.quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://v1.quasar.dev/quasar-cli/handling-webpack
      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain
      chainWebpack (chain) {
        chain.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: [ 'js', 'vue' ] }])
      },
    },

    // Full list of options: https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-devServer
    devServer: {
      https: false,
      port: 8080,
      open: true // opens browser window automatically
    },

    // https://v1.quasar.dev/quasar-cli/quasar-conf-js#Property%3A-framework
    framework: {
      iconSet: 'material-icons', // Quasar icon set
      lang: 'en-us', // Quasar language pack
      config: {},

      // Possible values for "importStrategy":
      // * 'auto' - (DEFAULT) Auto-import needed Quasar components & directives
      // * 'all'  - Manually specify what to import
      importStrategy: 'auto',

      // For special cases outside of where "auto" importStrategy can have an impact
      // (like functional components as one of the examples),
      // you can manually specify Quasar components/directives to be available everywhere:
      //
      // components: [],
      // directives: [],

      // Quasar plugins
      plugins: []
    },

    // animations: 'all', // --- includes all animations
    // https://v1.quasar.dev/options/animations
    animations: [],

    // https://v1.quasar.dev/quasar-cli/developing-ssr/configuring-ssr
    ssr: {
      pwa: false
    },

    // https://v1.quasar.dev/quasar-cli/developing-pwa/configuring-pwa
    pwa: {
      workboxPluginMode: 'GenerateSW', // 'GenerateSW' or 'InjectManifest'
      workboxOptions: {}, // only for GenerateSW
      manifest: {
        name: `Quasar App`,
        short_name: `Quasar App`,
        description: `A Quasar Framework app`,
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#027be3',
        icons: [
          {
            src: 'icons/icon-128x128.png',
            sizes: '128x128',
            type: 'image/png'
          },
          {
            src: 'icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'icons/icon-256x256.png',
            sizes: '256x256',
            type: 'image/png'
          },
          {
            src: 'icons/icon-384x384.png',
            sizes: '384x384',
            type: 'image/png'
          },
          {
            src: 'icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    },

    // Full list of options: https://v1.quasar.dev/quasar-cli/developing-cordova-apps/configuring-cordova
    cordova: {
      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
    },

    // Full list of options: https://v1.quasar.dev/quasar-cli/developing-capacitor-apps/configuring-capacitor
    capacitor: {
      hideSplashscreen: true
    },

    // Full list of options: https://v1.quasar.dev/quasar-cli/developing-electron-apps/configuring-electron
    electron: {
      bundler: 'packager', // 'packager' or 'builder'

      packager: {
        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options

        // OS X / Mac App Store
        // appBundleId: '',
        // appCategoryType: '',
        // osxSign: '',
        // protocol: 'myapp://path',

        // Windows only
        // win32metadata: { ... }
      },

      builder: {
        // https://www.electron.build/configuration/configuration

        appId: 'newchrome'
      },

      // More info: https://v1.quasar.dev/quasar-cli/developing-electron-apps/node-integration
      nodeIntegration: true,

      extendWebpack (/* cfg */) {
        // do something with Electron main process Webpack cfg
        // chainWebpack also available besides this extendWebpack
      }
    }
  }
}

Versions
OS: Windows
Node: 14
Browser: Chrome 91.0.4472.77
Pkg quasar: v1.15.20
Pkg @quasar/app: v2.2.9
Dev mode: spa
VS Code: 1.56.2
VS Code Extension: Debugger for Chrome: v4.12.12

package.json auto generated by quasar cli

{
  "name": "newchrome",
  "version": "0.0.1",
  "description": "A Quasar Framework app",
  "productName": "Quasar App",
  "author": "xxxx <[email protected]>",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^7.21.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-vue": "^7.7.0",
    "eslint-webpack-plugin": "^2.4.0"
  },
  "browserslist": [
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

[umonaca]

I have managed to fix this by changing sourceMapPathOverrides in launch.json to the following:

"sourceMapPathOverrides": {
   "webpack:///src/*.vue": "${webRoot}/*.vue",
   "webpack:///./src/*.js": "${webRoot}/*.js"
}

I have not thoroughly tested it yet but it seems to be working. Reference: https://stackoverflow.com/questions/52648552/debugger-settings-for-chrome-in-vs-code-with-vue-js

I am not closing this issue since I believe the Quasar document should be changed to reflect receent changes in VS Code or Webpack (not sure when and where this breaking change was introduced).

[jaybo]

Having the same issue: Can't set breakpoints in Vue files in VSCode on Win10.

1. Generate fresh new app with Quasar 3.1.0 and all settings default.
2. Tried both with and without Typescript support.
3. Using VSCode 1.59.1, tried both with and without Chrome debugger.

Finally got it to work using:

"sourceMapPathOverrides": {
    "webpack://junk2/./src/*": "${webRoot}/*"
}

Where junk2 is the project root directory

Beat. Further update...
Tried using cheap-source-map in quasar.conf.js and now all breakpoints are being hit. Is this some kind of caching issue?

build: {
        devtool: "cheap-source-map", 

[Sell24]

For the life of me, I swear I have tried every combination of 'sourceMapPathOverrides' people have suggested and I just cant get it to hit my breakpoints.

[exemplari]

@jaybo Thanks. I ended up with this.

"sourceMapPathOverrides": {
    "webpack://${workspaceFolderBasename}/./src/*": "${webRoot}/*",
    "webpack://${workspaceFolderBasename}/./*.js": "${workspaceFolder}/*.js"
},

The first line gets most of the project source files.
The second line was needed depending on which debugger was used to silence an error from js files in /.quasar folder

[xavier-rodet]

This is crazy...

Thanks @jaybo & @exemplari your config helps me a bit, but I still got really weird issues...

Step 1/ Create new quasar project
=> breakpoint doesn't work

Step 2/ Update launch.json config with this one:

    {
      "type": "chrome",
      "request": "launch",
      "name": "Quasar App: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack://${workspaceFolderBasename}/./src/*": "${webRoot}/*"
      }
    }

=> Now breakpoint does work on this new project BUT

Step 3/ If I copy this project into a new folder,
=> breakpoints won't work anymore... (for the new folder)

What is going on with VSCode here ? oO

[exemplari]

@xavier-rodet and anyone lost in debug strangeness.

Using VS-Code nightly debugger (ms-vscode.js-debug-nightly) and the webpack 5 style sourceMap is the solution. However, windows 10 is the underlying problem.

There is an issue with Windows 10 / WSL2 and reserved ports , since around version 2004 . I haven't seen any real explanation of this but here is an example microsoft/WSL#5306

For me this results in trying to launch the debugger and it sometimes working, sometimes not, depending on the randomly assigned ports used for connecting vscode to the browser. Testing this on windows 8 machine and the debugger never miss.

[luxi78]

Same issue bothers me a lot, is there any solution update?

[Claus1]

I found that debugger works on .js files, but not on .vue. I use pug for templates. If I use standard html then breakpoints works ok. What it can be?

My configuration:

"configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Quasar App: chrome",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src", //src makes problems
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack://${workspaceFolderBasename}/./src/*": "${webRoot}/*",
                "webpack://${workspaceFolderBasename}/./*.js": "${workspaceFolder}/*.js"
            }
        }       
    ]

build section from quasar.conf.js

 build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      extendWebpack (cfg) {
        cfg.module.rules.push({
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        })
      },

      devtool: 'eval-source-map', // 'source-map',

      chainWebpack (chain) {
        chain.module.rule('pug')
          .test(/\.pug$/)
          .use('pug-plain-loader')
            .loader('pug-plain-loader')

        chain.plugin('eslint-webpack-plugin')
          .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
      },
      transpile: true,
   },
 },

[hawkeye64]

I am moving this to Discussions as this is not a Quasar issue.

[ko25july]

I'm work with:

1. quasar.conf.js

   build: {
        devtool: "source-map"
    }

2. launch.json

   "webRoot": "${workspaceFolder}/src",
        "sourceMapPathOverrides": {
            "webpack://${workspaceFolderBasename}/./src/*": "${webRoot}/*"
        },
        "sourceMaps": true,

[Watanuki12138]

I am trying your config.Breakpoints on template work.But Breakpoints on script code dont work.

[robMolloy]

The following worked for me.

quasar.conf.js

build: {
     devtool: "source-map"
 }

launch.json

      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack://${workspaceFolderBasename}/./src/*": "${webRoot}/*"
      },

[ljubadr]

Thanks @robMolloy. With that setting breakpoints work for vue with javascript

Is there a way to get the breakpoints working with typescript? Did anyone have luck with that? I tried different combinations of devtool and sourceMapPathOverrides and nothing worked. I was testing breakpoints with fresh quasar install, no custom logic

Only way that I can get the debugger to stop is if I use the keyword debugger; which is slow and it doesn't map to original files but to compiled files...

[jaybo]

@robMolloy @ljubadr I'm having the same issue. I just converted a reasonably large Quasar JavaScript project to TypeScript, and everything is working fine EXCEPT I can't set breakpoints in .vue files. I think I've tried all permutations of possible project file and launch settings, along with different versions of the relevant libraries. Since @hawkeye64 indicates this isn't a Quasar issue, I'm at a loss how to fix it.

1. Will switching to Vite have any impact?
2. Does ANYBODY have TypeScript/Vue debugging working? If so can you please post your quasar.conf.js and launch.json?

[TuringJest]

Can't get it to work with Webstorm either. Breakpoints are not hit, frustrating.

[luxi78]

Still no way to make it work

[TuringJest]

Seems to be related to this https://ckhconsulting.com/vue-typescript-debuggers/
A quick test to move the script section above the template section kind of confirms this. I got some active breakpoints, but the line numbering is still off.

I also tried Vite + VsCode and debugging is working properly everywhere (Vue, script setup TS, etc.).
Not sure if we can migrate to Vite however.

[rdoepke]

I just wanted to confirm this: I have created a new project - this time using yarn and vite with the full stack of combinations (vue+script setup+ts) and it worked for both VsCode and IntelliJ without further configuration. For VsCode i had to adjust the launch configuration according to the quasar docs. In Jetbrains I just had to configure to start chrome with debugging. Works like a charm and feels like mature development.

[TuringJest]

Yep, Vite support for IntelliJ was added somewhen in May. Same for Webstorm.

We switched to Vite but I have to say that it feels much slower on the same quasar project. It rebuilds more often and HMR doesn't always capture all changes. Webpack with esbuild is 🔥

[serefarikan]

Thanks to you both @rdoepke and @TuringJest I've been looking for a way to get debugging work with quasar and ts for days now. I somehow missed this thread and got stuck in various discussions about how to get it working with webpack, none of which worked for me. I can confirm that following the quickstart instructions from quasar and choosing yarn/ts/vite gives me a project that can be debugged as expected out of the box, using webstorm. so in case anybody encounters this, it is the working combination (at least the only one I could find) as of writing of this reply :)