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

Siegfried Heintze 1,861 Reputation points
2021-04-03T18:47:17.887+00:00

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 App Service
Azure App Service
Azure App Service is a service used to create and deploy scalable, mission-critical web apps.
6,956 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Marilee Turscak-MSFT 34,306 Reputation points Microsoft Employee
    2021-04-05T22:30:43.91+00:00

    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

    0 comments