Version

3.2.20

Reproduction link

localhost:8080

Steps to reproduce

vue create new-app Manually select features Select All Except TypeScript yarn install yarn build yarn serve

Create launch.json File. Open Project Folder Using VSCode Set A Break Point Inside Vue File Press F5.

What is actually happening?

Break Point Inside .js File Is Working, But, Vue File Is Not. With JS Debugger / Debugger for Chrome / Debugger for Firefox. All Of Them.

What is expected?

Make Visual Studio Code Hit Vue File Break Point.

Don't Tell Me Using Vue Browser Extension. I Want To Use Visual Studio Code To Debug.

This Is Why I Want Live Coding. https://github.com/vuejs/vue-next/issues/4860

Create launch.json File.

Please specify. better yet, post a link to a repository we can run.

{ "version": "0.2.0", "configurations": [ { "name": "Launch", // "type": "chrome", // "type": "firefox", "type": "pwa-chrome", // "type": "pwa-node", "request": "launch", "url": "http://localhost:8080/", // "breakOnLoad": true, // "webRoot": "${workspaceRoot}/src/", // "file": "${workspaceFolder}/src/index.html", // "file": "${workspaceFolder}/src/main.js", "webRoot": "${workspaceFolder}/src", "breakOnLoad": true, "sourceMapPathOverrides": { "webpack:///src/": "${webRoot}/" } // "address": "127.0.0.1", // Browser Port // "port": 9222, // "preLaunchTask": "Serve" }, { "name": "Attach", // "type": "chrome", // "type": "firefox", // "type": "pwa-chrome", "type": "pwa-node", "request": "attach", // "url": "http://localhost:3000/", // "webRoot": "${workspaceRoot}/src/", // "address": "http://localhost:8080/", // "address": "127.0.0.1", "port": 9222, } ] }

and do you want to debug the running app at :8080 (Launch)? or rather :3000 (which dev command runs on) ? or 5050 (which serve runs on)? or the "pwa-node" one (Attach)?

Really, please just create a repository that has a command we can run to do exactly what you do. Then you don't have to explain everything and we can't misunderstand your explanations.

As A Vue User, I Just Simply Want The BreakPoint To Work After "yarn serve" So That I Can Start My Work Immediately (WithOut Wasting Time On IDE Debugger Configuration).

I understand what you want in general terms. What I don't know yet is what yo want to do exactly.

You have two choices:

1. Follow Issue requirements and try and help us help you as good as you can so we come to a solution faster.
2. Write "simple" demands and hope for the best.

Right now, I can't even tell if you have an issue with Vite, Vue, VSCode, or something else.

I'll reopen this if you choose to go with Option 1.

Don't Force Every One To Create Repo For Every Bug Report. This Issue Doesn't Need To Do That.

https://new-issue.vuejs.org/?repo=vuejs/vue#why-repro

The Problem Is Very Simple And I Said It Clear Enough. Even Too Much. I Think You Guys Don't Want To Solve This Problem. You Just Want To Close The Issue With Some Excuse. (Like My Issue Format Is Not Good, I Didn't Submit Repro, Or SomeThing Else .... There Will Always Excuse. Even If After I Submit A Repro.)

You're welcome to think what you want.

All I can say is: I am not that well versed with the debugger in VSCode. I sometimes use it to debug in jest tests, but haven't used it with a Vue & vite app yet in the form that you seem to do/want.

So I was asking for help with a setup that allows me to reliably reproduce your problem without running into issues related to my limited experience in that specific area, burning precious time in the process.

We ask for runnable reproductions so we can work as effectively as possible on the many issues and requests we receive. That means the users have to support us here to make our work better, more efficient and faster.

Don't assume everyone knows what you know and uses the workflows you use. Open Source is about collaboration. If you think it means writing a report like "I want to do X in my IDE of choice, make it happen!", then we likely have incompatible definitions here.

Yeah, I Want To Use Visual Studio Code To Debug Vue File. Make It Happen !! It's So Simple To Describe The Problem, It's Basic Feature And It's Broken. And It's Nothing About My Vue Code. Why So Many UnNecessary Request And Words Here ??