Introduction
When we use JavaScript, sometimes, we need to make it minified, such as, for jQuery-3.3.1.js and jQuery-3.3.1.min.js
![]()
jQuery-3.3.1.js is in a normal format:
![]()
jQuery-3.3.1min.js is in a minified format, actually a long line:
![]()
Wrapped in VS code, the one line code will be like this:
![]()
What and Why Minification for JavaScript
In short,
Minification is the process of minimizing code and markup in your web pages and script files. It’s one of the main methods used to reduce load times and bandwidth usage on websites.
In long (wiki),
Minification (also minimisation or minimization) is the process of removing all unnecessary characters from the source code of interpreted programming languages or markup languages 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. Minification reduces the size of the source code, making its transmission over a network (e.g. the Internet) more efficient. In programmer culture, aiming at extremely minified source code is the purpose of recreational code golf competitions.
Un-Minify JavaScript
We discuss un-minify first, because we met this problem first, and searched for the solution for a while. From online for this topic, we can find out a lot of different solutions. But, if used in company for production, we need to make sure the tool we can use, and use safely. So, some .exe file may not be a good choice, because most time we need company approval for installation, but for this small case spending time to get permission might not be worth. On the other hand, some online solutions, might not be safe.
So, we choose Google Chrome that we should trust.
Pretty Print in Google Chrome
In version 12 of Chrome they added the ability to de-obfuscate (un-minify?) the JavaScript on the sources tab by right clicking the code area. Today that feature lives on in the “pretty print” feature located at the curly brace icon on the bottom of the debugger[Use prettyprint in the Chrome debugger].
![]()
Clicking it results in this,
![]()
This feature not only makes the code more human-readable but also allows us to set breakpoints anywhere, allowing debugging on minified code.
Pretty Print online (Javascript Pretty Print online)
Copy/Paste the minified JavaScript into the left pane, it will automatically show on the right pane with a normal version:
![]()
Demo using Pretty Print in Google Chrome
Open a web page with a single line of minified JavaScript:
![]()
Right Click the Browser ==> Click Inspect to access debug mode,
![]()
Click Source Tab ==> Open the folder and locate the minified JavaScript file and Click to Open it,
![]()
Click the curly brace icon on the bottom of the debugger, then you get the normal JavaScript,
![]()
Minify JavaScript
For the opposite operation, we need to minify the JavaScript, however, it seems Google Chrome does not have this feature. Then we search online and get a solution:
![]()
Minify JS is JavaScript Minifier online (codebeautify.org)
![]()
JavaScript Minifier & Compressor | Toptal®
Reference