Introduction
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 an 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,
- Open any web site.
- 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.
- Go to Sources tab in developer tools and open any minified JS which you want to debug as shown in the image.
- To debug the minified file you have to Pretty-Print the minified code. You can do this by clicking on { } which is present at the left-hand corner of the middle pane status bar. Please refer to the image of the visual appearance.
- Click on { } You will get the source file formatted in the new tab.
- Now click on any line number in the code formatted window, where you want to debug the code by inserting breakpoint.
- 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 breakpoint to hit.
- Once breakpoint is hit again click on { }, you will get a new tab with breakpoint maintained at the same place. Please refer to the below images for your visualization.
- Now it’s your time to debug the values nd check for object values, types, etc