Quote from Jes Kirkup on February 28, 2018, 1:51 pm

Hi Alexander,

Have you tried adding the "debugger" keyword where you want to break?  I've found the best approach for me to be to use VS code to edit the front end while VS is running/debugging the solution (I'm using the all in one version).  Having a lightweight editor for the front end avoids the situation where VS slows down while its doing stuff in the background or with breaks set in the web api.

Incidentally VS Code extensions "Angular Language Service" (for intellisense, pulling in references, help etc) and "Angular Files" (equivalent to the ng generate to scaffold) are both "must have" extensions for me.  Together they provide a far nicer and lightweight environment for maintaining typescript and Angular resources in the SPA project.

So I'm really using Visual Studio for the backend web api debugging, VS Code on the front end to make changes and let webpack do its thing.  Having the dev tools open in Chrome will disable VS STudio debugging BTW.

In this scenario I've found that Chrome is the best option for debugging the JavaScript. This ways everything keeps running smoothly and you can debug the whole solution while changing the Angular code.

I would be interested to know what works for others.

Cheers

Jes

Quote from trailblazer2006 on February 28, 2018, 2:14 pm

Hi Jes.

I don't use VS Code in my work, so I can't say anything about it. Debugging TypeScript in Chrome really works faster than in VS, but I prefer to work in a single environment. Unfortunately in the Pro version script debugging does not work for me, only in the Chrome console. With the free version everything was fine, I do not understand where the problem is.

Regards, Alexandr.

Quote from Jes Kirkup on February 28, 2018, 5:51 pm

Hi Alexandr

So does Visual Studio just ignore the debugger statement then?   I dont have your problem with debugging in VS 2017 incidentally with the pro version so may be something in your environment.  Have you tried launching with a different browser?

Cheers

Jes

Quote from trailblazer2006 on March 1, 2018, 7:39 am

Hi Jes.

What do you mean "debugger statement"? When I debug free app, my script list looks like on first screenshot 

main-client.js expanded and can see my components in child scripts. But then I debug pro solution, my main-client.js not expanded 

In both free and pro dist folder I have a .map files

.

Regards, Alexandr.

Quote from Eben Monney on March 1, 2018, 8:33 am

My experience with debugging typescript/JavaScript code in VisualStudio for SPA applications has not been consistent. Due to this inconsistencies I favor debugging client side code with the browser's developer tools. This has been efficient and reliable.

This particular behavior is best handled by VisualStudio support since it is not specific to QuickApp.

Quote from trailblazer2006 on March 1, 2018, 9:09 am

Hi. I use Chrome vesrion  64.0.3282.186 (64 bit) for debug, but I can't map network resources to workspace files for editing TypeScript. I read arctiles what in this version Chrome uses new magic mapping, but it is not worked for me. Do you know something how to fix what?

Regards, Alexandr.

Quote from Jes Kirkup on March 1, 2018, 11:00 am

Hi Alexandr,

When I mentioned the "debugger" statement I was refering to this (and this has been around for years but apparently not that well known)

https://docs.microsoft.com/en-us/scripting/javascript/reference/debugger-statement-javascript

You can place the "debugger" keyword in JS/TS and this should "force" windows to allow you to attach a debugger to the process - but only if one is not already attatched.  Chrome will also break on this statement but only if the dev tools are open.

Incidentally you will need to ensure that the following is not selected

Internet Options -> Advanced -> Browsing -> Disable script debugging (Other)

If no debugger is attached this should launch a dialog allowing you to attach from available instance of VS, or start a new instance.

Like myself and others have found as I mentioned earlier, Chrome seems to be the best option for debugging client side.

See thread here

https://stackoverflow.com/questions/15568245/how-to-debug-only-javascript-in-visual-studio

I haven't used this for a long time, but if you really want to try and force Visual Studio to debug client code then it is definitely worth a try 🙂

Cheers

Jes

 

 

 

 

Quote from dannyg on July 29, 2018, 6:40 pm

I have the same issue not being able to debug new QuickApp Angular 6 in VSC anymore. The debugger statement like someone has suggested above breaks the code but it only allows to debug the javascript interpretation of the typescript module. I found another way to debug from the Chrome browser itself by using the Augury Chrome extension, but would prefer to use the VSC as it is more powerful IDE in my opinion.