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.
