Viewing HTML Source Code On iPhone and iPad

As a new software engineering student I noticed a limitation when trying to test out my webpages on either my iPhone or iPad, there is no built in functionality to "view source page source". Sure, there are third party apps that do this plus much more but I just wanted a built in option right in my Safari mobile browser.

With a little googling I found there is a way and it starts with an app that every Apple device has called Shortcuts. You can use this app to build custom shortcuts that can be added to your browser actions. You can do a lot more with the Shortcuts app. (The gifs in this post were created using a shortcut!)

Once there hit the + in the top right corner to add a new shortcut. You can set the name, icon and icon color.

Then it is time to "Add Action" and search for and choose "Make HTML from Rich Text". Click the settings icon in the upper right and turn on "Show in Share Sheet". Add another action, search and choose "Quick Look".

All that is left to do now is test it out. Go to any webpage in Safari and hit the action button, then choose "View Source" and Voilà, source code!