Formatting minified jQuery, JavaScript using the Internet Explorer 9 Developer Toolbar
- by Harish Ranganathan
Much has been talked about the F12 developer toolbar in IE and the support it provides for web developers. Starting IE8, the Developer Toolbar is a menu item that helps you view the page source, scripts, profiling and many other details of the rendered page. It even allows script debugging from within and that makes it a truly powerful web developer tool bar. With IE9, the developer toolbar got even better with the Networking Tab that allows you to inspect the traffic/time taken and drill down into the Request/Response headers and other specifics. The script tab allows you to view the scripts used in the page. One of the challenges of working with JavaScript / jQuery when they are minified, is that, it becomes really hard to read. Minified JavaScript is a compression technique and also a best practice for delivering faster web pages. However, when you would like to debug, minified JavaScript files become very hard since they aren't properly formatted. Take the case of the above sample, which is a basic MVC 3 Web Application. It uses the minified jQuery and modernizr files. Once we select the above scripts, the script source looks as follows:- But with the “Format JavaScript” option in the Configuration icon, Once you click on the “Format JavaScript”, you can see the formatted JavaScript as per screen below:- This makes the script readable and also easy for debugging. Cheers !!!
