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?
Web Inspector
RSS for tagDiscuss Web Inspector, which gives you quick and easy access to the richest set of development tools ever included in a web browser.
Posts under Web Inspector tag
6 Posts
Selecting any option will automatically load the page
Post
Replies
Boosts
Views
Activity
I'm developing a web extension for Safari on iOS using MV3.
The extension is working fine in Chrome, but in Safari I experience some seemingly random issues. I would like to debug it, but here is my problem.
I have my iPhone connected via cable to Mac, and it works fine with XCode, so I assume this part is OK.
I open Safari or Safari Tech Preview (doesn't matter) on my Mac, developers options are enabled, and in the Develop menu, under my iPhone section, there are things I can debug. There is an entry "[Ext name] - Extension Service Worker" but when I click it, it's empty. Web inspector pops up, but there are no network requests, no logs, nothing. I know the extension is working, because I can stream log to my HTTP server, but I don't see them here at all. I can use console to trigger commands like chrome.storage.local.get(null, console.log) and it shows my local store, so why I don't see any logs? Also, the background script is not visible in the Sources tab, just one weird request:
navigator.serviceWorker.register('safari-web-extension://E3449EA7-EC25-4696-8E6C-[ID HERE]/background.js');
</script>
Any ideas what went wrong? The entire team of 4 people has the same issue and we can't move forward because of that.
Also, the Develop => Service workers or any other menu section doesn't show my service worker. Logs for websites running on my phone are visible and in general web inspector for them works fine.
Hello,
I am developing a website which starts a web worker using the js code:
const zarrWorker = new Worker('./zarr_file.js', { type: 'module' });.
The script 'zarr_file.js' is served from the same origin with Cross-Origin-Embedder-Policy: require-corp and Cross-Origin-Opener-Policy: same-origin and it is importing external modules through the import statement (e.g. import * as zarr from "https://cdn.jsdelivr.net/npm/zarrita/+esm";).
All the external modules are blocked by Safari with the error Worker load was blocked by Cross-Origin-Embedder-Policy, although I can see (by running curl on them) that they correctly set cross-origin-resource-policy: cross-origin`.
The same website works fine in Chrome and Firefox.
Is it a bug or is Safari implementing stricter policies? In the latter case what would be the solution?
How can I make a background image take the entire screen in ios26?
I've tried position fixed, sticky, env() css variables but nothing worked. It does it when in PWA mode, but I would like to do so in the browser too.
I have "http://localhost:8080" showing the index page I've created but php is not handled though an extension is running.
Haven't even tried mySQL yet but since there is no reference to it in https.conf the same problem will exist. Homebrew extension running also.
https.conf:
#PHP was deprecated in macOS 11 and removed from macOS 12
#LoadModule php7_module libexec/apache2/libphp7.so
There are no php.so files on my machine and again no mention of mysql
What should I enter in http.conf to activate these functionalities?
Thanks.
PS could you reference a tutorial on using Safari and Web inspector
I need to know the https address of a certain page within my app. This is going to be used as a redirect URL. I don't think it is a good idea to use deep links because it has to be an https address. I don't think Universal Links will work because it is not my website that I will be communicating with.