Monday, January 23rd, 2006

FireBug: “It’s not your Grandma’s Javascript Console.”

Category: Utility

FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter.

Features

Log DOM Elements With Your Mouse

Using the “Pick Element” tool, you can click DOM Elements in the page to print them to the console. Once they are in the console you can inspect them using a simple strip of tabs.

Log Objects From The Command Line

There is a command line at the bottom of the console which allows you type in arbitrary Javascript expressions. The result of the expressions is printed to the console, where you an the inspect it further using the tabs.

Log Objects From Your Web Page Scripts

If you’ve ever wished you could tap your toes together and turn alert into printf or System.out.writeln, FireBug is your fairy godmother. It is trivial to log text or objects to the FireBug console from Javascript inside any web page. Go here to find out how.

XMLHttpRequest Spy

Each XMLHttpRequest can be automatically logged to the console, where you can inspect its response as text or xml. Not only is this extremely useful for debugging your own Ajax code, but it’s also quite fun to analyze how other web pages use Ajax!

Contextual Error Display

Unlike the the Firefox Javascript Console, FireBug’s console will only show you errors for the page that you are looking at. As you browse from page to page or switch between browser tabs, the console will follow and only show information that is relevant to that page.

Error Status Bar Indicator

Whenever a Javascript, CSS, or XML error occur, a little red indicator will appear in the Firefox status bar. Clicking the indicator will bring up the console with more detail about the errors.

Error Filtering

FireBug allows you to filter what kind of errors you want to appear in the console. This is handy for hiding all those annoying CSS errors, or errors stemming from code inside Firefox itself.

Firebug

Posted by Dion Almaer at 3:01 pm
18 Comments

++++-
4.3 rating from 40 votes

18 Comments »

Comments feed TrackBack URI

The image appears to be linking to itsself, the correct install link is:
https://addons.mozilla.org/extensions/moreinfo.php?id=1843&application=firefox

Comment by Rich Waters — January 23, 2006

Rich,

Thanks for pointing that out! Fixed now.

Cheers,

Dion

Comment by Dion — January 23, 2006

It’s also worth mentioning that Joe H. has a badass Ajax comment system on his blog: http://www.joehewitt.com

Comment by Joe Grossberg — January 23, 2006

Nice tool!

Comment by blextar — January 23, 2006

[…] FireBug: “It’s not your Grandma’s Javascript Console.â€?: […]

Pingback by FireBug: “It’s not your Grandma’s Javascript Console.â€? — Sam’s random musings Archive — January 23, 2006

Oh, that is seriously sweet. If I had it two hours ago, I wouldn’t have spent the last two hours quite so deep in the debugger.

Comment by Eric — January 23, 2006

[…] Ajaxian » FireBug: “It’s not your Grandma’s Javascript Console.â€? FireBug is a new tool for Firefox that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter. […]

Pingback by Silver Ronin, aka Dewayne Mikkelson » Blog Archive » New Firefox tool for debugging — January 23, 2006

This absolutely rocks!

They dó need to add ‘open in a new window’ support though… I don’t have 3 screens for nothing!

Comment by SchizoDuckie — January 24, 2006

oh yeah and b.t.w. it doesn’t return anything when trying to log gmail?

Comment by SchizoDuckie — January 24, 2006

[…] [via ajaxian, grazie a luca c.] […]

Pingback by FireBug: estensione per FireFox per analizzare Javascript, Css, Xm, Ajax — January 24, 2006

[…] Via : Ajaxian Tags: ajax, console, css, debug, DOM inspector, firefox extension, javascript, programming, xmlhttprequest […]

Pingback by FireBug, the web-dev bug killer for Firefox at Blog that Web — January 24, 2006

It’s also worth noting that the “Kick a” comment system is broken in my browser.

Comment by Wesley Walser — January 24, 2006

AJAX Debugging in Firefox

If you don’t like to use Visual Studio for debugging, or need to debug a non IE problem that you are having writing scontrols, you should check out FireBug. Read about FireBug

Trackback by AppExchange Developer Network Blog — January 24, 2006

[…] Ajaxian » FireBug: “It’s not your Grandma’s Javascript Console.â€? (tags: firefox ajax javascript dhtml debug) […]

Pingback by John Tokash » Blog Archive » links for 2006-01-25 — January 25, 2006

[…] http://ajaxian.com/archives/firebug-its-not-your-grandmas-javascript-console […]

Pingback by Project :: penkiblog » 本日書籤 (å?·æ‡¶ç‰ˆ) — January 28, 2006

This MSNBC news clip shows a skateboarder trying to jump a car to get this stunt on TV. But he crashes badly: http://www.monkeybriefs.com/view.video.php?id=268&no=10743

Comment by Skateboarding Crash — May 31, 2006

I don’t like to use Visual Studio for debugging, I agree, FireBug is excellent.

Comment by James Caffrey in Costa Del Sol Spain — September 22, 2006

Firebug is quick and convenient

Comment by Alex — February 19, 2007

Leave a comment

You must be logged in to post a comment.