SUBSCRIBE - [ Tech News ] [ Make Money Blogging Tips ] [ Online Marketing Tips ] [ Web Dev News ]
Powered by MaxBlogPress  

Fantastic new Javascript debugging tool with IE 8 and its list of features hard to live without

by MK on March 20, 2009

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.

developer_tools 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

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.

e3a455f7e92be8c73fd58892101b0c74delicious

Article by M K

M has written 116 awesome articles for this blog.

If you like This post, you can follow CoolWebDeveloper on Twitter.

Subscribe to CoolWebDeveloper feed via RSS or EMAIL to receive instant updates.

CoolWebDeveloper.com runs on the Thesis Theme for WordPress

Thesis WordPress theme

Thesis is the search engine optimized WordPress theme of choice for serious online publishers. Thesis will give you a ton of functionality without having to alter any code. For the advanced users, Thesis has incredible customization possibilities via Thesis hooks.


With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and very flexible, the Thesis Theme helps CoolWebDeveloper.com to run far more efficiently than ever before.

{ 8 comments… read them below or add one }

Rick O'Shay July 19, 2009 at 9:07 am

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.

dann August 19, 2009 at 9:56 pm

Well I like it.

Scott February 23, 2010 at 1:11 pm

The IE6 / MS Script Editor (the one that’s part of the MS office web tools, not the one that comes with the browser, which is called the Script Debugger) was far superior to the IE8 debugger IMHO. I’ve been using the Script Editor for the past 3 yrs for heavy IE6 / JS development and have recently switched to IE8. Many great Script Editor features are missing, sad to say. The debugger doesn’t have ‘Run to line’ or ‘Set next statement’. The layout is totally locked so you can never see your locals & watches at the same time … they must be learning from Apple GUI designers :) Yes, it is true the IE8 debugger is light-weight, and it’s great that it comes already installed. The CSS tracing is also nice, but Script Editor’s auto-complete for css is missing … something I used all the time. Another thing I don’t like about the IE8 debugger is the weird paradigm you use to select a js file to debug. If you have a big app, like myself, you have to scroll through a massive dropdown menu, very strange.

Funny, i now have some complex code to debug and am forced to crank up a VM that has IE 6 on it, so I can use the trusty Script Editor again.

seppi September 28, 2010 at 4:20 am

well, you wrote as if this was revolutionary technology :)

Rage July 14, 2011 at 5:39 am

Debugging in IE8 sucks… Tried setting the style and every time I hit “=” it jumps to the end of the line.

Daniel August 6, 2012 at 7:51 am

I wrote my own javascript debugger for IE and I have been using it for the past 10 years.

I find it superior to every other one of every other browser.

It’s for IE only. It’s called SplineTech JavaScript Debugger.

It’s extraordinary fast and trivial to use.

Check it out if you want: http://www.javascript-debugger.com

Daniel

Scott September 4, 2012 at 1:28 pm

IE9 debugger has solved most of the bad problems in the IE8 debugger. I’m finally happy … have as many features now as VB3.0 had back 1994 (yeeha!). The best feature of IE9 debugger is that it has a global text find feature that searches through ALL loaded scripts (my app has about 100). They finally added “run to cursor” and other features that a good debugger should have.

Steven Andrews September 7, 2012 at 11:52 am

I tried your splinetech javascript debugger. I have to tell you, so far it’s the best javascript debugger for IE that I know of, or ever used. So much easier to use than any non-ie debuggers, including firebug and dragonfly. Love that pause in 5 secs feature, and most of all, love that it remembers all my steps so that I can always go back and forth within my own debugging history!
Keep it up!
Steven

Leave a Comment

CommentLuv badge

{ 1 trackback }

Previous post:

Next post:

CoolWebDeveloper on Twitter CoolWebDeveloper on Facebook CoolWebDeveloper RSS Feed