question

SiegfriedHeintze-9929 avatar image
0 Votes"
SiegfriedHeintze-9929 asked MarileeTurscak-MSFT edited

How to debug sample Angular AJAX B2C with Edge Developer tools?

I've been studying the AJAX msal-b2c-overview and angular11-b2c-sample using the edge browser.

I see that if I hit f12 in Edge, I get the developer tools and I can see my console.log messages with a line number to the source code that I can click on and it will take me to the typescript or javascript code. Clearly, edge can access my source code...

How can I browse the source code inside the F12 developer tools so I can set break points without having to first insert a console.log message? I see that in the angular example, I can see the top level module source code (src/main.ts), but I cannot browse to src/app/profile/profile.component.ts where the AJAX call is and set a break point. How do I set a breakpoint using edge?

Thank you

Siegfried


azure-webapps
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

MarileeTurscak-MSFT avatar image
0 Votes"
MarileeTurscak-MSFT answered

I would check out the demo for configuring event listener breakpoints in Edge. It goes over how to do this without using console.log.

In the JavaScript Debugging pane, you can select Event Listener Breakpoints and choose from a list of events where you want to set the breakpoint:

84577-image.png


Additional ref: How to pause your code with breakpoints in Microsoft Edge DevTools



image.png (168.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.