debug-vuejs-from-vs-code: unbound breakpoint when debugging vueJS app in chrome-CodePudding

Versions:

Visual Studio Code: Version: 1.59.1 (Universal)
vueJS: 3.0.0
Chrome: Version 94.0.4606.61 (Official Build) (x86_64)

I am using the javascript debugger built into VS Studio Code. My application structure (within the IDE) is like this:

Root (Maven parent project)
- backend (Maven child project in Java)
- frontend (Maven child project in vueJS)

That is, I have a Java backend that serves a vueJS frontend, and all of it is bundled together in a Tomcat web-archive (ie, war-file). This actually works nicely, and I can debug the Java code with the Tomcat extension in VS Studio Code.

The problem is debugging the vueJS logic. Note that my vueJS app incorporates the TypeScript plugin. The debug-vuejs-from-vs-code starts nicely (under the right debug-configuration, shown below), and I can set a Browser Breakpoint that actually triggers a break in the IDE. So the basic handshaking between VS Studio Code and Chrome is sound. My suspicion, thus, is that the configuration -- ie, either launch.json, tsconfig.json, or some other IDE setting -- is not quite right. Details follow.

vue.config.json:

module.exports = {
  // Change build paths to make them Maven compatible; see https://cli.vuejs.org/config/.
  outputDir: 'target/dist',
  assetsDir: 'static',
  publicPath: '/myapp',
  configureWebpack: {
    devtool: "source-map"
  }
}

Here, I have enabled source code mapping for webpack-minified files in production (ie, client-side scripts running in Chrome). Note that my app is rooted at /myapp in Chrome.

launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "pwa-chrome",
      "name": "vuejs: chrome",
      "request": "launch",
      "url": "http://localhost:8080/myapp",
      "breakOnLoad": true,
      "webRoot": "${workspaceFolder}/frontend",
      "outFiles": ["${workspaceFolder}/frontend/target/dist/static/js/*.js"],
      "vueComponentPaths": [
        "${workspaceFolder}/frontend/src/**/*.vue"
      ],
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///myapp/static/js/*": "${webRoot}/src/*",
        "webpack:///./~/*": "${webRoot}/node_modules/*",
        "webpack:////*": "/*",
        "webpack://?:*/*": "${webRoot}/src/*",
        "webpack:///([a-z]):/(. )": "$1:/$2",
        "webpack:///src/*": "${webRoot}/src/*",
      }
    }
  ]
}

Here, ${workspaceFolder} just corresponds to the root of my source-repo. The sourceMapPathOverrides are presently a mess -- a combination of the default mappings and my own attempts (thus fruitless) to map the Chrome-side javascript resource paths to the source-repo paths referenced in the IDE.

ts.config.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    // "inlineSourceMap": true,
    // "inlineSources": true,
    "sourceMap": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
    "types": [
      "webpack-env",
      "jest"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

One programmer suggested eliminating sourceMap boolean and, instead, specifying inlineSourceMap and inlineSources. I've commented out those settings, as I could not determine whether they help or not.

The vueJS-build generates outputs to target/dist, with this kind of directory/file layout:

target/dist
target/dist/favicon.ico
target/dist/index.html
target/dist/static
target/dist/static/css
target/dist/static/css/chunk-vendors.0f1ada3b.css
target/dist/static/css/app.b6011a27.css
target/dist/static/js
target/dist/static/js/app.74994c71.js.map
target/dist/static/js/chunk-vendors.377aa5d2.js
target/dist/static/js/chunk-vendors.377aa5d2.js.map
target/dist/static/js/app.74994c71.js
target/dist/static/img
target/dist/static/img/logo.82b9c7a5.png

To sum up, I believe the built-in javascript debugger is working fine, but that there is a configuration bug which results in Unbound Breakpoints in the vueJS app in Visual Studio Code.

Do you see the issue?

CodePudding user response：

VS Code documentation for the launch.json attribute sourceMapPathOverrides is scant. In particular, I could not locate any syntax rules for the mapping overrides. However, per earlier comment, visiting VS Code links in the panel served by Debug: Diagnose Breakpoint Problems does lead to helpful explanations and hints. I thus was able to uncover the faulty mappings, and for now, have resolved them this way:

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

With these mappings, I was able at least to get the JS debugger to "break on load" and, in fact, to break at the beginning of one of my component functions. There is still, though, an issue relating source-line to browser-side, minified JS logic, so I still cannot step into my custom functions. I will post any resolution to that issue here later.