View Source for Safari on iOS with Shortcuts

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan

<p>I love <a href="https://en.wikipedia.org/wiki/View-source_URI_scheme">view-source</a>, it's a nifty super power of the web that nearly all mobile browsers are trying to kill. Not exactly sure why. View-source is what got me into web development because I could see how other people structured their pages, and at the time I started web development it was pretty much the only way to debug web pages.</p> <p>I've also been using my iPad Pro whilst I am not at work for the next month or so... It's a great device, and it appears to be locked down in a way that restricts me from doing exactly what I want... this is until I found out about the Shortcuts app that is built in to iOS.</p> <p>Shortcuts let you build small utilities, programs and automations that perform actions on certain user gestures like "Share a Page", or "Open an app", or "Connect to WiFi".</p> <p>Now that I can share URLs to an "app", I can do a lot of things that are not really possible on mobile devices.</p> <p>I created <a href="https://www.icloud.com/shortcuts/7ec2af9dfa6a4a0aa8ddfc765b2e63c1">this "View Source" shortcut</a> that you can use (if you trust me) to Share a page from Safari or Chrome and quickly view the source.</p> <p>Here it is in action:</p> <figure><img src="https://paul.kinlan.me/images/2020-05-28-view-source-for-safari-on-ios-with-shortcuts-0.jpeg" alt="View Source in the Share Sheet"></figure> <figure><img src="https://paul.kinlan.me/images/2020-05-28-view-source-for-safari-on-ios-with-shortcuts-1.jpeg" alt="View Source of this site"></figure> <p>There is one major caveat. It doesn't inspect the exact instance of the page you are running, it has to the page in a 3rd party site that I built (<a href="https://www-source.glitch.me">https://www-source.glitch.me</a>) / <a href="https://glitch.com/edit/#!/www-source">source</a> - this means that if you are logged in, or there is any state that is shared (such as cookies) then it will <em>not</em> display the same content that you are viewing.</p> <p>It's kinda hard to share the source code of a Shortcuts, so here is a screenshot:</p> <figure><img src="https://paul.kinlan.me/images/2020-05-28-view-source-for-safari-on-ios-with-shortcuts-2.jpeg" alt="View Source Code"></figure> <p>Have fun.</p> <p>I really hope that Safari (and Chrome) can deprecate the need for this shortcut.</p>

This content originally appeared on Modern Web Development with Chrome and was authored by Paul Kinlan