PWA iOS debugging - How?

Hi there,

I am struggling to debug an iOS PWA app. I am seeing mixed messages on the internet on ability of Safari to inspect the console log. Some say it is no longer possible, but then it should be possible as per iOS12?

I am experiencing behavior I cannot replicate while the phone is in non-PWA Safari mode.

It can be related to changes in the way an iOS PWA handles local storage. It seems blocking, or maybe a runtime kills the app. Either way, difficult to inspect.

I can inspect the service worker, so maybe the alternative strategy is to pass the console.logs to the service worker which will log it? That seems like a strange way…

Looking forward hearing your thoughts.

ps. running latest version on iOS. Catalina as MacOS. Ionic Angular.

personally I found that using ngrok https://ngrok.com/ works well.
make sure to first allow for developer access on both the mac and ios!

This is my workflow:
I use 2 terminal windows, in 1 I start my dev server and in the other I start the ngrok server - its as simple as pointing to the ngrok file the connection type and the port eg ~/Applications/ngrok http 3333

  • ngrok provides you with a url that you open on your iphone.
  • Then connect your phone by usb to the mac, (or you can use xcode simulator too)
  • while you are viewing your app in safari on ios (or if you have a manifest and download the app)
  • select from developer tab in macOs safari and select the device (simulator, or connected iPhone) and select the ngrok url.
  • a safari dev tools will open (cant have everything) and you can do debugging from there

good luck.

I use: Safari Technology Preview - Safari - Apple Developer. works great!

great. Thx for the hint. Will try and let you know.

Works like a charm!! Thanks so much !!!

1 Like

great, You’re welcome!

Sorry to bother, but can it with latest iOS update this wont fly no more? It shows the url i am visiting but not the console log