status

location
Washington, DC
Subscribe to GeoRSS Subscribe to KML


Developing websites and web applications in a proper dev environments

Published in Javascript, Programming, Web  |  3 Comments


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!

Similar Posts


Responses

  1. nnhvbhvvqu says:

    June 20th, 2007 at 8:52 pm (#)

    Hello! Good Site! Thanks you! pffywbzlvjqq

  2. Lorena says:

    December 18th, 2011 at 11:28 am (#)

    Great insight. Relevied I’m on the same side as you.

  3. mueplqulbz says:

    December 19th, 2011 at 4:23 am (#)

    8deKOl cjqyrdvjpnur