Chrome developer tools : auto-format JavaScript or CSS files

When viewing the source code of minified JavaScript or CSS files in Chrome Developer tools, it is very useful to be able to auto-format them. Chrome developer tools provide a pretty-print option for this purpose.

JS code file before pretty-printing with format icon highlighted
A minified JS file

Click on the small icon with two curly braces.

minfied JS with pretty-print option enabled
A minified JS file with pretty-print option enabled

Notice that the pretty-print icon has become blue to indicate that it is active. In the above picture, I am viewing the JS file in the Network tab. In the network tab, as long as the pretty-print button is in an active state, the files will be auto-formatted.

Things work slightly differently in the Sources tab. The pretty-print button is available here as well. But when you click on it, a new tab with the formatted code will open and become active. The old non-formatted tab will remain.

Leave a Comment

Your email address will not be published.