I know, I know – this title sounds like link bait, but I realized the other day that many of the suggestions I make to my fellow developers on how to troubleshoot/debug “stuff” begins by recommending a tool. The underlying theme among all of these tools is that they help you verify, verify, verify!!

So here are some useful things to know how to do as web developer…

1. how to debug with firebug

• Set breakpoints
• Edit html/css on the fly
• Turn off css classes
• View external calls that your browser makes on page load

Knowing how to debug with firebug will help you when you want to verify that some piece of javascript is being executed by the browser, when you need to know if a style is actually being applied to a class or that your browser is actually loading a fresh version of some file every page load.

2. how to use tamper data (or another packet sniffer like charles or wireshark/ethereal) :

• install tamper data firefox extension or wireshark
• start tampering or capturing data *load webpage (optionally edit the request)
• stop the capture/tampering
• view calls your browser (ah, er, your computer) is making

Basically, if you are unsure that the request contains some information, you can verify that using tamper data or wireshark.

3. how to create cookies with web developer

• install the web developer Firefox extension
• select “Cookies” from the Web Developer menu
• next select “Add Cookies”
• enter the name of the cookie, the value and what domain it applies to

Knowing how to set cookies and verify that a cookie exists and that it has some value and applies to some domain is, of course, essential when working with cookies.

4. how to test for multiple user agents

• install the firefox extension
• import any needed user agents
• switch from your default user agent to needed user agent (iphone, IE6) and refresh the page

Sometimes development and test environments are publicly accessible, which can be a real problem for test from a mobile device without access to your companies intranet. And although testing for multiple browsers may best be done in the actual browsers themselves, problems can expose themselves here.

5. how to navigate your way around jQuery, prototype, yui, moo tools or some other javascript frameworks, including “third party” javascript apis (like video, twitter, url shortner apis)

• avoid “rolling your own” or “reinventing the wheel” by using existing methods provided by the framework
• use the right methods and objects for the version of framework you are using

It is important to know how to use documentation from some javascript framework to confirm that you are writing what you think you are writing.

6. how to write or use an automated functional testing suite, such as Selenium, Quick Test Pro or some home-made solution

• easily set up functional tests to confirm that changes you’ve made aren’t breaking old functionality

The idea behind all of these tools is to capture some record of page quests and html/css/js on the page and match this up to some pre-recorded (potentially somewhat dynamic) set of html/css/js values.

7. how to configure your ide to help you spot javascript/css/html errors

• whether it be a javascript plugin for your favorite IDE or the fact that your IDE provides syntax coloring for javascript, know how to make it easy on yourself to spot errors

The easiest thing you can do for yourself is verify that there aren’t errors in your code before you start testing it.

8. how to test your regexs

• again just confirm that what you have written is working for the cases you can identify.

You won’t be able to test every possibility, but if you identify the cases that might occur you can test those out

9. how to put your “stuff” in version control easily

• whether it is svn, git, clearcase, cvs or whatever, you’ve got to either know your version control client or know your command line commands very well
• confirm that your commits are successful by browsing them in some web interface provided by the vc service

If you aren’t seeing your changes in an environment, it is always good to check and see if those changes are really there.

10. how to troubleshoot client-side performance problems

• determine what is slow and if the slowness is a result of page weight or because your javascript has some runtime inefficiencies.
• use yslow
• for a more in depth look at javascript performance, i suggest javascript rocks

Basically, the end result of these tools from a very high level perspective is to know where the performance problem is (or is not). For instance, if your page weight is small and there is little javascript “action” on your page, it might be plausible to think slowness isn’t “on the front end”, but is being cause by slowness on the server side.