How To Debug Minified JS File

Debugging a minified JS file is always a tedious task for developers. In day to day development life we end up in a situation where all JS files will be magnified and moved into production for deployment. It is usual that some unprecedented JS error comes across browser versions. Being a developer, finally it arrives in our laps to resolve the issue. To reproduce the same error in a test environment with un-minified JS version doesn’t work out. To resolve this issue requires some kind of hard work which is time consuming.

Smart work should be applied in this case. Everything has evolved, even browsers have evolved, understood the developer’s problem and gave unpaid feature called Pretty-Print.

We will look about this feature in the below steps,

1. Open any web site.
   
   
2. Open developer tools in chrome by pressing F12 /Ctrl + Shift + I/ right click anywhere inside the web page and select Inspect/Inspect Element which will be mostly the last option.
   
   
3. Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.
   
   
4. To debug the minified file you have to Pretty-Print the minified code. You can do this by clicking on { } which is present at left hand corner of middle pane status bar. Please refer the image of visual appearance.
   
   
   
   
5. Click on { } You will get source file formatted in new tab.
   
   
   
   
6. Now click on any line number in the code formatted window, where you want to debug the code by inserting break point.
   
   
   
   
7. Let's refresh the page now by clicking browser refresh button. Please do not press F5 as this will refresh the developer tool and wait for break point to hit.
   
   
8. Once break point is hit again click on { }, you will get a new tab with break point maintained at same place. Please refer to the below images for your visualization.
   
   
   
   
   

9. Now it’s your time to debug the values and check for object values, types, etc.