Developing websites and web applications in a proper dev environments

When developing a website using Ajax, Javascript, and DOM manipulation, debugging is often relegated to just hitting Refresh to see if it worked. Your node doesn't update, something times out, and you're not sure what caused it. Putting in alert() everywhere has gotten you tired of hitting enter a hundred times on every page refresh.

Enter some really nice web application development tools. Most of these use Firefox, and modify the user-centric application into a developer's tool.

The Web Developer Firefox Extension is probably the most well known/common. It adds a toolbar that allows you to quickly and easily inspect a webpage's layout, disable cookies, view source, modify the css on the fly, or do browser teting. It's indispensable for developing your own site's layout as well as understanding how other site layouts are handled.

Firefox comes with the DOM Inspector, which is a separate window you can pull up to select and inspect DOM elements of a page, traverse the tree, and dynamically change node attributes and values. This is nice if you want to check out what the class or ID is of a page element, especially with dynamically added elements (i.e. via Javascript) where they aren't visible in the page's source.

For checking CSS errors, Javascript errors, and POST/GET requests returned to your browser, check out Firebug (via Behind the Times). It sits in the bottom menu-bar of Firefox and shows a counter of errors on a per-page basis (rather than the Javascript Debugger which is built into Firefox, which shows all errors received to the entire Firefox application, not just the current page). Firebug is very useful for watching incoming Ajax requests. Just be careful, this can eat up a lot of memory when left active on sites with lots of errors (e.g. GMail, which typically runs up in the thousands of errors very quickly)

Even heavier application development and debugging may lead you to the Venkman Javascript Debugger. It is a full Javascript development and debugging environment where you can pull up all of the javascript files, view variables, set breakpoints, run an interactive console, etc. It's pretty big and complex, so you probably want to check out tutorials like Learning Venkman.

The last tool is not Firefox specific, but is a special build of Apple's Safari and KHTML engine which provides a very nice DOM inspector: Safari/Webkit Web Inspector.

Happy debugging!

About this article

written on
posted in ProgrammingWebJavascript Back to Top

About the Author

Andrew Turner is an advocate of open standards and open data. He is actively involved in many organizations developing and supporting open standards, including OpenStreetMap, Open Geospatial Consortium, Open Web Foundation, OSGeo, and the World Wide Web Consortium. He co-founded CrisisCommons, a community of volunteers that, in coordination with government agencies and disaster response groups, build technology tools to help people in need during and after a crisis such as an earthquake, tsunami, tornado, hurricane, flood, or wildfire.