Angular Debug On Prod Without Using Source Map

Before Reading This, You Must Have Basic Knowledge Of Java-script Debugging. If Not Then Read This First Article

Different ways to debug JavaScript code

Sources panel

For Debugging, Using “Tour of Heroes App”.

After Hosting Your Application In-Browser Load Your Application Then Go To dev-tool -> Sources.

In Main[hashKey].js That Contains the Application Code.

Lets Start Debugging

To Debug This Function

Then Go Dev-tool And Open Search Panel Using Ctrl + Shift + f And Search For “Save”.

Search Panel

Open Searched Result, This File Is Transpiled And Minified. To Convert Readable, Click {} Button On The Bottom Status Bar And Continue Debugging With New Formatted Source.

Now Search Function Name “Save” And Set BreakPoint.

Debugging Tip : Never Set Break Point on Function Name ,Always Set In Side Function Body.

Use Call Stack Panel To BackTrack The Issue

Call Stack

Update Value In Debugging Environment

In updateHero Function Parameter e = { id : 12, name : “Narco”} , Using Console Panel Parameter e.name Is Updated With Value “Raj”.

Condition BreakPoint

Set Condition On BreakPoint To Avoid Unwanted Pause on Breakpoint.

Go To Line No Then Right Click -> Edit break Point

Conditional Breakpoint

In Above Image, On-Line No 13345 Condition BreakPoint Added. So When e.Id == 19 This Condition Is True Then Only Break Point will Pause On This Line.

Set Break Point Using Event Listener

Use $0 In Console To Refer To This Element.

Debugging Add Button

Debugging Add Button Using EventListener

Open Element Panel Click on Element Which You Want To Debug And Execute $0.eventlistener() In Console. Then Open Function Location And Set Break Point Then Click Button From Ui To Paused On BreakPoint.

Next, Go To Call Stack And Slide Down Stack List and Search For Add Function And Set BreakPoint.

Claps help other people finding it and encourage me to write more posts