Docsource mobile bookmarklet

January 24, 2011 3:04 pm | 8 Comments

As part of my focus on mobile performance I’ve been happily using the Mobile Perf bookmarklet. The information provided by Page Resources and DOM Monster are a great start at figuring out what’s going on in mobile web pages.

Last week I wanted to examine the use of transcoders on various carrier networks. The easiest way to do this is to look at the document source of the web page. But guess what? There’s no way to do that on most mobile browsers! So I wrote a bookmarklet for that and added it to Mobile Perf. Here’s the before and after shots.

OLD NEW

That’s right – I created the new Docsource bookmarklet for viewing the page’s document source. It’s a piece of core functionality that is indispensable for analyzing websites. You can add the Docsource bookmarklet by itself, but I encourage you to add the Mobile Perf bookmarklet to get the entire collection of mobile bookmarklets.

Installation

MOBILE: Install the Mobile Perf bookmarklet on mobile devices as follows:

  1. click this link: Mobile Perf bookmarklet
  2. bookmark this page
  3. edit the bookmark URL and remove everything up to and including the hash (“#“) so that the bookmark URL starts with “javascript:“

Here are step-by-step instructions for iPhone.

DESKTOP: It’s much easier to install on a desktop browser – just drag this link (Mobile Perf bookmarklet) to your bookmarks toolbar or add it to your favorites.

What it does

Here’s how Docsource works:

Launching the Docsource bookmarklet displays a popup with two choices:
Expand the docsource in the current page…
…or click “open in new window” for a bigger view.
Zoom in to see the raw HTML.

Access to document source is now yours – even in mobile browsers!

Before you say it let me agree – analyzing document source (and the information from other bookmarklets) on the mobile device is painful. I strongly believe that we want to gather performance data on the mobile device but analyze that data remotely. I’ve got something in the works to solve that problem and hope to announce it at my workshop at Webstock: The Long Tent in the Performance Pole. If you can’t make it to New Zealand don’t worry – I’ll do a simultaneous blog post.

Back to work…

8 Responses to Docsource mobile bookmarklet

  1. Guypo | 24-Jan-11 at 6:12 pm | Permalink |

    Very cool – this is definitely a pain point today.

    If you have a few more cycles to spend on this, it would be great to combine it with some HTML syntax highlighting tool, maybe something like http://shjs.sourceforge.net/

  2. Patrick Mueller | 24-Jan-11 at 7:09 pm | Permalink |

    I’ll post another plug for http://pmuellr.github.com/weinre/ here – one of the few Web Inspector-y things it currently supports is the Elements panel – which doesn’t show you the HTML in resource form, but the DOM in a tree form – just like Web Inspector does.

  3. Aaron Peters | 25-Jan-11 at 3:40 am | Permalink |

    This is very nice Steve.
    Too bad my Android 2.1 phone with Webkit 1.3 browser will not allow me to bookmark that URL (URL is invalid). Whatever I try, it gets rejected.

    Guess I need to get me an iPhone 4 …

  4. Guypo | 25-Jan-11 at 6:50 am | Permalink |

    FWIW, I’ve been using this Bookmarklet: http://bit.ly/1hHn0
    It’s less refined but works nicely. A google search got me to this one too: http://bit.ly/4cnJq – which looks a bit prettier, but I’m not sure how it works.

    Aaron, maybe one of those would work for your old Android.

  5. Rob | 25-Jan-11 at 7:18 am | Permalink |

    @Aaron, I managed to bookmark the link from my Android G2 phone. It might be a device specific issue?

  6. Steve Souders | 25-Jan-11 at 7:39 am | Permalink |

    @Guypo: Great comments. Folks: Guy is from Blaze.io – check them out.

    @Patrick: Cool remove web inspector. I’ll play with that some more.

    @Aaron: As @Rob says, I too was able to install this on my Android phone. Are you using the steps for mobile?

  7. Aaron Peters | 25-Jan-11 at 1:34 pm | Permalink |

    Steve,

    yes, I got your email the other day with tips for getting it to work. Tried, no luck. (on initial save of bookmark and editing a valid bookmark URL afterwards… it wont accept it)

    Since Rob got it to work, it must be me :(
    So, I will continue to fiddle with it.

  8. Larry | 26-Jan-11 at 4:32 am | Permalink |

    Yeah managed to get it on HTC Android 2.2. On the default browser and on DolphinHD browser. Had to manually add a new bookmark and copy & paste the javascript string into the location field. Clicking on the link didn’t work.

    Great set of tools!