Fantastic new Javascript debugging tool with IE 8 and its list of features hard to live without
March 20, 2009 by MK
Filed under Javascript, web development
I have heard web developers complaining about earlier versions of IE for being non compliant and also how hard it is to debug CSS and JavaScript in IE. Well the good news is Microsoft has listened and with Internet Explorer 8 Microsoft has launched Developer Tools (Developer Tools are available for a while now) and that sets a new era in JavaScript and CSS debugging.
Download IE 8 Beta Version here
You can open the Developer Tools by pressing F12 or by clicking the Developer Tools option in the Tools menu on the Windows Internet Explorer toolbar.
IE8 is a standard compliant browser and that means that some of the sites you may have developed prior to IE 8 may have to be reworked to be standards compliant. Don’t worry though … IE 8 has a much needed “Emulate IE7″ button that you will turn on for most of your browsing. And this button renders the site as if its rendering in IE7. Well, the real magic comes in when you launch the IE 8 Developer Tools and realize just how much power there is in using them on a site.
Here is a list of some of the awesome features of Developer Tools in IE8 -
JavaScript Debugging
The Script mode allows you to debug scripts on your Web page by allowing you to step through the code, insert breakpoints, and inspect variables. By providing a built-in lightweight debugger that lets you set breakpoints and step through client-side script, the Developer Tools enables you to debug your scripts without leaving Windows Internet Explorer. All the standard debugging features you expect in server side technologies but actually debugging client side JavaScript. This will end up being a life saver if you use JavaScript often.
Path : Open Developer Tools -> Click Script Tab -> Set Breakpoints and Refresh the associated web page
Color picker
It allows you to click the color picker then select any point on the web page and be told it’s Hex value. This is a tiny utility but is very powerful wehn it comes to web development and CSS designing.
Path : Open Developer Tools -> Click Tools -> Show Color Picker (Ctrl + K)
CSS Sandbox
Every change you make to the HTML or CSS is immediately reflected in the browser. This makes it easy to take a page and edit the CSS or HTML on the fly. Once your happy with the changes you can just click to save the files.
JavaScript Code Profiling
You can view all of the JavaScript functions and the order they were run in during the profiling session. It details how long each function took, the line number of the code that was executed and if you click on it, it takes you to the source code that was being executed. You can use this mode to investigate your Web site’s execution time using information gathered by Profiler as the Windows Internet Explorer renders your Web site. This information is helpful to target optimizations if a piece of code is causing excessively long execution time, or a bottleneck.
Path : Open Developer Tools -> Click Profiler Tab
Layout View (Worth a million)
If you are not able to figure out the layout of a particular object. Click on the html code or select the element by clicking on it and then switch to Layout View to be given a graphical representation of the Layout.Layout provides info on margin, padding, spacing and border for the selected object.
Path : Open Developer Tools -> Click HTML Tab -> Select the HTML element -> Click on Layout button on the right hand side icon bar at top
Test web page on different browser resolutions with one click
Resize the browser window to either: 800×600, 1024×768, 1280×768, 1280×1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
Path : Open Developer Tools -> Click Tools -> Resize
View Image related info
Click on Image > Show Image Sizes for all the image sizes to be shown onscreen, so you can easily see if any are larger than they need to be. Bug Alert: You will not be bale to see the size though if image area is lesser then the text display for size. There are other great options if you click on Images on tool bar like - View Alt text, File locations, Dimensions etc.
Path : Open Developer Tools -> Click Images -> Show Image File Sizes
Page Element Highlighting (This feature kicks ass)
You can make IE Visually outline Tables, Divs, Table Cells ,Images or any element on the page.
Path : Open Developer Tools -> Click Outline
And remember Developer tools is a part of the browser and not an add-in. I am not going to compare Developer Tools with Firebug. But I must say that one thing about Firefox. It forces Microsoft to try to do better stuff, even if it means copying features and interface design in some way. Without Firefox, I bet notepad would still be the source viewer of IE.
I am a long-time user of Firefox and Firebug and can not imagine developing without it, but the fact is that I usually have to support IE and Developer Tools seems similar to Firebug in its capabilities and is a welcome addition to the IE offering. Plus, You should embrace all user agents as much as possible.
We as developers do welcome this fantastic upgrade by Microsoft.
Related posts brought to you by Yet Another Related Posts Plugin.
Why it takes them 10 years to address what is arguably critical technology (javascript debugging, MVC, ORM, distributed cache) is troubling but better late than never. I’m hopeful they will adopt Inversion of Control as it now approaches 10 years as an “indispensible” tool for efficient application development. Right now they are in the denial stage, claiming you don’t need it (borrowing from Aesop’s fabled sour grapes tale) but they don’t have it, use it, or understand it. It’s like asking a muscle car vendor their opinion on highspeed rail and expecting a useful response.
Well I like it.