Categories
AJAX Firefox Plugins

AJAX Developers Toolbox – Firefox plugins

Earlier I wrote about a few developer must have’s for AJAX coders. There are several useful plugins to Firefox that also come to mind.  Venkman, the JavaScript debugger leads the list, but since I covered it here, we don’t need to list it again.

  • Console2 – With the introduction of Firefox 1.5 the clutter in the standard JavaScript Console increase many fold.  Primarily due to the inclusion of CSS warnings in the error output.  Console2 provides several levels of filters, to give the developer only the messages they want to see.  It also allows the suppression of duplicate messages to keep the console clean in those pesky situations when a little JS or DHTML code goes sideways.

               "Console² let’s you display errors filtered by type (Errors, Warnings, Messages), language (JavaScript, CSS, XML) and context (Chrome, Content). Furthermore it provides a simple search box (as seen in the History and Bookmarks sidebars) and some accessibility improvements."

  • Web Developer – The Swiss Army Knife of web developer add-ons.  A huge feature list including the ability to selectively disable certian browser features, deeper view on images, forms, CSS, and page structure.  Some of these functions are available via Firefox’s menus but having them one click away in this centralized toolbar saves time.  For AJAX or DHTML authors the ‘View Generated Source’ option let’s you take a look at the full source of the page in it’s current state.  The next extension takes this particular ability to the next level.
  • DOM Inspector – The DOM inspector let’s you search and pick apart the DOM of a particular page of application.  Provides a tree view of the document or you can use the pointer to select a particular element on the page a drill down from there.  Although not a true extension since it ships by default on Firefox it’s a must have for any web developer working on a complex application.  Wether it’s trying to find the ID of a particular dynamic element or just trying to see the CSS styles on a div the DOM inspector always makes easy work of the task.
  • Live HTTP Headers – This extension is a quick and dirty way to view each request and response from the browser to the server.  Ever wanted to see how Yahoo Maps or Gmail works from the inside?  This is your tool.  Not only provides the content of each request but as the name suggests the headers too.  Comes in useful trying to track down issues with setting cache headers or trying to determine the exact content of a request from the browser.
Kevin Henrikson
Kevin Henrikson leads engineering for Microsoft Outlook iOS/Android. Previously, he co-founded Acompli and ran engineering prior to an acquisition by Microsoft in 2014 for $200M. Before Acompli, he was an Entrepreneur-in-Residence for Redpoint Ventures, a venture capital firm for early stage technology companies.

By Kevin Henrikson

Kevin Henrikson leads engineering for Microsoft Outlook iOS/Android. Previously, he co-founded Acompli and ran engineering prior to an acquisition by Microsoft in 2014 for $200M. Before Acompli, he was an Entrepreneur-in-Residence for Redpoint Ventures, a venture capital firm for early stage technology companies.