Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Debugging web apps added to home screen on iOS Safari

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

like image 237
Gunner Avatar asked Dec 08 '17 11:12

Gunner


People also ask

What is debug mode on iPhone?

When troubleshooting an issue that cannot be resolved right away, you may be asked to enable debug mode to give the YouMail support team additional data logs. Once enabled, you will have to replicate the issue so it is logged and then submit the log which will go directly to our app developers.

Does Safari have a debugger?

Safari includes Web Inspector, a powerful tool that makes it easy to modify, debug, and optimize websites for peak performance and compatibility on both platforms. And with Responsive Design Mode, you can preview your web pages in various screen sizes, orientations, and resolutions.


2 Answers

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.

like image 168
Jos Avatar answered Oct 18 '22 01:10

Jos


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.

like image 1
Daniel Swiegers Avatar answered Oct 18 '22 02:10

Daniel Swiegers