Bookmarklets Home | Links | Forms | Text and Data | Zap | Web Development | Validation | Misc

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.)

Bookmarklet Description Works in
shell Opens a JavaScript Shell and allows it to access the current page. Details Moz
jsenv Opens a JavaScript Development Environment and allows it to access the current page. Details Moz
test styles Type in CSS rules to experiment or to create a temporary user style sheet. Details Moz Op7
edit styles Experiment with changes to the page's style sheet. Details Moz
ancestors Lists the ancestors of any element you hover over in the status bar. Details IE Moz
computed styles Lists the computed styles of an element and of its ancestors. Details Moz
zap style sheets Disables all style sheets. Details IE Moz
zap presentational html Removes most presentational attributes and tags while leaving style sheets intact. Details IE Moz Op7
view style sheets Displays linked and embedded style sheets. Details Moz
view scripts Displays linked and embedded scripts. Details Moz
view variables Displays all JavaScript variables and functions. Details Moz Op7
list classes Lists classes used in the document. Details IE Moz Op7
generated source Displays the current DOM tree of the page as HTML. Details IE Moz
partial source Displays the current DOM tree of the selection as HTML. Details Moz
serialize as xml Displays the current DOM tree of the page as XML. Details Moz Op7
show blocks Draws borders to show tables (colors indicate nesting), paragraphs, and divs. Details IE Moz Op7
topographic view Shows the nesting level of every element using shading. Details IE Moz Op7
topo with borders Shows the nesting level of every element using shading and 3D borders. Details Moz Op7
make link Creates the HTML code to link to the current page. Details IE Moz NS4 Op7
make img tag Creates the XHTML code to include the current image. Details Moz Op7
named anchors Makes anchors visible, letting you link to or bookmark a section of a page. Details IE Moz Op7
onerror status When a JavaScript error occurs, shows the error message in the status bar. Details IE Moz NS4
onerror alert When a JavaScript error occurs, shows the error message in a dialog. Details IE Moz NS4

Browsers: IE is Internet Explorer for Windows, Moz is Netscape 7 or Mozilla, NS4 is Netscape 4, and Op7 is Opera.


Details

shell (Moz)

Opens a JavaScript Shell and allows it to access the current page.

jsenv (Moz)

Opens a JavaScript Development Environment and allows it to access the current page.

test styles (Moz, Op7)

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.

edit styles (Moz)

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.

ancestors (IE, Moz)

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.

computed styles (Moz)

Lists the computed styles of an element and of its ancestors.

Features:

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.)

zap style sheets (IE, Moz)

Disables all style sheets.

zap presentational html (IE, Moz, Op7)

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.

view style sheets (Moz)

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.

view scripts (Moz)

Displays linked and embedded scripts.

view variables (Moz, Op7)

Displays all JavaScript variables and functions.

list classes (IE, Moz, Op7)

Lists classes used in the document.

generated source (IE, Moz)

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.

partial source (Moz)

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.

serialize as xml (Moz, Op7)

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.

show blocks (IE, Moz, Op7)

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.

topographic view (IE, Moz, Op7)

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.

topo with borders (Moz, Op7)

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.

make link (IE, Moz, NS4, Op7)

Creates the HTML code to link to the current page.

make img tag (Moz, Op7)

Creates the XHTML code to include the current image.

named anchors (IE, Moz, Op7)

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.

onerror status (IE, Moz, NS4)

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.

onerror alert (IE, Moz, NS4)

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.