Aspnetcore-angular-universal: Typescript debugging within VSCode

[ORuban]

This launch configuration allows me to debug typescript code:
{
"name": "[Development] Debug Client",
"type": "chrome",
"request": "launch",
"url": "${auto-detect-url}",
"sourceMaps": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}/Client"
}

• Note, that first need to launch app in separate process using dotnet run.
• userDataDir option forces to launch the separate chrome intance and may be removed

[MarkPieszak]

Is typescript debugging currently not working?

[ORuban]

Doesn't work for me when [Development] Launch Web is used.
Also, current "Launch Web" configs assume, that chrome is the default browser, that is not always true.

[MarkPieszak]

Let me take a look haven't reconfigured it in a while.
Thanks for letting me know!

[MarkPieszak]

I tried the configuration above (ran dotnet run in a separate cmd window), but it gave me:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Can't find a target that matches: ${auto-detect-url}.

Was there anything else that needed to be setup?

---

The other option is debugging within Chrome devtools:

Doing a Ctrl-P (or Command-P for MAC) has the file navigator pop-up, so you can just search for /containers or the filename specifically to easily get to things.

[ORuban]

what if you specify url directly here:"url": "${auto-detect-url}", ?

[MarkPieszak]

Didn't work when I did localhost:5000 there either.

Do you have this successfully working with the latest from Master? @ORuban

[ORuban]

I have checked and found a little mess. The following are the results (current master + latest VSCode (osx) + latest Debugger for Chrome):

1. Debugging within Chrome devtools works like a sharm. So double thanks!)
2. Breakpoints in typescript files are not enabled if use [Development] Launch Web configuration .
3. Default VSCode instance raises Debug adapter process has terminated unexpectedly error if I try to debug.
4. VSCode Insiders version raises the same Cannot connect to runtime process, timeout after 10000 ms error, as you mentioned. Actually, the problem is that new Chrome instance openshttp://%24%7Bauto-detect-url%7D/ url (and so cannot attach). However, if Chrome already has a tab opened with localhost:5000 url, debugging is working well.
5. Specifying url directly working for me in VSCode Insiders version.

{
"name": "[Development] Debug Client",
"type": "chrome",
"request": "launch",
"url": "http://localhost:5000",
"sourceMaps": true,
"userDataDir": "${workspaceRoot}/.vscode/chrome",
"webRoot": "${workspaceRoot}/Client"
},

Double check shows that Insiders version of VSCode has Debugger for Chrome 2.5.3, but default VSCode only 2.5.1 (no update available). So partially problem may be also with extension itself.

[MarkPieszak]

Just tried updating to 2.5.3 (with the latest VSCode, not the insider one or anything) and unable to get it working.

It would be great to have this ability though! Hope we can figure it out soon..

[StephenRedd]

Was looking at this a bit, and I've found a way to get it working. I'll tossing in a quick pull request consideration, though we should probably discuss some particulars and update the readme before merging it. This stuff is kinda rough right now... hopefully the various teams working on VS Code and extensions can smooth this out soon.

[MarkPieszak]

Yeah VSCode definitely doesn't make it too easy (at the moment) to setup debugging unless it's the most basic project. Checking out the PR later or tomorrow Stephen, great job!

[jrmcdona]

Yeah, VS Code F5 doesn't seem to work very well. It sometimes work and sometimes does not.
Seems like running via command line is more stable at the moment.

I cloned yesterday fyi

[isaacrlevin]

@jrmcdona have you tried after the latest vscode update as well as the updated version of this Repo?

[jrmcdona]

@isaac2004 which debug settings do you use to launch your app? Or what is your work flow you found best for debugging TypeScript.

Do you use "[Development] Launch Web" or a combination of server and browser commands?

I am having some luck with setting a breakpoint in Chrome dev tools sources on a TypeScript file.
But other times, the DIST folder is bundled and no TypeScript sources are found.

I am unable to see why this behavior is different at times.

[isaacrlevin]

@jrmcdona I imagine your devtool is doing something weird. devtool setting in webpack determines if you get sourcemaps or not. What is it set to?

[jrmcdona]

@isaac2004 think you are right there. I had touched my webpack.config because I was adding in the enviornments files (http://tattoocoder.com/angular-cli-using-the-environment-option/) and tring to some trickery and created a new script build:devMocked to get all mocked environment based on eviornment.devMocked.ts file. I must have done something wrong.

After putting back the web.config.js I can now run:

1. [Development] Launch the server (no browser)
2. [Development] Debug TypeScript

My breakpoints are hitting now. Thanks