My Favorite Web Development Tools

There are several tools that I don’t think I could do web development without. They give me the power to find out valuable information about the pages I’m viewing. They even let me edit the HTML and CSS directly, without having to refresh the browser window! I can debug JavaScript, test the page with different viewport sizes, view the size of every file loaded by the browser, and much more. All these tools are plugins for the Firefox web browser. Let’s take a closer look at these invaluable tools.

• Web Developer Toolbar – This toolbar gives me options for disabling everything from css to browser cache to images to cookies. It also has very nice options for filling out forms and viewing just about anything I could possibly want to know about certain elements on the page. I can resize the viewport and make sure I have no CSS or JavaScript errors with a simple glance at the toolbar.
• Firebug – This nifty little plugin is extremely useful. I can highlight any element on the page with a single click of the mouse. I can then view and change all the CSS related to the element. I can also view the DOM properties and functions of an element. I can debug javascript by setting breakpoints in the code. Firebug even lets me edit the HTML of the page and also tells me how much bandwidth is used in retrieving each file. (My favorite thing to do is edit pages so they make fun of Tim!)
• Google Toolbar – Lastly, Google Toolbar, although it’s not technically a web development tool, is very useful. I use it to manage all my bookmarks, so when I find something web development related at home I add it to my google bookmarks and I have it the next day at work. I can also search anywhere on google.com (Google Images, Google Maps, etc) or even the current page very quickly.

These are all excellent tools that I use on a daily basis, but by no means are they the only tools. I have tinkered with several excellent widgets for Opera that do almost the same things. There are many tools out there no matter what browser you use for development.