Debug issues on Mobile Safari & Projects run in iOS Apps using Safari on a Desktop

You will some times run into a problem where your project works on a Mac but not an iOS device.

You can of course use Hype Reflect’s console but it’s reporting is limited. Also you may have everything work on the iOS device when pushed locally to Hype Reflect but not on your real server.

Some of you are familiar already in using a Desktops web browsers built in console to debug issues and this tip is not an in-depth in using the console.

But by plugging your device into your Mac and opening the Page in the Mobile Safari on the Device, either directly going to the url or by using Hype Reflect on the Device to open the local project it is displaying in the devices Safari , you can get all the benefits of the Desktops Console and debugging tools.

1, We need to enable the web inspector on the Device. Go to the Safari settings-> Advanced -> Enable Web inspector.

2, Plug my iPhone into my Mac using the normal Lightning Cable.
3, On the iPhone go to the webpage. ( If you are viewing the page in Hype Reflect, you can use it’s Safari button to open it in in the Device’s Safari)

4, on the Mac, Open Safari.
5, Go to the Developers menu and select you iPhone (device) in the list. And then select the page. (


If you do not see the developers menu, go to Safari’s presences->Advanced. And tick the Show Developer menu in menu bar


You will now have a new debugging window pop open, giving you access to the fully working debug tools normally used for the desktop browser but aimed at the browser on your device.

For example you can see the full console report, Everything should be interactive as normal. So for example you may want to Target an element.

In the debugger window click the Target button as normal.

Now on the device tap the element you want to Target.
The targeted element will display target selection on the device. And the Element’s details will be displayed in the debugger window in the Elements pane.


You now have a way of comparing more of whats going on and comparing with whats happening on the Desktop version and the iOS version.


I do not have a PC so cannot tell or test if this tip works on them. I see no reason why not but maybe someone can confirm.?


On iOS Apps

Accessing the web inspector tools also works for Hype projects that are embedded into iOS apps.

If you are running an iOS app from Xcode in the Simulator or on a connected device you can then go to the same menus in Safari discussed above and call up the web inspector for the page running in the App.


Selecting


App Web inspector tools

1 Like

Thanks for posting this, @MarkHunte! Here are a few video tutorials I created a while back to show how to test on other devices / platforms.

I know Chrome has a robust testing suite, for Android devices, and Firefox has gone above and beyond, but I've been unable to find info on IE mobile debugging.

2 Likes

You might want to check this on Safari 9.x the iOS device does not show in my tests on two different El Capitan systems with Safari 9.0.2

I am using the Latest Safari 9.0.and iOS,

Even with iTunes open and registering my iPhone I get the menus…?

Ah,

@Burndog Just found why some of you cannot see it. See the update in the top post. (step one)

1 Like