Web Development Bookmarklets
These bookmarklets let you see how a web page is coded without digging through the source, debug problems in web pages quickly, and experiment with CSS or JS without editing the actual page.
(To keep bookmarklets in order to use them on other web pages, drag them to your Bookmarks Toolbar. Or, install them all at once.)
Browsers: 
is Internet Explorer for Windows, 
is Netscape 7 or Mozilla, 
is Netscape 4, and 
is Opera.
Details
Opens a JavaScript Shell and allows it to access the current page.
Opens a JavaScript Development Environment and allows it to access the current page.
Type in CSS rules to experiment or to create a temporary user style sheet.
Creates a new window into which you can type CSS rules for the original page. The rules are applied immediately. As long as you keep the style window open, the rules will still be applied if you reload the page or even go to another page on the same site. See examples of user style rules and examples of style rules for web developers.
Experiment with changes to the page's style sheet.
Similar to "test styles". Instead of starting blank, the window starts with all of the style sheets in the page.
This bookmarklet supports inline and linked style sheets, imports, and style sheets with data: URLs (such as those created by "test styles"). When style sheets cannot be loaded with XMLHttpRequest (out-of-domain or non-http URLs), it includes them with an @import rule.
Lists the ancestors of any element you hover over in the status bar.
For example, a link in a table cell would appear as "BODY > table tbody tr TD > A".
Also shows classes (e.g. SPAN.newsItemLink) and ids (e.g. DIV#content) when present. The idea of showing classes and ids comes from pixy's "List computed styles" bookmarklet.
Lists the computed styles of an element and of its ancestors.
Features:
- Only shows properties where each element differs from its parent.
- For the root, only shows styles that differ from the root of a blank HTML document.
- Collapses "side" properties when all four sides are the same. For example, if all margins are equal, you'll see "margin-*" instead of "margin-top", "margin-left", etc.
- Some important properties, such as "display" and "position", are red.
- Some properties that can usually be ignored, such as "top" and "width", are green.
- Overrides link clicks, so you can use it on A elements.
- Same status bar info as the "ancestors" bookmarklet.
- Crosshair cursor.
Suggested by Simon Willison. (Simon actually wanted a bookmarklet that would show the style rules that apply to an element, like the DOM Inspector does, but I don't think that can be done in a bookmarklet.)
Disables all style sheets.
Removes most presentational attributes and tags while leaving style sheets intact.
Removes the following attributes: bgcolor, background, color, align, text, alink, vlink.
Removes the following tags (and any attributes on them): FONT, CENTER.
Displays linked and embedded style sheets.
Tip: since the style sheets are all in one window, you can quickly search them using your browser's Find feature.
Loosely based on Samrod Shenassa's "document info" bookmarklet.
Displays linked and embedded scripts.
Displays all JavaScript variables and functions.
Lists classes used in the document.
Displays the current DOM tree of the page as HTML.
This bookmarklet is especially useful on pages created by javascript, because these pages have no original source.
The generated source is usually similar to the original source, but may have small changes such as collapsed whitespace between tag attributes.
Displays the current DOM tree of the selection as HTML.
If you haven't selected anything, this bookmarklet will show the generated source of the entire page.
Displays the current DOM tree of the page as XML.
After using this bookmarklet, you can save the result as .xml, .xhtml, .svg, etc. Tested with XHTML+MathML and SVG. Not for converting HTML to XHTML.
Thanks to WeirdAl for helping me write this bookmarklet.
Draws borders to show tables (colors indicate nesting), paragraphs, and divs.
Paragraphs get a light gray border and divs get a black border. The colors of table borders depend on nesting: outer tables are blue, second-level tables are green, and third-level and deeper tables are red.
The bookmarklet works by applying this style sheet to the page.
Suggested by Paul McGarry.
Shows the nesting level of every element using shading.
Shades the BODY element black, children of the body dark gray, and so on for up to fifteen layers of nesting. Beyond sixteen layers of nesting, shades every element pink (instead of white).
Since each element is slightly lighter than its parent, it is easy to see the extent of each element at a glance. The overall brightness of a page can give you an idea of how complex a page's markup is. Since this bookmarklet doesn't add borders, it preserves layout to the pixel.
Based on a bookmarklet by Joseph Pearson. Joseph's version works by recursing through the document, and works with more browsers (including Safari). This version works by adding a CSS style sheet, and is faster in IE and Mozilla.
Shows the nesting level of every element using shading and 3D borders.
Like "topographic view", but sacrifices perfect layout preservation for a more 3D look.
Creates the HTML code to link to the current page.
Creates the XHTML code to include the current image.
Makes anchors visible, letting you link to or bookmark a section of a page.
This is useful if a long page has named anchors but no table of contents linking to those anchors, and you want to make a link to the middle of the page.
Problems: Some pages have unclosed named anchors, which will cause a large portion of the page to be marked by this bookmarklet. HTML 3.2 and 4.0 both require end tags for the <a> element, but many browsers silently recover when pages leave out these end tags on named anchors, so many pages leave off the end tags anyway.
When a JavaScript error occurs, shows the error message in the status bar.
Sets an onerror handler so that when a javascript error occurs, the error appears in the status bar. To test, make an error occur.
When a JavaScript error occurs, shows the error message in a dialog.
Sets an onerror handler so that when a javascript error occurs, the error appears in a dialog. To test, make an error occur.
© 2000-2007 Jesse Ruderman (jruderman@gmail.com). Feedback is welcome.
Last modified November 1, 2006.