Skip to content

Instantly share code, notes, and snippets.

@skopp
Created March 31, 2013 19:24
Show Gist options
  • Save skopp/5281685 to your computer and use it in GitHub Desktop.
Save skopp/5281685 to your computer and use it in GitHub Desktop.

##View Source Code Bookmarklet for iOS

This is a simple javascript bookmarklet I made for allow developers view the source of any page on iOS devices.

View it in action here.

##What is good about it ?

It's simple, fast and have syntax highlight. Also it automatic beautify the source code.

##What it uses ?

It uses google code prettify and js beautifier

##How to install ?

  • Get your iOS device
  • Open this page
  • Add this page to your bookmarks
  • Set the title to "View Source Code"
  • Copy this code:
javascript: (function(document) { window.open('data:text/html;charset=utf-8,' + encodeURIComponent(' <!doctype html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" /> <style> pre.prettyprint { padding: 0; border: none; } </style> <script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script> <script src="http://jsbeautifier.org/beautify-html.js"></script> <script> document.title = "Source Code of ' + window.location + '"; window.onload = function() { var source = document.getElementById("source"); source.innerText = style_html(source.innerText); prettyPrint(); } </script> </head> <body> <pre class="prettyprint"><code class="language-html" id="source">' + document.documentElement.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</code></pre> </body> </html>')); }(document));
  • Open your bookmarks
  • Edit your bookmarks
  • Edit the bookmark you have added
  • Change the adress to the code you copied
  • Now to view the souce of any page, just open your bookmarks and touch on "View Source Code"
  • Be happy
javascript: (function(document) {
window.open('data:text/html;charset=utf-8,' + encodeURIComponent('
<!doctype html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" type="text/css" rel="stylesheet" />
<style>
pre.prettyprint { padding: 0; border: none; }
</style>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript"></script>
<script src="http://jsbeautifier.org/beautify-html.js"></script>
<script>
document.title = "Source Code of ' + window.location + '";
window.onload = function() {
var source = document.getElementById("source");
source.innerText = style_html(source.innerText);
prettyPrint();
}
</script>
</head>
<body>
<pre class="prettyprint"><code class="language-html" id="source">' + document.documentElement.innerHTML.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;") + '</code></pre>
</body>
</html>'));
}(document));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment