I have the following problem. I want to debug my Vue.js project with VS Code and Chrome. So I follow the official guide on the website Guide but it dont work. The Problem is that I always get the error :
unverified breakpoint What do I wrong?
This is my vue.config.js
module.exports = { configureWebpack: { devtool: 'source-map' } } This is my debugging stetting:
{ // 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", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:/src/*": "${webRoot}/*", "webpack:///./*": "${webRoot}/*", "webpack:///src/*": "${webRoot}/*", "webpack:///*": "*", "webpack:///./~/*": "${webRoot}/node_modules/*", "meteor://💻app/*": "${webRoot}/*" } } ] } And this is my package.json
"name": "test-app", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, When I try npm run serve I get the error message unverified breakpoint and my breakpoint is never be hit.
I use the vue-cli 3 to generate the project.
Can someone help me pls?
Update
Maybe something is wrong with the path. Because when i run .scripts in the debugger console in VS Code I get paths like this
(c:\Users\XY\Desktop\Vue\route-app\webpack:\src\main.ts) But there is no folder webpack:. But I have no idea why he is thinking that there is a folder. He make this in every file.
And in my tsconfig.js I already have "sourceMap": true.
Update 2
When I check the checkbox All Exceptions, VS Code show me all Exceptions in my App (they are catched). But my Breakpoints still dont work.
Update 3
My project looks like this
C:\Users\User\Desktop\Vue\route-app | -----.vscode | -----launch.json | -----node_modules | ----- modules etc. | -----public | ----- index.html | ----- manifest.json | ----- favicon.ico | -----src | ----- components | ----- all my components.vue files | ----- views | ----- all my views.vue files (this files are for routing) | ----- App.vue | ----- main.ts | ----- registerServiceWorker.ts | ----- router.ts | ----- shims-tsx.d.ts | ----- shims-vue.d.ts | ----- store.ts | -----.postcssrc.js | -----babel.config.js | -----package-lock.json | -----package.json | -----tsconfig.json | -----tslint.json | -----vue.config.js 1 Answers
Answers 1
This debug adapter doesn't use the same syntax as the Chrome debug adapter: remove the * at the end of url and path:
"webpack:///src/": "${webRoot}/" 
0 comments:
Post a Comment