Sherlock: The Web Developer Tool

What is Sherlock?

Sherlock is a development tool for examining, validating, and debugging web pages using Internet Explorer (it can also be used in FireFox or other browsers by importing the Sherlock folder and bookmarks).

Sherlock is a collection of the best developer bookmarklets from around the web. Each bookmarklet performs a certain task on the current web page in the browser. Each task is detailed below.

While it is recommended that developers use the development tools available for FireFox as extensions to analyze, validate, and debug their web pages, there are instances where this may not be possible. That's where Sherlock comes in handy.

Installing Sherlock

Sherlock is installed in Internet Explorer by unzipping the Sherlock.zip file into your Links folder within your Favorites directory on your hard drive. Typically, your Favorites directory is located within the 'Documents and Settings' directory, under your login name folder.

After unzipping the Sherlock.zip file to your Internet Explorer Links folder, and verifying that you have enabled the Links toolbar in IE (View > Toolbars > Links) you will see the 'Sherlock' folder icon in your IE Links bar. Click the 'Sherlock' folder icon and the list of available actions you can perform on the current web page will be listed. Select an item from the list to perform the specific task listed below.

Using Sherlock

Sherlock contains the following actions/tasks you can perform on the current web page:

• Check Images for Missing ALT
  Useful for Section 508 Compliance
• Count Links
  
• DOM Inspector
  Useful for debugging HTML and CSS issues. Press ESC to exit the inspector.
• DOM Inspector 2
  Works the same as DOM Inspector, but with a different interface. Choose your flavor.
• Grayscale the Page
  Useful for testing color contrast for usability/accessibility.
• Highlight Links
  
• List all Links
  Display a pop-up window with all hyperlinks on the page.
• Page Info
  Provides detailed page info, including page size, transmission estimates, HTML element use, etc.
• Resize to 640x480
  Simulates the 640x480 display resolution setting by changing the browser window size to match. All the other resize simulators below work the same way, but with varying resolutions.
• Resize to 800x600
• Resize to 1024x768
• Resize to 1280x1024
• Resize to 1600x1200
  Note that if your current resolution setting is lower than some of these, then your window will be resized to fullscreen.
• Resize to Full Screen
• Send Page to W3C CSS Validator
  
• Send Page to W3C HTML Validator
  
• Toggle CSS Style Sheets
  Now you have a quick way in IE to turn style sheets on and off. Disabled style sheets are important for Section 508 Compliance.
• XRay
  Another DOM inspection tool. When activated, you can click on anything on the page to find out about the code underneath. Click the upper right corner of the XRay dialog to close it.

Send Sherlock to Other Developers

You can also select the first item in the Sherlock menu, 'Tell a Friend about Sherlock', to easily tell others about this tool. By selecting this item, your email program will appear with a pre-formatted message regarding Sherlock, including the location of this web page, so that others can have easy access to it. All you need to do is select your recipients and send the message.

Related Sites

If you like the bookmarklets included in Sherlock, you may be interested in other types of bookmarklets. The following sites provide some of the best bookmarklets for you to try:

• Jesse's Bookmarklets Site
• XHTMLed Bookmarklets