Ich versuche, VueJS mit vscode zu debuggen. Ich habe viele Tutorials/Antworten ausprobiert, bekomme es aber nicht zum Laufen.

Deshalb habe ich beschlossen, hier eine Frage zu stellen: Vielleicht gibt es jetzt einen richtigen Weg, es zum Laufen zu bringen.

Ich habe ein Projekt erstellt, das mit dem identisch ist, das ich debuggen möchte, damit ich den Ausdruck hier posten kann.

Die Projektstruktur ist:

Dies ist der ungebundene Haltepunkt:

Die Registerkarte „Quellen“ in Chrome sieht folgendermaßen aus:

Detailliertere Registerkarte „Chrome-Quelle“:

vue.config.js:

/** * @type {import('@vue/cli-service').ProjectOptions} */ module.exports = { configureWebpack: { devtool: "source-map" }, transpileDependencies: true }

launch.json:

{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}", "sourceMapPathOverrides": { "**/src/*": "${webRoot}/src/*", }, "preLaunchTask": "vuejs: start" } ] }

tasks.json:

{ "version": "2.0.0", "tasks": [ { "label": "vuejs: start", "type": "npm", "script": "serve", "isBackground": true, "problemMatcher": [{ "base": "$tsc-watch", "background": { "activeOnStart": true, "beginsPattern": "Starting development server", "endsPattern": "Compiled successfully" } }], "group": { "kind": "build", "isDefault": true } } ] }

package.json:

{ "name": "test", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "vue-template-compiler": "^2.6.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

Aktualisiert

@A.D hat mich gefragt, ob ich versucht habe, Schlüsselwörter zu verwenden

debugger;

Die Ergebnisse sind wie folgt: Ps: Ich möchte nicht anfangen, einen Debugger in meinen Code zu schreiben...

Aber ich kann sehen, dass die Debugger-Datei auf Folgendes verweist:

C:UsersvinicDesktoptesttestjswebpack:testsrccomponentsHelloWorld.vue

Aber die Komponente src befindet sich tatsächlich

C:UsersvinicDesktoptesttestsrccomponentsHelloWorld.vue

Warum haben meine Haltepunkte keine Grenzen?

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

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "vuejs: chrome", "url": "http://localhost:8080", "webRoot": "${workspaceFolder}/src", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*", }, "preLaunchTask": "vuejs: start" } ] }

{ "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "vue-template-compiler": "^2.6.14" }, "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "parserOptions": { "parser": "@babel/eslint-parser" }, "rules": {} }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }