The Artima Developer Community
Sponsored Link

Java Community News
AJAX Debugging with Firebug

7 replies on 1 page. Most recent reply: Feb 6, 2007 1:53 PM by David Beutel

Welcome Guest
  Sign In

Go back to the topic listing  Back to Topic List Click to reply to this topic  Reply to this Topic Click to search messages in this forum  Search Forum Click for a threaded view of the topic  Threaded View   
Previous Topic   Next Topic
Flat View: This topic has 7 replies on 1 page
Frank Sommers

Posts: 2642
Nickname: fsommers
Registered: Jan, 2002

AJAX Debugging with Firebug Posted: Jan 11, 2007 1:18 PM
Reply to this message Reply
Summary
In a recent Dr. Dobb's article, Firebug creator Joe Hewitt describes his popular open-source Ajax, HTML, and CSS debugging tool. The article provides examples of an Ajax debugging session, and shows how to use Firebug to trace the execution of JavaScript code inside Firefox.
Advertisement

A recent Dr. Dobb's Journal article, AJAX Debugging with Firebug, describes Firebug, a Firefox extension, as primarily an Ajax and JavaScript debugger. Penned by Firebug author Joe Hewitt, the article's title is somewhat of a misnomer: Firebug includes functionality beyond debugging Ajax applications. It can be used, for instance, to inspect CSS elements on any page loaded into Firefox and, more, to change page element attributes on the fly and see the effect of the change real-time in the browser window.

Hewitt notes that since Firebug is a browser plug-in, it can parse and inspect content as the browser loads a page:

You can open Firebug at any time to begin working on any page... Firebug breaks the page down into a set of tabs that depict its most important aspects—HTML, CSS, JavaScript, the DOM, network activity, and a console for errors and log messages... Firebug lets you browse code just as you browse the Web by presenting objects as hyperlinks that can take you from one view to another.

In the article, Hewitt explains why Firebug is a convenient Web design debugging tool as well:

When your mouse moves over anything that represents an HTML element in Firebug, the element's rectangle in the page is highlighted, and its margin, border, padding, and content are each shaded a different color.

Positioning elements with CSS can also be challenging because you must always remain conscious of the container that defines its local coordinate space. Firebug helps you visualize this by using rulers and guidelines. While viewing the Layout tab, moving your mouse inside the box causes rulers to appear along the bounds of the element's container. Guidelines also appear tangent to each edge of the box so that you can see where the edges intersect the rulers.

The most powerful feature of Firebug, however, is its ability to trace the execution of JavaScript code:

You can then step forward line-by-line to analyze how the state of the program changes in real time. Breakpoints need not be triggered indiscriminately; Firebug lets you specify the circumstances under which a breakpoint is triggered.

When an error occurs in JavaScript, a detailed description of the error is logged to Firebug's Console. After reading the message, you might wish you could have been in the debugger when the error occurred so that you could inspect the objects and call stack when it occurred.

What similar Ajax and CSS debugging tools have you found useful in your projects?


nebiyu yohannes

Posts: 4
Nickname: neb
Registered: Jan, 2007

Re: AJAX Debugging with Firebug Posted: Jan 11, 2007 2:24 PM
Reply to this message Reply
I had a co-worker who was a big user of the Venkman Firefox extension. It was very powerful for what he needed, and he really liked how it helped him. He eventually switched to Firebug. Venkman was too confusing for me to ever use.

Once he showed our team Firebug, we all gave it a try and really got into client-side debugging. Firebug was really easy for me to learn.

Eventually most of our team was debugging on the client side with Firebug and on the server-side using their IDE of choice (our project was Java on the server-side so our team was mostly Intellij users and one Eclipse holdout).

Many times our workflow involved using both client and server side debugging tools at the same time jumping between the browser based and IDE based debuggers. We all had (at least) two screens which made this easier.

Using both client and server-side debugging together in our workflow really helped us save time when working on trickier issues.

David Beutel

Posts: 29
Nickname: jdb
Registered: May, 2003

Re: AJAX Debugging with Firebug Posted: Jan 19, 2007 6:14 PM
Reply to this message Reply
I've used Venkman and the Web Developer extension for that kind of thing. How does Firebug compare?

David Roussel

Posts: 4
Nickname: diroussel
Registered: Jun, 2004

Re: AJAX Debugging with Firebug Posted: Jan 22, 2007 3:36 AM
Reply to this message Reply
Have a look at the firebug website, http://getfirebug.com/, that will give you the urge to try it out.

nebiyu yohannes

Posts: 4
Nickname: neb
Registered: Jan, 2007

Re: AJAX Debugging with Firebug Posted: Jan 23, 2007 3:31 PM
Reply to this message Reply
Firebug was easier to learn for me. Both had similar features, but it did seem like Venkman had more options when debugging.

I only used Venkman for a short time and didn't learn everything it was capable. For the simple debugging I was doing, Firebug included all the features I needed. I can't think of a feature I used with one that didn't exist in the other.

I didn't do enough with Venkman to make a feature-by-feature comparison.

I do still find myself using both Firebug and the Web Developer extension.

David Beutel

Posts: 29
Nickname: jdb
Registered: May, 2003

Re: AJAX Debugging with Firebug Posted: Feb 2, 2007 4:28 PM
Reply to this message Reply
I looked at Firebug, and its usability seems like more than enough reason to learn and use it. Thanks for the recommendation.

David Roussel

Posts: 4
Nickname: diroussel
Registered: Jun, 2004

Re: AJAX Debugging with Firebug Posted: Feb 6, 2007 5:20 AM
Reply to this message Reply
If you want to see what's new in Firebug 1.0 there is a video at the YUI blog.
http://yuiblog.com/blog/2007/01/26/video-hewitt-firebug/

It's a bit long, but there are some interesting bits in there. Best watched while doing something else, like cooking or ironing, or it won't hold your attention.

David Beutel

Posts: 29
Nickname: jdb
Registered: May, 2003

Re: AJAX Debugging with Firebug Posted: Feb 6, 2007 1:53 PM
Reply to this message Reply
The problem with that video is the length and quality of the demo display image. Instead of using a video camera, it would have been much better to record the display directly (while still recording the audio of the presentation).

Still, it's better than nothing.

Flat View: This topic has 7 replies on 1 page
Topic: Viewtier Releases Parabuild 3.1 Previous Topic   Next Topic Topic: IoC in Method Signatures


Sponsored Links



Google
  Web Artima.com   

Copyright © 1996-2017 Artima, Inc. All Rights Reserved. - Privacy Policy - Terms of Use - Advertise with Us