View Source Chart by Jennifer Madden
What Why & How     Get the bookmarklet

Get the View Source Chart bookmarklet

1. Choose one of these bookmarklet versions:

2. Copy and paste your chosen script into a new bookmark.

3. Click the bookmarklet to launch the source chart for a given page.

If you are not sure how to install a bookmarklet, watch the video demo below!

Because iPad installation is unique, watch the how to install a bookmarklet on iPad video (here) if you are unsure how to proceed.

How to Install various bookmarklet versions

The demo video uses the Chrome browser, but installation is similar on other browsers. The PageEdit editor extension for Chrome is used in the "embed in page" portion of the demo.

Note: iPad Safari does not display the video's captions, so it may be more useful to view the video on a laptop or PC.

How to install bookmarklet on iPad Safari

Opens in a tab, but source charts are EDITABLE

  • Note: To expand and collapse containers, only the tag type (div, table, span, etc) is clickable.

Use the following bookmarklet script to launch in a new tab
(Chrome, Firefox, Opera and Safari)
for Opera Mini on iPad, use the Internet Explorer code

  • Note: To force Source Chart to open in a pop-up Window instead of a tab, the variable named "wprops" appearing immediately following the first word, "javascript:" should be edited to include any or all of the following javascript window properties:
    wprops = 'width=300, height=300, top=300, left=500, toolbar=1, menubar=0, location=0, status=0, scrollbars=1, resizable=1'

Use the following bookmarklet script to launch in an iframe
(Chrome, Firefox, Opera and Safari. NOTE: not for use with Safari for iPad or Opera Mini for iPad)

For Internet Explorer or Opera Mini for iPad, use the following script:

    Internet Explorer's Favorites (bookmarks) enforce a character limit, which the VSC bookmarklet exceeds, so a large portion must be cloud hosted.

Embed in Page (all browsers)

    Embed the preceeding script between script tags in your page (<script>...</script>).
    Then include a link to the script as follows:
    <a href="javascript:VSCb();">Launch Source Chart</a>.
"This Simple Tool can make it easier and faster for any Web developer to debug a design"
-Macworld Magazine

"...the most accessible DOM inspector available to web developers. (This) extension should be standard in every web developer's toolkit."
-John Resig, creator of jQuery, from his book, Pro JavaScript Techniques.

Say "thanks" by hosting with DreamHost through this link

What Why & How     Get the bookmarklet