Debugging on iPhone Safari?


#1

My development app is working fine in desktop browsers, accessed at localhost:3000. For kicks I just loaded it up on my iPhone by connecting to my desktop development system using the following browser URL in IOS Safari:

10.0.1.nn:3000

(10.0.1.nn is the IP address shown at the moment for my desktop Mac in System Preferences->Network).

My Meteor app loaded fine and all node.js code appeared to be running correctly.

But some images wouldn’t load. Images loaded as expected on the Home Page and again on another page I accessed. But for a third page, the images don’t load at all yet. I 'm not sure yet why those images aren’t loading.

Is there something comparable to Chrome Dev Tools for IOS? Or, some other sort of debugging strategy people use in this sort of case?

Thanks in advance to all for any tips/info.


#2

If you connect your phone via USB to a Mac and launch Safari browser on your computer, in the Programming menu (which you have to enable first in Settings -> Advanced) you will have an item with your phone’s name and inside, the website that is currently opened on the phone’s Safari browser. Clicking on it will launch Safari inspector, which is similar to Chrome Dev tools.

You also need to enable this feature on your phone before you use it, you will find it in Settings -> Safari -> Advanced -> Web inspector.