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 <xxxxx@xxxxx.xxx>",
  "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.