Bookmarklets are implemented using a long URL that begins with "javascript:". The URL's JavaScript typically inserts the bookmarklet's script into the current page, thus giving the bookmarklet the ability to do its work.

Installing a bookmarklet on a desktop browser is pretty easy: just drag it to the bookmarks toolbar or right-click it and add it to your favorites. But these techniques don't work in most mobile browsers. It's possible to install bookmarklets on mobile devices, but it can be tricky. The technique I use (recommended by Maximiliano Firtman) involves bookmarking a URL with an embedded anchor and then editing that URL.

Here are step-by-step pictures of installing a bookmarklet this way on the iPhone. I look specifically at installing the Mobile Perf bookmarklet, but this technique should work for all bookmarklets and all mobile browsers. (On my Android Nexus S I had to replace all escaped space ("%20") characters with an actual space (" ") character.)

  1. Click this link:
    Mobile Perf bookmarklet
    This adds "#javascript:(function..." to the end of the URL in your browser.
  2. Bookmark this page.
  3. Edit the bookmark's name to be the name of the bookmarklet you're creating - in this case "Mobile Perf bookmarklet". For some reason you can't edit the URL at this point. We'll do that next. Go ahead and hit Save.
  4. Let's edit that bookmark to use the correct URL. Open the bookmark menu and click Edit. Click on the "Mobile Perf bookmarklet" bookmark to edit it.
  5. Delete everything up to and including the "#" so that the remaining URL starts with "javascript:(function". Hit Done three times and you should be back at the browser.
  6. Now go to a page you'd like to analyze, for example a Google search for "flowers". Open your bookmarks and select "Mobile Perf bookmarklet" and presto - there's the Mobile Perf bookmarklet menu. Try clicking on one of the bookmarklets in the menu, for example Firebug Lite or Page Resources.

Bookmarklets might seem clunky compared to desktop browser tools, but they are a way to gain visibility into mobile browsers today. There's still work to be done to manage the small screen real estate, but as more bookmarklet development focuses on mobile these issues will be addressed.