How to debug a web page on iOS - Part 2

In this post we will continue our pursuit to debug a web page on iOS. Wont it be nice, if we had Chrome Developer Tools kind of interface even for the iOS?

The second way to investigate webpage errors on iOS is going to achieve exactly that, but using Safari!

The Solution

Apple natively supports remote debugging of webpages on  iOS since iOS6. Here are the steps that are necessary to enabled it.

• Open Settings app on iOS device
• Click on Safari

• Here, click on Advanced

• Next, enable the Web Inspector switch.

• Now, head over to your Mac and open Safari.
• Click on Safari --> Preferences

• Click on Advanced tab and enable Show Develop menu in menu bar 

• This will Show a new menu item called Develop right next to the Window menu item.
• Now, Connect your iOS device with the Mac using a cable.
• Next, Open the Safari browser on the iOS device and open the webpage that you want to investigate.
• Click on Develop and you should see your iOS device listed there.
• Clicking on your iOS device name under the Develop menu, should show up all the web pages opened on the iOS safari browser.

• Click on the webpage that you want to debug, this opens up the Safari Web Inspector 
• Here, you can select elements, manipulate CSS, investigate console errors, look at all the network calls, profile your app and more. 
• Notice when we inspect a div in the Web Inspector, it automatically gets highlighted on the iOS device

Nice isn't it?

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!

How to get to Tadoba and things to take along!

We had an opportunity to visit Tadoba Tiger Reserve, its a pristine and unique eco-system situated in the Chandrapur district of the Maharashtra, India. It contains some of the best of forest tracks and endowed with rich biodiversity. Its a brilliant place for nature lovers.

When I was planning the trip, one thing I found particularly challenging was to get pin point location of various safari gates and how to get there. This blog is an effort to help people like me, with landmarks to locate various safari gates. This post also list certain Do's and Dont's to best enjoy the safari.

Safari Gates and Getting There

Tadoba is close to a city called Chandrapur which is around 140KM from Nagpur. I drove to Chandrapur from Nagpur using a Zoomcar (Use my referral code MTI5NDU while making your first booking and get flat 15%(max discount - ₹1500) off).

Chandrapur has a bunch of decent hotels and is about 25-45 KM away from Tadoba Gates. Safari Gates are well spread out so make sure you are book a safari for a gate that is closer to where you are staying.

As a landmark locate Hotel Siddharth Chandrapur on Google Maps, the road to various gates of Tadoba is bang opposite this hotel.

We visited the following gates:

• Devada Adegaon Agarzari Zone
• Agarzari Zone
• Moharli
• Junona Zone
• Zhari (Kolsa)

Devada Adegaon Agarzari Zone and Agarzari Zone are right opposite to each other. They are about 25KM from Hotel Siddharth.

Moharli and Junona are pretty close by as well and they are about 35KM from Hotel Siddharth. These gates are around 11KM from Agrazari Zone gates, basically you have to follow the same path but go a little ahead.

Zhari (Kolsa) is on the other side and is about 35KM from Hotel Siddharth.

Here is an interactive map to give you a better idea


Buffer Or Core Zone?

Tadoba has two types of zones, Buffer and Core. Some people say that, there is a high probability of spotting the tiger in core zone, but my personal experience is that its all about a little bit of luck and timing. You need to be at the right place, at the right time, to spot the tiger. To put things in perspective, out of the 4 buffer zone safaris we did, we spotted the tiger in 3 of them!

Safaris are done in open Jeeps with one guide and one driver. One safari typically last for around 3:30-4 hrs. You can book the safaris online from here.

How many safaris to do?

To have a decent chance of spotting the tiger, I would recommend doing at least 4-5 safaris. This gives you a higher chance of spotting the tiger. If you just do one or two safaris, there is a good chance that you would return without spotting the tiger.

We did a total of 5 safaris (4 in Buffer zone and 1 in the core zone). In one of the safari we were extremely lucky to witness a Gaur fight. The idea is not to keep looking only for the tiger, there are plenty of other animals which are equally majestic. Trust me, these safaris are well worth their time and money.

Some random clicks:

Spot the tiger!

I am watching you!

Do's and Dont's

• Lot of dust will settle on you and your clothes while doing the safaris. Its advisable to carry a scarf or handkerchief to tie around your head and mouth.
• It will be cold, especially during the morning safari. Do carry something to cover yourselves so that you do not feel too cold.
• Take ample water to drink and keep yourselves hydrated.
• Carry some light weight foods like sandwiches to eat if you feel hungry during the safari -- Especially if you have young children.
• Food options near and around Tadoba Gates are pretty limited. There is a nice MDTC Resort nearby with a decent restaurant. 
• Please don't litter -- Anywhere!
• Be patient and don't get disappointed if you don't spot a tiger. There are lots of other animals in the forest to see too. Even the flora and fauna has a lot to offer!

What a hot afternoon!

Closing Remarks

Its a must visit place according to me. If you are a nature lover, you would love to visit Tadoba. Its a very well maintained and protected national park too!