Useful Browser Extentions

Browser debugging tools have come a long way in a short amount of time. Here are some of our favorites.

Firefox

Firebug

Firebug is the quintessential developer plugin for Firefox. It comes with several powerful sections:
Console
The console allows you to view requests made to the server. Each can be expanded to view the response/request headers, the raw response, and the parameters sent.
View the output from javascript console commands, such as console.log and console.error, which support printing an object that can be clicked on and viewed in the DOM tab.
An input console which allows for the execution of scripts in the current context. Because it does not use a new context global variables can be accessed, including jQuery. This is useful to test jQuery selectors/ events, and useful in a thousand other ways.
HTML
This tool is fantastic for debugging bad HTML/CSS, as it allows for real time CSS/HTML modifications, as well as comes with an inspector tool allowing you to visually navigate in the tree to the element you point at.
This section also allows you to create break points for when attributes change, children are modified, or when this element is deleted via the right click menu.
Script
This allows you to view the currently loaded scripts, though it becomes a bit of a mess when dealing with anonymous functions. Clicking on the line number portion allows breakpoints to be set, right clicking adds a conditional breakpoint, or ‘debugger;’ can be added to a line of source to cause the debugger to stop here.
This tab also allows you to view the locals, stack, and set break points in the right hand side when the code is at a break point.

FireQuery

FireQuery adds a list of jQuery DOM attachments after their respective element into the HTML tab for attachments such as events, handler, etc.
Clicking on events shows all event attachment chains and gives a link to the function it calls.

ySlow

ySlow anaylzes your pages to finds points of optimization, mostly based on their excellent   best practices article. For the most part these rules are only truly relevant for when working at a large scale, but they’re always worth considering.  

Internet Explorer

Internet Explorer includes “Developer Tools” within it (hit F12 within IE to view them), however the functionality lags far behind that of Chrome and Firefox. For this reason most of us only spend time debugging in IE when there are no alternatives.

Firebug Lite

Firebug Lite is a limited implementation of Firebug that integrates itself into the DOM of a web page. Simply make a bookmark of the Firebug Lite link, and click it to have it integrate itself. A good alternative to developer tools in a pinch.

Chrome

Chrome does not need any additions to be a powerful debugging tool. Simply press control+shift+i
The HTML/Javascript break points work the same, but I generally have better luck with Javascript in Chrome than in Firebug.

Fiddler

Fiddler is a standalone tool that works much like the request display functionality of Firebug, but is browser independent and picks them up across your full system. This is useful when you need additional levels of access to the requests being made, or are stuck in an environment which lacks displaying them, such as Internet Explorer 8. We also use this tool frequently for debugging external integrations, such as Solr or ActiveMQ.

Leave a Reply

Your email address will not be published. Required fields are marked *

America's Best Software Engineers, On-Demand, at an Affordable Price
Surge Forward With Us