Snoopy v0.2

Snoopy is a bookmarklet for snooping on web pages. It's intended for use on mobile browsers (such as Mobile Safari on the iPad) where you can't view-source to poke around under the hood of sites to see how they're built. You might find it useful for your desktop browser, too.

Using the bookmarklet will give you an overlay featuring information that Snoopy can 'sniff' out of the page, such as the doctype, what JS libraries are used in the page, what analytics, what font embedding technique is used, etc. It also gives you the ability to view the raw and/or generated source of the page.

The Snoopy bookmarklet (click to try!): Snoopy

A note on scrolling in the 'view-source' view (in Mobile Safari)…

Mobile Safari helpfully decides to hide all internal scrollbars in pages, so if open the view-source tab in Snoopy and want to scroll within the code display window, you'll need to use two fingered drags within the source code area to navigate about.

Installation - Mobile Safari

The easiest way is to open up desktop Safari, drag the bookmarklet above to the bookmarks bar, and then either use MobileMe or standard USB bookmark syncing to your iDevice.

Alternatively, if you don't like syncing, you can do it the hard way…

Visit this page in Mobile Safari.
Copy all of the code in the following textarea to the clipboard: javascript:(function()%7Bvar%20d%3Ddocument%2Cs%2Ce%3Bvar%20el%3Dd.getElementById('snpy')%3Bif(typeof%20Snoopy!%3D'undefined')%7BSnoopy.toggle()%3Breturn%7Delse%20if(el)%7Bel.className%3D%2Fclosed%2F.test(el.className)%3Fel.className.replace('closed'%2C'')%3Ael.className%2B'%20closed'%3Breturn%7Ds%3Dd.createElement('link')%3Bs.setAttribute('href'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.css')%3Bs.setAttribute('rel'%2C'stylesheet')%3Bs.setAttribute('type'%2C'text%2Fcss')%3Bd.getElementsByTagName('head')%5B0%5D.appendChild(s)%3Be%3Dd.createElement('script')%3Be.setAttribute('src'%2C'http%3A%2F%2Fsnoopy-assets.allmarkedup.com%2Fsnoopy-min.js')%3Bd.getElementsByTagName('body')%5B0%5D.appendChild(e)%7D)()%3B
Click the '+' button on the menu bar and click the 'Add Bookmark' button.
Change the top field (the Title field) to 'Snoopy' or whatever you want.
(I'd recommend adding this to the Bookmarks Bar at this point, too)
Click the 'Save' button.
Take a deep breath. You're halfway there.
Now click on the little book icon in the menu bar to bring up your bookmarks. Navigate to the folder that you saved the Snoopy bookmark in.
Click the 'Edit' button and then tap on the bookmark you just created to edit it.
Now select the second field from the top (the Address field), clear it out and paste the link you copied at the start into the field.
Hit the 'Done' button to save, and you're all set!

Installation - Chrome

The installation process for Chrome on iOS is essentially the same as for Mobile Safari:

Save the bookmarklet to the 'Bookmarks Bar' using Chrome on the desktop.
Sync bookmarks between iOS and desktop using your Google account.

OR...

Visit this page in Chrome for iOS.
Manually copy/paste the JavaScript into a new bookmark.

To then launch Snoopy on Chrome for iOS

Visit the web page on which you want to launch Snoopy
Type the name of your bookmarklet (eg. Snoopy) into the Omnibar.
Find the Snoopy bookmark at the end of the list Chrome displays.

Read more about bookmarklets and Chrome on iOS, including a short video.

Installation - Android...

Unfortunately the stock Android browser doesn't currently support the use of the 'javascript:' pseudo-protocol bookmarklets, so Snoopy can't be installed. If anyone has any ideas on how to work around this issue, then please get in touch.

It appears that newer versions (>2.1?) of Android can install bookmarklets - although there is a limited character set that can be used which may cause it to fail. Currently investigating.

Installation - Desktop Browsers

Simply drag the bookmarklet above to your bookmarks bar and you're done.

Coming soon...

~~Syntax highlighted source code~~ Added 26/01/11
HTML source validation
And more...

Snoopy was created by Mark Perkins. You can fork the source code on GitHub, or follow me on Twitter for updates.