Debugging in VS Code and Chrome not working with TypeScript

[YoannBureau]

Version

3.1.1

Reproduction link

https://github.com/YoannBureau/vuejs-vscode-ts-ko

Node and OS info

NPM 6.4.1

Steps to reproduce

• npm install
• in vs code, install "Debugger for Chrome" extension if not done yet
• npm run serve
• set a breakpoint in HelloWorld.vue line 43
• start debug using "vuejs: chrome" debug config (FYI I reproduced the same steps as here: https://fr.vuejs.org/v2/cookbook/debugging-in-vscode.html )
• click the button in the component

What is expected?

Breakpoint should be hit

What is actually happening?

Breakpoint is not hit

---

It's working great with Js, but ko with Ts

[YoannBureau]

Any idea, friends?

[amsokol]

+1

[AidanGG]

I was able to set breakpoints directly in Chrome by going to Sources, webpack://. and this would work, but is definitely suboptimal. Are there perhaps any better options?

[YoannBureau]

Well, what we are looking for is setting breakpoints directly in vs code, not in Chrome. What @AidanGG did work but it's not practical at all.

[LinusBorg]

Edit: Forget the following, I misread your whole issue, mixing it up with an older one about mocha-webpack

unfortunately, it seems that the webpack-mocha based setup doesn't work with the vacode debugger.

Edit: See here: zinserjan/mocha-webpack#266

Doesn't seem to be vue-cli specific. Maybe there's something for you to try in that issue? We can go and work from there...

[YoannBureau]

Can the team reproduce the isssue? Might be cool to have this feature working :)

[SeanMBe]

Jetbrains is tracking this issue also reported for webstorm here: https://youtrack.jetbrains.com/issue/WEB-34557

Is there anything I can do to help resolve?

[ffxsam]

Just noticed this tonight when I was following the instructions on debugging using VS Code, which do not work for Vue TS projects.

[ffxsam]

This launch.json works for me:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "breakOnLoad": true,
      "sourceMaps": true,
      "disableNetworkCache": true,
      "sourceMapPathOverrides": {
        "webpack:///*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///src/*": "${webRoot}/src/*"
      }
    }
  ]
}

[jschoedt]

@ffxsam when you write "works" - are you able to set breakpoints in vue files? I am only able to debug ts files.

[ffxsam]

@jschoedt Yep, breakpoints in vue files works great. The only thing that doesn't seem to work with the debugger is when you hit async functions. Things really fall apart then.

[ayyron-dev]

Is this isolated to TypeScript? I am not using typescript and I've found that my breakpoints in async functions are hit but it falls apart when the first await is executed; the debugger gets lost and can't step past that line.

[rdhelms]

Here's a slight variant to the example that @ffxsam provided. This configuration is working decently for us with Vue Cli 4.2.3 and TypeScript:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://localhost:8080",
            "webRoot":"${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*"
            },
            "skipFiles": [
                "${workspaceFolder}/node_modules/**/*"
            ]
        }
    ]
}

So far we haven't seemed to need the other sourceMapPathOverrides, and adding the skipFiles seemed to help. I'd be interested to know if anyone else finds use cases for the other sourceMapPathOverrides.

I also want to reiterate the strangeness with trying to debug some await code. Sometimes it works, but other times VSCode totally won't allow setting a breakpoint on a line with await. Our current workaround is literally to write a non-async line of code above or below the await-ed line, and stick the breakpoint there. So there definitely still seems to be some room for improvement.

await someAsyncThing()  // Can't add breakpoint here
console.log('stop here')  // Can add breakpoint here