Up until some point relatively recently, I have been able to use Safari's web inspector to connect to the iOS simulator in order to debug our web application in development at http://localhost:8088.
Now, the web inspector still OPENS, but it opens in a broken state. The context is available to select from Safari's "Develop" menu: Develop > "iPhone 16 Pro (Simulator)" > "localhost - login". It appears under the Safari heading if I have navigated to the web app in the browser, or under the Expo heading if I am accessing it through the webview in our React Native wrapper app. When I select it, the web inspector window does appear.
However, once it opens, the Elements pane is empty, the Console pane is empty, expressions entered into the console are not evaluated, there's no content in Sources, Network, Storage, etc.
Important notes:
- This broken state happens at http://localhost:8088 as well as http://127.0.0.1:8088, and it seems that the insecure context is the issue.
- The web inspector DOES work for HTTPS sites. If I navigate to, e.g., https://example.com in the simulator and connect the web inspector, everything works fine.
- The web inspector also works fine in Safari on macOS (OUTSIDE the simulator) when accessing non-HTTPS sites. It's only a problem for non-HTTPS sites when connecting to the simulator.
- A coworker has the same problem, so it is not isolated to my machine.
I would enable TLS locally as a workaround, but this web app is very complex, and I know from experience that it is very difficult for various reasons to set it up properly for our project in development, and it will take significant non-trivial work to do so.
So... Why is this happening? Is this expected behavior? Is there a way that I can debug my site on localhost without HTTPS?