dustin caruso

dustin caruso

Front-End / JavaScript / UI / WordPress / Shopify Developer

View Source on iPhone

iphoneThis is a cool little tidbit for those of you web developers that have an iPhone. A Safari bookmarklet that enables you to “View Source” for any web page while using Safari on the iPhone. A bookmarklet (in case you didn’t know) is “a JavaScript program stored as a URL within a bookmark” as defined by Wikipedia.

The steps that follow will walk you through the process…
1 – Select and “copy” the long string of code below…

* This needs to be one long continuous string, so if you’re cutting and pasting from Firefox, you’ll need to remove the line breaks and/or spaces.

2 – On your computer, go to ANY webpage in Safari and bookmark it using either the “+” (Add Bookmark) button or by choosing “Add Bookmark…” from the “Bookmarks” menu. When saving the bookmark name it “View Source” and save it wherever you’d like in your bookmark hierarchy.

3 – Now, go into the bookmark manager. Do this by clicking the bookmark icon in your bookmarks bar or by choosing “Show All Bookmarks” from the “Bookmarks” menu. Navigate to the bookmark you just saved.

4 – Single-click on the URL for the bookmark to highlight the text for editing, and paste the text/code you just copied above.

5 – Plug in your iPhone and sync it up w/ your bookmarks on your computer.
Now, to actually use it – launch your Safari web browser on your iPhone and navigate to whatever web page you would like to view the source code for. After the page has loaded, click the bookmark icon in the lower Safari navigation bar (3rd from the left), and navigate to your “View Source” bookmark and click it.

And there you have it.