Browser debugging tools have come a long way in a short amount of time. Here are some of our favorites.
Firebug is the quintessential developer plugin for Firefox. It comes with several powerful sections:
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.
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.
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.
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 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.
ySlowbest 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 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 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 does not need any additions to be a powerful debugging tool. Simply press control+shift+i
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.