justaddwater.dk

I decided to make a little toolbox that’s easy to apply on web pages, when investigating problems with web pages. Basically, it’s the tools I used when investigating the case I described in “Why web standards matter (case study)”

I decided to split this into two posts. This first one is about the toolbox. The second part is about the investigation technique (available separately).

Firefox Extensions for the toolbox

I use Firefox for the investigation. It has the best web developer tools and bookmarklet support. Get firefox.

1. HTML Validator (based on Tidy). HTML validation errors and warnings immediately in the status bar on the page you watch. Indispensible when aiming for standards compatible websites.
2. Firebug. JavaScript errors and warnings immediately in the status bar.
3. Firefox Web Developer Toolbar. Has a lot of handy tools, among others the ability to turn off CSS stylesheets.

For a more indepth description of Firefox extensions, refer to my previous post from last year: Web developer’s collection of browser tools.

JavaScript bookmarklets

Bookmarklets are small JavaScript snippets, that is stored as a bookmark and executed on any page. I prepared a collection useful for investigating web standards issues.

Import all at once (separate HTML page):

Web Standards Investigation Tools (WSIT) HTML page
(last updated 2006-09-18)

Instruction:

1. Save the linked HTML page locally
2. Open Firefox Bookmark Manager (Bookmarks > Manage Bookmarks)
3. Choose File > Import …
4. Import bookmarks into “Bookmarks Toolbar Folder” for easy access to them.

The bookmark above contains the following bookmarklets. I list them with a “shortname”

1. Page Info (contains key figures about content to markup ratio, total code weight and number of image elements. Shortname: pInfo
2. Mouse Over DOM Inspector 2. Turned on, you simply hover any element to learn about attributes, children and ancestors. Probably the easiest way to investigate a HTML page. Shortname: modi2
3. JavaScript Shell. Opens a JavaScript Shell and allows it to access the current page. Shortname: Shell

A few other bookmarklets that I use frequently for furthter investigations, but they are not used in my description.

4. JavaScript Variables. Displays all JavaScript variables and functions. Shortname: JS vars
5. Cookie editor. View, delete and edit cookies. (Will be available later due to a server crash).
6. Table number rows. Numbers each table row (makes it easy to see if tables are used for layout). Shortname: Trow

More info about the bookmarklets.

Page Info and Mouse Over DOM inspector are part of Steve Chipman’s bookmarklet collection “Favelet Suite” which is definately worth a mention.

JavaScript Shell, JS Variables and Table number row are from Jesse Ruderman’s indispensable webdevelopers bookmarklet collection (which you can download as one file)

The Cookie editor is my own invention. Will be available later as I will move it to a new server.

Summary

These are the basic tools that have been helpful for me when investigating web standards related issues in web pages. The toolbox here is complimented with the page describing the technique for locating problems in HTML.

Related reading:

• technique for locating problems in HTML
• Why web standards matter (case study)

Technorati Tags: javascript, bookmarklet, toolbox, webstandards, web standards

This entry was posted by Jesper Rønn-Jensen on Monday, September 18th, 2006 at 22:35 (GMT-1) and is filed under HTML, JavaScript, Web Development, Web Standards. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.