Debugging in VS Code


I’ve been trying to debug my Framework7/Vue + Webpack with VS Code. The initial versions with version 4 worked perfectly but a few updates later stepping through the code in VS code jumps to some framework7 internal code. When I use the Chrome Debugger though, it steps correctly through the code.
My launch.json file looks like:

“configurations”: [
“type”: “chrome”,
“request”: “launch”,
“name”: “Launch Chrome against localhost”,
“url”: “http://localhost:8080”,
“webRoot”: “${workspaceFolder}/src”,
“breakOnLoad”: false,
“sourceMaps”: true,
“sourceMapPathOverrides”: {
“webpack:///./src/services/": "${webRoot}/services/”,
“webpack:///src/pages/": "${webRoot}/pages/”,
“webpack:///src/components/": "${webRoot}/components/”,

In the Webpack.config.js file, the “devtool” option is set to “eval-source-map” for the debugging environment.
Did I miss any settings?


I do not know why, but I can tell that your conf is not working for me, but the following one is working:

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