Click here to Skip to main content
Click here to Skip to main content

Tagged as

Go to top

Do you use {pretty print} ?

, 10 Jun 2014
Rate this:
Please Sign up or sign in to vote.
Steve Souders began to describe Web Performance Optimization 10 years ago. WPO is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser. He wrote and contributed to many books (High Performance Web Sites , Even Faster Web Si

Steve Souders began to describe Web Performance Optimization 10 years ago. WPO is the field of knowledge about increasing the speed in which web pages are downloaded and displayed on the user’s web browser. He wrote and contributed to many books (High Performance Web Sites , Even Faster Web Sites , Web Performance Daybook V2
) to explain us his best practices for performance along with the research and real-world results behind them.

One of the most important rules is to Combine & Minify resources. Bundling combines multiples files into a single file whereas Minification is the process of removing all unnecessary characters from source code without changing its functionality.

With the latest HTML5 specification and the emergence of JS frontend frameworks like JQuery and more recently AngularJS, JavaScript has never been so used and so popular. We can now create scalable, maintainable applications, unified under a single language: JavaScript !

As we’re all good web citizen, all our resources (JS/CSS) are bundled and minified on production. This is sometimes where things start going bad. Have you ever try to debug JavaScript on production? The primary drawback of this optimization is that it makes debugging your JavaScript code a nightmare, since the browser’s developer tools will show you code that is virtually unreadable.

For example, a production JavaScript may looks like this: 14K characters on the same line.

min

It’s impossible to debug the previous script because browsers can’t set breakpoint at character level (only at line-level).

Helpfully, some of the browsers have an option in developers tools to un-minify partially a JavaScript file. This option is called “pretty print” and the icon is like {}.

Chrome
chrome

Internet Explorer
,ie

In Firefox (since December 2013)
firefox

Here is the result after pretty print.

unmin

It’s fairly better and you have the nearly the same debugging experience that for dev scripts. Sometimes it’s not enough because JavaScript minification tools rename local functions & variables. It’s common to see a(), b(), c() in a minified script.  A good indentation won’t change this.

Fortunately, Source Maps provide a way of mapping the lines & columns of the production source code (bundled & minified), back to their original locations in the corresponding uncompressed source files. This feature is supported by all modern browsers.

An additional file is generated during the minification process and is added at the top of the optimized file.

map

Source Maps are easily generated by grunt-contrib-uglify or Closure Compiler. Unfortunately, it’s still not supported by Microsoft ASP.NET Web Optimization Framework. For sure, this is something that needs to be done. Web Essentials also offer this feature.

It’s a nice tip for every web developer but the good question may be : Why do you have to debug production code ?


License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Cybermaxs
Technical Lead
France France
Yet another proof of concept
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 11 Jun 2014
Article Copyright 2014 by Cybermaxs
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid