thebeebs | Good Bye FireBug. Hello Developer Tools.
thebeebs
Zeroing the desk - Ignore the design
 
 

Good Bye FireBug. Hello Developer Tools.

by thebeebs 29. August 2008 08:20

If you’re a web developer and you've ever worked on the client side then you've almost certainly used the incredible Firebug. If you work regularly in IE you may have also used the fantastic IE web tool bar. However, IE8 is the first browser to actually build one of these clever little add-ons right into the browser.

You can find the new feature in IE8 in Tools > Developer tools. Here are my favorite 10 things about it:

  1. It has a colour picker. Colour Picker
    It's inherited one of the tiny tools from the IE web toolbar that allows you to click the colour picker then select any point on the web page and be told it's Hex value.
  2. JavaScript Debugging
    Javascript DebuggingAdd watch's, Breaks, inject code using the console, Pause, play, step over, step into and step out. All the standard debugging features you expect in server side technologies but actually debugging client side JavaScript. If you’re an AJAX developer... you’re going to love it!
  3. Simple Prototyping 
    Prototyping 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.
  4. Profiling.
    ProfilingSet off profiling and 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.
  5. Source Searching
    Source SearchingYou can do this easily enough in notepad but searching through the HTML in the new Developer tools makes it easy to find text and see it’s context on the HTML tree. Also if you right click on the search item it’ll ask you if you want to copy the word, The inner HTML or the Outer HTML; which makes it really easy to cut and paste the actual content you want.
  6. Layout View
    layout ViewIf you can’t get your head around the layout of a particular object. Click on the html or select the element by click then switch to Layout View to be given a graphical representation of the margin, padding, spacing and border for the selected object.
  7. Simple Resize
    Click Tools > resize to resize the browser window to either: 800x600, 1024x768, 1280x768, 1280x1024 or set up a custom size. This enables you to test web pages in different screen resolutions quickly and easily.
  8. View Image information
    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. Other Information that can be displayed includes, File Locations, dimensions and alt text.
  9. Element Highlighting
    Element highlightingClick on Outline and make IE Visually outline Tables, Divs, Table Cells or Images.
  10. It’s baked in
    As Developer tools is a part of the browser and not an add-in, it’s more efficient than the old IE Web Toolbar. This is because of the way Add-ons work in IE. Even if you are not using an Add-on it has it’s open thread working in the background for each tab or window you have open.  As the new toolbar is actually part of the browser itself you can browse regularly in a separate tab or window without the overhead of having the toolbar switched on in the background.

Tags:

Comments (36) -

thebeebs
thebeebs United Kingdom
9/1/2008 10:05:02 AM #

If anyone knows the name of the Firefox addin that enables colour picking please let me know.

Bernard
Bernard Canada
9/1/2008 8:09:11 PM #

It's colorzilla dude.

And it's not yet a kiss goodbye to Firebug as your title may suggest. It's a good thing they make a decent debug bar though.

Paulo Coutinho
Paulo Coutinho Brazil
9/1/2008 8:29:54 PM #

Man, firefox have much more than this features.

WebDeveloper, FireBug and CollorZilla, this is the perfect team, much more that IE8 D.T.

You have to search and learn before say this.

Woof
Woof United States
9/1/2008 9:10:41 PM #

Dude, please. It's really neato that IE has *finally* gotten some development tools, but goodbye Firefox/Firebug? Um, no.

IE8: Developer Tools. Boy, howdy!

Firefox: ColorZilla, Firebug, YSlow, WebDeveloper Toolbar, Live Http Headers, Aardvark, Regular Expressions Tester, Pencil, MeasureIt, PixelPerfect, ViewSourceWith, SQLite Manager, FirePHP & Selenium. And those are just the tools that I use regularly. Firebug alone duplicates almost every item in your list. But with, say, ViewSourceWith I can use Vim or Emacs to instantly browse source code, which pretty much means that my search facilities completely nuke anything in the IE8 toolbox.

But, you know, it's GREAT that IE8 has the color picker now. Awesome.

Hans-Christian
Hans-Christian Norway
9/1/2008 11:36:09 PM #

It is good that finally Microsoft tries to do some decent work on the browser side. Although the user interface looks ugly, it is good they finally add support for debugging, although I doubt that I will ever user it for my main debugging tool.

IE8 is the first browser to actually build one of these clever little add-ons right into the browser.

This statement is just plain wrong, but I guess for people living in the Windows world they just don't know better. Safari 4 Developer Preview added debugging support built-in several months ago. And it looks great too.

Charles
Charles United States
9/2/2008 12:22:17 AM #

When they add the console commands, then I'll consider it worthwhile.  The lack of console.log, console.debug, etc, is irksome.

A
A United States
9/2/2008 12:33:46 AM #

Not everyone develops on windows. So goodbye IE developer tools

Martin Beeby
Martin Beeby United Kingdom
9/2/2008 1:05:07 AM #

Hans-Christian:
The user interface does look ugly but it's only a beta.
Also I haven't tried the Safari 4 Developer Preview but let's be honest... who has. (Sorry that was below the belt, I actually like Safari)

A:
Not everyone develops on windows. So goodbye IE developer tools
Of course they don't but a hell of alot of people do... more than any other platform infact.

Charles:
When they add the console commands, then I'll consider it worthwhile. The lack of console.log, console.debug, etc, is irksome.
The debveloper tools does have a console window.

Woof:
You're right add in support in IE is lacking... But I can't belive you listed Pencil Though! For god sake get a copy of Viso pencil is poor, someone needs to draw some more damn shapes for that application.

And to everone else that says  firebug is just as good as the Developer Tools, I strongly suggest you try it. You might be suprised. It would be good to have people that use firebug day-in day-out to give their opinions after actually using Developer Tools in IE.





Rob Wilkerson
Rob Wilkerson United States
9/2/2008 5:21:13 AM #

Any time a post like this gets written, it polarizes its audience and draws out the fanboys of the "competing" platform.  I'm a long-time user of Firebug and can't imagine developing without it, but the fact is that I usually have to support IE.  In its current state, debugging IE issues is difficult at _best_, so any capable tool that will help - and this one seems similar to Firebug in its capabilities - is a welcome addition to the IE offering.  Who the hell cares whether it's better than Firebug or worse?  That's not really the point, nor is it particularly germane.  It's sure as hell better than what's currently available.

I've tried companion.js, DebugBar and a few other things (XRay, MRI, etc.), but they've all felt clunky and overly specific. Maybe this will be the one-tool solution when I have to muck about with IE.

Martin Beeby
Martin Beeby United Kingdom
9/2/2008 6:09:33 AM #

I know it polarizes opinion. But I enjoy debating the pro's and cons of software. Plus if blog posting aren't controversial... they just don't get read.

Thanks for commenting. I have never tried the 3rd part tools you mention. They all sound horrible, I find thats generally the way with 90% of Add-ons/Tools half baked ideas implemented badly.

Fabricio Zuardi
Fabricio Zuardi Brazil
9/2/2008 10:03:41 AM #

Hmm… goodbye firebug? So are you telling me that this Developer Tools can be installed on firefox and replace my firebug? And that there is an xpi that is open source and I can tweak it the way I see fit?

Anyways, it is good to see that there is finally *some* way to debug pages on IE, kudos for the team that made this firebug clone Smile

Martin Beeby
Martin Beeby United Kingdom
9/2/2008 10:14:10 AM #

I can say goodbye firebug as firebug was the only thing that I used firefox for.

Eric
Eric Chile
9/5/2008 4:48:30 AM #

I am from China

So many firefox fan.
Almost any thing you excited about IE, you find find it already exist for a while in firefox.

Firebug, I love it. Firefox, just better than IE.




Lorenzo
Lorenzo Costa Rica
9/10/2008 7:06:32 AM #

I will use both. Does Firefox have any tool with step by step debugging and variable watching?

Stefaan Huysentruyt
Stefaan Huysentruyt Belgium
9/14/2008 3:16:43 AM #

> I can say goodbye firebug as firebug was the only thing that I used firefox for.

I'm a web developer and I *have to* use Firefox, IEx, Safari and Opera.  So it is great to see Microsoft finally reuse the idea of the other integrated developer tools.  I did not yet look into dragon fly for Opera, I must add.

Dwayne
Dwayne Australia
9/24/2008 7:50:52 PM #

I think I speak for all developers when I say "It's about f*cking time Microsoft implemented something like this into Internet Explorer". Congratulations Microsoft for implementing features that have been available to Firefox since forever now it would seem.

Regardless of the improvements, Microsoft still suck my exhaust pipe on my station wagon. Internet Explorer will never claim back the share that Firefox has taken from Microsoft.

Agile guy
Agile guy United Kingdom
10/19/2008 12:09:28 AM #

The world views what we (as web devs) build in anything from lynx through to IE 8. So any tools to make the deciphering the signal pumped through the ether are most welcome. IMHO Firebug sits in the tool belt alongside the IE8 dev.

Does anyone know of a colour picker for lynx ;)

Agile guy
Agile guy United Kingdom
10/19/2008 12:13:08 AM #

As an aside, has anyone experienced the involuntary slow animate "feature-bug" of IE?

Mr Beebs (Scott Beebs .. your .NET guru name) thanks for the Anne Frank's drumkit chortle!

Dan

Onur Safak
Onur Safak Turkey
12/1/2008 4:31:01 PM #

> I will use both. Does Firefox have any tool with step by step debugging and variable watching?

Sure, firebug. It also has js debug commands for different kinds of outputs and other stuff. The more you dig the more you find.

> Anyways, it is good to see that there is finally *some* way to debug pages on IE, kudos for the team that made this firebug clone

Aye, that's one of the things I love about firefox. By taking their share, It forces MS to try to do better stuff, even when it reaches copying features and interface design in some point. Without the force from Firefox, I bet notepad would still be the source viewer of IE. Like "broken view source" bug, which I first experienced in ie 4, and it still exists in IE7.

Toth
Toth United States
1/23/2009 6:20:48 PM #

IE's Developer Tools are a step in the right direction, no doubt about that, but I still think Firebug's leaps and bounds ahead. Not only is the interface better, but the on-the-fly HTML and CSS editing is so straightforward and simple. I don't think you even can edit CSS on the fly with IE8 DT (unless I'm missing something). IE still sucks and is still the bane of every web developer's existence.

Rowby Goren
Rowby Goren United States
2/2/2009 8:15:54 PM #

How do you switch to IE's Layout View?  I can't seem to find anything in the View Menu...

thebeebs
thebeebs United Kingdom
2/3/2009 11:58:33 AM #

Hi Rowby , just Click the HTML tab then on the right select layout.

james
james United States
2/27/2009 7:57:23 AM #

Can't compare this thing to Firebug. Firebug is much much much more powerful than this thing. Maybe for IE?

Erik
Erik United States
3/6/2009 12:14:45 PM #

I'm surprised no one has pointed out the fact that the ie8 developer tools are rather buggy (at least the css tools). Plus, as others have mentioned, why would you not continue to test in FireFox? Firefox is probably at least 20% of your traffic. You should embrace all user agents as much as possible.

Corb
Corb United States
11/4/2009 12:38:52 PM #

Until IE8 DT can show and edit generated HTML, like Firebug, and debug JS while the Visual Studio debugger is running, like Firebug, or even give you the "Inspect Element" option, like Firebug, it will remain a watered-down, cheap imitation to Firebug. It's an improvement over what IE7 offered, but it doesn't even come close to the power of Firebug.

Paul
Paul United States
11/19/2009 10:16:06 AM #

I agree with what has been said already.  Any web developer should test their sites in as many browsers as possible.  Writing off Firefox because IE added a Firebug clone is just a bad idea.  Firefox loaded with Firebug and a few other extensions is still the best there is.  

Also, along with Safari as mentioned above, Opera also integrated a web developer package before IE8 developer tools.  So IE was not first, or even second to integrate these tools into the browser.  

Mable Klus
Mable Klus United States
10/6/2010 5:38:27 PM #

Thanks for posting. Great info I will check back again. Great site by the way.

rift platinum
rift platinum United States
3/25/2011 12:53:35 PM #

great blog! keep up the great work!

buy rift gold
buy rift gold United States
3/26/2011 1:43:45 PM #

nice blog! I like it!

buy rift gold
buy rift gold United States
3/28/2011 11:10:23 AM #

great blog! keep up the great work!

buy rift gold
buy rift gold United States
4/2/2011 9:29:08 AM #

great blog! keep up the great work!

the diet solution program
the diet solution program United States
7/6/2011 2:27:33 PM #

delving

diet solution review
diet solution review United States
7/6/2011 2:29:40 PM #

doyen

tinnitus miracle
tinnitus miracle United States
7/11/2011 6:37:03 PM #

oink

tinnitus miracle system
tinnitus miracle system United States
7/11/2011 6:39:56 PM #

pillion

work at home opportunities
work at home opportunities United States
7/18/2011 4:15:04 AM #

This is a smash hit! The validity of the points you make in this writing are on the ball. Really great job on this article. If you have  to get a chance to look at this site:**http://tinyurl.com/44t4l38 **. Keep up the great work, you are providing a great online resource

Pingbacks and trackbacks (4)+

Comments are closed