How To Debug Minified JS File

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,
  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 the left-hand corner of the middle pane status bar. Please refer to the image of the visual appearance. 
     
    Minified JS File
     
  5. Click on { } You will get the source file formatted in the new tab.
     
    Minified JS File
     
  6. Now click on any line number in the code formatted window, where you want to debug the code by inserting breakpoint.
     
    Minified JS File
     
  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 breakpoint to hit.
     
  8. 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.
     
    Minified JS File
     
    Minified JS File
  1. Now it’s your time to debug the values nd check for object values, types, etc
     
    Minified JS File
     
    Minified JS File