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.
Sherlock can be installed in Internet Explorer, FireFox or any other web browser. Follow the directions below for your browser to quickly get up and running.
Installing Sherlock in Internet Explorer
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.
Installing Sherlock in FireFox
Follow the above steps for installing Sherlock in IE and do the same in FireFox. You may not be able to set the View feature mentioned in instructions for IE, since FireFox does not have the Links view in the View --> Toolbar, so skip that step in FireFox.
If you already have Sherlock installed in IE, you may import it to FireFox. To do that, just import IE Bookmarks to Firefox. Since Sherlock is already present in the Links folder of IE Bookmarks, the import operation will carry it over to FireFox.
To run Sherlock in FireFox, just go to your Bookmarks --> Links --> Sherlock --> choose the action you want to use.
Installing Sherlock in other browsers
Unzip the Sherlock.zip file to the location where your browser stores your bookmarks. Sherlock will now be available from your bookmarks menu.
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.
- Edit This Page
Allows you to modify a local copy of the page you are currently viewing. Useful for creating quick variations of page designs. If you use this in FireFox, you can save your modifications.
- FireBug Lite
- 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.
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.
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: