-
Web Development Bookmarklets
-
Block Elements Reveal
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.
-
Classes Display
-
JavaScript Shell
-
Reveal Named Anchors
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.
-
Scripts Display
-
Source (Current Selected) Display
Displays the DOM tree of the selection as HTML. If you haven't selected anything, this bookmarklet will show the generated source of the entire page.
-
Source (Current) Display
Displays the 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.
-
Style Edit
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.
-
Style Interact
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.
-
Style Sheets Display
-
Style Show Computed
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.
-
Stylesheet Disable (in the current document)
-
Stylesheet Reënable (for the current document)
-
Topography by Borders
-
Topography by Shading
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.
-
Variables Display
-
-
Reveal Passwords in Forms
