Sunday, September 30, 2018

How to debug a web page on iOS - Part 1

One of our customer, recently wrote an email to our support team about a problem they were facing. They were not able to view the "Printables" section of Monster Math Games. This section shows list of free and paid Printable activities. This page is designed as a web page instead of a native screen and loads in a web view on the app. The customer was only getting a blank white page.

I started investigating the issue, initially I thought it might be some sort of network latency issue or  something related to HTTP vs HTTPS. But it turned out, the problem was with one of Javascript API we were using.

The Problem

Debugging a web page on iOS device, is not as straightforward as I had initially thought. I learned two very interesting ways of debugging webpage errors on iOS. This post is an attempt at documenting these two approaches so that it could help someone who is facing a similar problem.

The Solution

The first thing I wanted to check was the actual source code of the web page. Here are the steps we need to follow to view HTML source of a web page.

  • Open this post on the iOS safari browser
  • Click the upload icon button on the menu bar, then click the "Add Bookmark" button.
  • Change the Title field to "View Source" and hit "Save"
  • Next we need to edit this bookmark and change the Address field to the following javascript code. Copy all the text from the following gist.
  • It needs to be done this way because, iOS Safari doesn't let us edit the Address field while creating the bookmark.
  • Click on the "Book Icon" in the menu bar to bring up your bookmarks. 
  • Click on "Favorites", you should see the newly created book mark "View Source".
  • Click the "Edit" and then tap on "View Source" bookmark.
  • Now select the Address field and paste the copied code.
  • Hit the "Done" to save the bookmark.
  • Visit the web page whose HTML source you want to view.
  • Once the page opens, click the newly created bookmark "View Source". 
  • This will open up a popup with details of the web page
  • This Popup has a "View Source" tab that shows the HTML source of the web page.

Pretty cool, huh!
Have some Fun!