Saturday, March 17, 2007

Essential Browser Plugins for Web Developers

I'm developing a web application that makes significant use of AJAX to improve usability. Inspection of the live DOM and JavaScript is the easiest way to debug the code. In Firefox, there is great plugin support for this:

  • HTML Tidy - validates HTML against the referenced DocType; I treat this as sort of a "compile" check
  • Web Developer - supports live DOM inspection, live CSS editing, resizing the window to particular resolutions, cookie and cache management, and much more
  • Firebug - live inspection and debugging of JavaScript, CSS, and DOM
I also found a really nice plugin this week for Internet Explorer, the Internet Explorer Developer Toolbar. This plugin does most of what the Web Developer plugin for Firefox does, except for the live CSS editing.

Being able to "find element by click" makes working in both browsers much easier. I am still looking for a JavaScript inspector / debugger for IE. Unfortunately, the current code's HTML and JavaScript is tied to IE in certain places because I haven't had the chance to add id elements and such so I can't just do the debugging in Firefox. I will probably integrate MochiKit so I don't alert myself to death.

2 comments:

Brent Ryan said...

Mochkit looks pretty useful. I like the rounded corners stuff...

Stephen Kuenzli said...

Heh...I hadn't noticed those. I'm interested in MochiKit for the logging.