Now iOS 8 has made it much easier to view source, assets, and DOM resources of a page. And thanks to awesome third party apps with extension support, you can do it right in Safari (Chrome is not supported because extensions can access DOM only in Safari). Let’s talk about the two apps that will help you view and save source code for any website when you’re on the road.
View Source Extension for Safari
View Source ($0.99) is a simple and powerful app with a Safari extension. It costs $0.99, but comes with a lot of features. Once the app is installed, go to Safari, tap the Share button, swipe to the right on the bottom row and tap More. From here toggle View Source. This will enable the extension. More on iOS 8 extensions: iOS 8 extensions are quickly becoming a powerful tool. Take a look at how they work, the best share extensions, and how one extension can help you turn Safari into a fully-fledged downloader. Now, go to the page, tap the Share button, and choose View Source. You’ll see the source code of the page in all its glory. Tap the Share button to bring up the native share sheet. From here you can send the code to a notes app or email it. Below you’ll see four buttons – Assets, DOM, Script, and Info. Assets list all the images on the page. You can tap on a link to see a preview and to save the image. The DOM button will show you a tree model with a hierarchal structure of the HTML, XML, and SVG documents. You can tap on any element to expand it. The Script button lets you write and inject Javascript in any page (locally). The Info panel shows information about the page.
Srcfari
Srcfari ($0.99) is an alternative to View Source. While the app will show you the source code and assets like images, CSS stylesheets, and scripts running on the page, you’ll have to do it from the app itself. There’s no Safari extension for Srcfari. That said, using Srcfari isn’t a bad experience at all. The app has nice typography and it does a much better job at breaking down assets by scripts, CSS, and images than the View Source app. One gripe I have with Srcfari is that it enabled text wrapping for CSS stylesheets but not when you’re viewing the entire source (which the View Source app does). This means there’s going to be a fair amount of panning and zooming involved, at least on the iPhone. Other than that Srcfari is the usual affair. You can copy the source code to your clipboard or email it to someone. You can also save images using the app.
Conclusion
Safari is probably already your browser of choice on iOS (mostly because iOS doesn’t let you select Chrome as default). If you need to view source code fairly often, the $0.99 View Source app with its Safari extension will be worth the price. Do you usually use your iPhone or iPad to troubleshoot websites? Or to see what’s wrong with them? Let us know in the comments below.
