Even though iOS apps are not quite the development machines yet, you’ll generally find an iPhone or an iPad in a web designer/developer’s toolkit. Although if you’re a developer/publisher or just someone who wants to view the source code of a page or view all the assets deployed on it, you usually do it from the computer.
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.
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.
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.
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.