Normalize minified JS/CSS using chrome dev tools
I was just playing around with chrome's dev tool testing my local code and found that I can normalize the minified version of a JS/CSS file using chrome's dev tool.
First of all let me tell you what is a minified version of a JS/CSS code is.
Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. - WikiPedia
Here below are two pics showing the comparison between a normal and a minified version of the same code on left and right respectively.
Now as you know what is minified version of a code in css / JS looks like, you would have also imagined the pain in debugging/finding some element or function in such kind of css/JS code.
Hence if you need the normal and clean formatted code from local minified version of code, and your internet is not working to download such kind normal code in proper formatting from respective website, For example bootstrap CSS provides both minified and normal version of their code, then you just need google chrome web browser or such a similar web browser which provides such kind of dev tools.
The procedure is simple.
Video Tutorial:
I know this might be very old trick for many of you. But many new beginners still doesn't know about this feature of chrome dev tool.
First of all let me tell you what is a minified version of a JS/CSS code is.
Minification (also minimisation or minimization), in computer programming languages and especially JavaScript, is the process of removing all unnecessary characters from source code without changing its functionality. These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute. - WikiPedia
Here below are two pics showing the comparison between a normal and a minified version of the same code on left and right respectively.
Now as you know what is minified version of a code in css / JS looks like, you would have also imagined the pain in debugging/finding some element or function in such kind of css/JS code.
Hence if you need the normal and clean formatted code from local minified version of code, and your internet is not working to download such kind normal code in proper formatting from respective website, For example bootstrap CSS provides both minified and normal version of their code, then you just need google chrome web browser or such a similar web browser which provides such kind of dev tools.
The procedure is simple.
- Open the Web Page which is using JS/CSS on that page.
- Then open dev tools - press F12 Or right click -> inspect Or Ctrl+Shift+I.
- Find your file in sources tab
- Open it. If the code is a minified code than at bottom you will see two curly braces symbol like this {}. When you will hover it it will say pretty print.
- Click on that symbol and that minified code will be transformed in to a proper clean formatted code. That's It!!!!
Video Tutorial:
I know this might be very old trick for many of you. But many new beginners still doesn't know about this feature of chrome dev tool.
Thanks for reading. Have a happy coding.
Comments
Post a Comment