My personal choice when it comes to tracking down issues and debugging is the Firebug plugin for Firefox. For the most part it’s a flavor preference since all of the built in tools are fairly robust and it is a tool I have been using since before the built in features were as useful.
As you can see in the screen capture Firebug has a fairly simple interface and selection tool for finding objects in the DOM and the CSS that applies. This can be a bit of a god send when trying to track down colors a user wants to copy or find where a random CSS feature is being set via the source notes under the applied styles. Always helpful when trying to look into another developer or designers code and trying to locate where that one odd margin is coming from that keeps throwing everything out of alignment.
As with all of the other developer tools, Firebug makes it easy to set breakpoints and step through your code. At the top of the script window the file drop down allows you to easily select each of the included files or sources that contain script tags. This helps when sifting through a site that has a lot of code and includes though in some systems like SharePoint the list of includes can get a little lengthy to look through. Don’t forget about the Watch panel though in this window for reviewing currently active objects and their details.
For further information or to learn more details about where these tools are in your browser check these links:
- Internet Explorer Developer Tools
- Firefox Developer Tools
- Chrome Developer Tools
- Opera Dragonfly