LearningAPI has moved to a new blog!

The learningapi blog has moved to a new URL. These posts will remain here, but all new content has moved to learningAPI.com: Digital Media, Streaming Video & Educational Technology. You may also subscrdibe to the RSS feed for the new learningAPI.com blog.

February 03, 2006

Debugging tools for Web Developers - for Firefox & Internet Explorer

For debugging Web sites and Web applications, there's nothing that beats the tools available in Mozilla Firefox.  Tools like LiveHTTPHeaders, the WebDeveloper toolbar, and others make Firefox a dream for developers.  But if a site is acting up in Internet Explorer, it can be difficult to figure out why - few tools are available and those that are are often a poor substitute for the ones avaialble for Firefox.

Still, there are good tools available to aid development in both browsers. I've put together a short list of  the developer tools I've found useful in each.  This isn't a comprehensive reference, but it's a short-list to the tools that I, as a Web Developer, have come to depend on.

Tool Firefox Internet Explorer
Developer Toolbar The WebDeveloper toolbar is a comprehensive debugging tool. Some highlights:
  • DOM Inspector - walk and manipulate the DOM live, change attributes of page elements live in the browser to see the results. 
  • Live CSS Editing - view and edit all style information for the page live while looking at the page - no reloads, just edit as see the results.
  • Convert from POSTs to GETs and GETs to POSTs - great for seeing the parameters being  passed in a POST request.
  • Outline DIVs, tables, and other block-level elements in a page
  • Shortcuts to clear cache, examine and clear cookies , http authentication, session cookies
  • Turn images off, show image sizes, show alt text
  • Automatic validation of HTML, CSS, links, load time analysis
The IE Developer Toolbar has a limited subset of  Firefox's equivalent, but is still very useful.
  • DOM Inspector similar to Firefox's
  • Display image dimensions, block sizes, class and id information
  • Has a nifty ruler for measuring the exact pixel location (x,y) of any spot on the page, measures distances/offsets between two points, as well. 
  • Validation tools
  • Shortcuts to clear cache, cookies, view cookies.

HTTP Header Inspection
LiveHTTPHeaders - see all the http headers from every request and response.  Great for sniffing out mime types and form submissions.  Has replay mode, lots of configuration options.   ieHTTPHeaders - same idea as LiveHTTPHEeaders, but with fewer bells and whistles.
Image and Color Information ColorZilla's most important feature is the eyedropper tool it adds to Firefox's status bar.  Displays the color (in hex or RGB) of the pixel currently under the mouse cursor on the page.  
Javascript Debugging The Venkman Javascript Debugger is a full-featured debugging environment for Javascript. Includes breakpoints, watches, object inspection, expression evaluation, useful error messages.  If you've used a real code debugger for Java or other languages, you'll be right at home with Venkman. Microsoft Script Debugger is weak, but it's better than nothing. [download here]
Built-in Features
  • Javascript console for viewing all errors and warnings as a page loads and executes.  
  • Full syntax highlighting on View Source 
  • Select part of a page, right click to see View Selection Source to see just that portion of the page's source code.  
DOM Source Viewing Apparently, if you select all of a page and then "View Selection Source", in the source code viewer you will see document.write() generated HTML, but not inserted DOM elements.   Full Source lets you see not just the code as loaded in a page, but lets you see any HTML or script code generated by other code.  All that stuff written to the page with document.write() or createElement() becomes visible.  There are some other useful-looking gizzmos in this package as well, although Full Source is the only one I've used.

TrackBack URL for this entry:

Listed below are links to weblogs that reference 'Debugging tools for Web Developers - for Firefox & Internet Explorer' from learningAPI.com: Media and Learning Technology - Larry Bouthillier.
Web Development Tool
Excerpt: New Software web design software developer tools asp scripts wireless isp list download utilit...
Weblog: Web Development Tool
Tracked: February 23, 2006 02:05 AM