Debugging web apps added to home screen on iOS Safari

11
votes

I'm trying to debug a web app that is added to home screen. I have enabled web inspector on safari. I am able to debug the app if I open in iOS safari but when I add the app to home screen and try to debug, it shows 'No Inspectable Applications'. Any help would be appreciated.

iOS version: 11.2

MacOS Safari version: 11.0.1

2
iosangularprogressive-web-appshomescreensafari-web-inspector
Try to update your iOS if you haven't done yet, then you will see in the pending updates the new safari version. See the SO post for reference. Also, if you have enabled private browsing in Settings > Safari, it could also help if you turned it off as what this answer in this SO post implies. - MαπμQμαπkγVπ.0
@MαπμQμαπkγVπ.0 I tried all the settings mentioned in the links above but still no luck. I'll edit the question and add OS version. Hope that would narrow down a few things. - Gunner
@Gunner Hi, did you find a solution to your issue? I'm facing the same problem right now and it's driving me nuts. - Olivier Krull
@OlivierKrull Hi. Unfortunately no. I'm waiting for this same as you. In the mean time, debugging is a lot of trial and error. - Gunner

2 Answers

1
votes

You should put focus on the app first and then press: 

Option+Command+i

So you do not open the inspector in advance in this case. This is not possible because you can consider it like opening a new browser tab where it makes no sense to inspect it from the inspector in another tab that is already open. Since the menu to open the inspector is missing when the PWA is opened as a desktop app, you need the keyboard shortcut to show it.

1
votes

Not sure if it's related, I had an issue where I couldn't get the inspector window to open for a cordova web app on iOS 11.2

I found that I had to go back to (ios) settings and toggle Safari Web Inspector off and on while looking at the (osx safari) developer menu to see it and then inspect it.