Firefox is my preferred browser for development. Chrome and Safari have come a long way, and Safari definitely has comparable tools, but Firefox is (in my opinion) aesthetically superior and has the most add-ons. Firefox 4.0 dramatically increased its performance and speed, and is worth checking out.
Install Web Developer
, and HTML Validator
Web developer makes it easy to examine element information such as HTML attributes, CSS, and session/cookie information. I'm especially fond of the 'style' tool, which can be invoked by Command+Shift+Y on Mac. It gives you a target cursor, and clicking an element displays relevant CSS information. This is very handy for CSS fine-tuning. Also, under the "View Source" tab is the "View Generated Source" feature. On a dynamic page, this will update the source code to its current state, allowing changes from DOM manipulation and AJAX to be reflected in the HTML source.
Firebug is super useful for AJAX debugging. Clicking the 'Net' tab allows you to see server requests, including the payload and response from the server. It even renders the response (if it is HTML) for easy viewing. The 'Script' tab allows you to set breakpoints in your code, and to modify variables on a live page. I recommend turning Firebug off when you aren't analyzing page information as it slows down browsing.
would be the industry standard, but as the website itself says: "WARNING: JSLint will hurt your feelings." I've found JSLint to be overkill, occasionally finding errors with perfectly acceptable code related to jQuery. Firefox Error Console is best used by clearing the log immediately when the page finishes loading, and then checking it periodically for errors as you interact with the page.
If the problem is server side, the log file can be a more effective tool than sending output to the client (such as echo() in PHP). Add functions to your custom library that make sending information to the log file cleaner, like separating information with several new-line characters. Log files help avoid line-by-line debugging by printing output and exiting. They are a powerful tool to generate data for analysis.
With these tools, you should be prepared to debug any web issue. One final note: Be sure to check your code on every major browser before you deploy. Internet Explorer seems to cause more than its share of compatibility problems, but I've found specific problems in Safari and Firefox. Get yourself a good virtual machine like VMware or Parallels to make Windows testing easier. IE-Tester
helps you quickly test IE 5.5, 6, 7, and 8 if you want to support older versions. There's nothing worse than seeing everything look perfect in Firefox, deploying, and then discovering that the entire page looks garbled on Internet Explorer. Good product needs good testing, and testing on every browser is vital to a successful product. Good luck!