Safari Developer Tools

RSS for tag

Inspect, edit, debug, and check the performance of your web content using Safari developer tools.

Posts under Safari Developer Tools tag

19 Posts

Post

Replies

Boosts

Views

Activity

Safari/WebKit Crashes on Johnson Controls Website Across Multiple iOS Versions (Actual devices only)
Here we are facing issue, which is mentioned in detail below: Safari on iOS consistently crashes when loading https://johnsoncontrols.com/. The error shown is: “A Problem repeatedly occurred on https://johnsoncontrols.com/” This happens with multiple iPhone models and iOS versions, suggesting a WebKit rendering or JavaScript execution issue. This occurs occasionally similar behavior on Android, iPhone (Chrome) Environment • Devices: Any iPhone model, we are tested on available models like iPhone 12 mini, iPhone 14, iPhone 15 • iOS Versions: Latest stable releases, occasional occurrence on iOS 13 • Browser: Safari (WebKit) • Network: Both Wi-Fi and cellular tested • Additional Occurrences: Rarely reproduced on Chrome (iPhone, Narzo Android) • Occurs only on physical devices (not observed in Simulator) Steps to Reproduce Open Safari on any affected iOS device. Navigate to https://johnsoncontrols.com/. Sroll page up and down for some time Observe page automatically get reloads, crashed and show error message (A problem repeatedly occurred on “https://johnsoncontrols.com/"). Expected Result Page should be rendered normally without crashing. Actual Result Safari reloads page / blank / crashed and displays errors. Troubleshooting Done • Cleared cache and cookies • Disabled content blockers • Tested in Private mode • Reset Experimental Features • Issue persists across different networks Technical Notes • Suspect JavaScript memory leak or DOM manipulation causing WebKit crash. • Intelligent Tracking Prevention (ITP) or site scripts may conflict. Questions for Community • Can Apple confirm whether this aligns with any known WebKit bugs? • Are there recommended diagnostic steps (e.g., Web Inspector, crash logs, sysdiagnose specifics) for reproducing Safari scroll-related site crashes? • Should the site’s development team adjust JavaScript, rendering approach, or resource handling to improve stability on WebKit?
1
0
362
1w
Web inspector only works with HTTPS contexts in iOS simulator
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?
2
2
786
Nov ’25
Can’t Debug background.js in Safari App Extension (Manifest V3)
I’m developing a Safari App Extension and I want to debug the background.js script. However, I can’t find any tool or option to do this. When I run the extension from Xcode using the ProjectName Extension (macOS) scheme, I expect to see a “ProjectName” item under the Develop → Web Extension Background Content menu. But there’s nothing there. Has anyone encountered the same issue? How did you fix it? Environment: Manifest Version: V3 Safari: 26.0.1 (21622.1.22.11.15) Xcode: 26.0.1 (17A400)
1
0
653
Nov ’25
Selenium reports an error when taking screenshots during tests on Safari
We attempted to perform automated testing (using Python) on an 11th generation iPad (iPad A16) using Selenium 4.38.0, but we were unable to capture webpage screenshots using the function "driver.save_screenshot(filename)". However, this issue did not occur on an iPad Air 4. During our debugging of the "WebDriver.py" script, we found that after issuing the screenshot command, a status value of 500 was returned, accompanied by an "unknown error". We have communicated with the Selenium team and provided the main Python code(https://github.com/SeleniumHQ/selenium/issues/16555). They suggested that the problem likely lies within the SafariWebDriver, rather than in the "remote_webdriver.py" file. Additionally, we tried using the SafariWebDriver provided by Safari Technology Preview, but the problem persisted.
0
0
295
Nov ’25
Unable to debug with console.log in Safari on iOS 16.4 Simulator.
I'm working on a regular website, in which I'm trying to debug using the (MacOS) Safari Development tools. Since updating my Simulator to iOS 16.4, console.log is no longer displayed in the Console. Even when executing it directly in the console (console.log('test');), it's not printed. Now, I've read that this is a feature for debugging in-app browser content (https://webkit.org/blog/13936/enabling-the-inspection-of-web-content-in-apps/) but can't find the regular web workaround here. TL;DR: No longer see console.log in iOS 16.4 Safari when debugging from my Mac. Thanks in advance for your suggestions!
3
6
4k
Oct ’25
New IOS Safari CSS Issue with DVH & VH
After updating to the new iOS, in Safari, my overlays and backdrops using 100dvh no longer cover the full screen there's now a gap at the bottom. Switching to 100vh fixes it, but that causes scrolling issues on older Safari versions since 100vh includes extra height. Has anyone else experienced this? What's the recommended fix that works across iOS versions?
1
1
374
Oct ’25
LocalOverride Request regular expression broke dev tools
Hello, I'm using Safari 18.2 on Sonoma 14.6.1. I was using the Developer Tools to do a Local Request Override in the Source tab for a CSS file that had a changing query string. I thought I had a good regular expression to catch all variants, but apparently it was too generic and possibly wrong, and made both Source and Network tabs no longer work in my Safari. The regular expression I entered for the Local Request Override was: //build/style.css(?.*)?$ Now my dev tools is broken to the extent that the Source and Network tabs no longer work. The slide-out panel on Source that shows Breakpoints, LocalOverrides, etc no longer shows. The toggle for it does, but does nothing now. UI in general looks a little wack on both tabs. So, since I can't turn off the Local Request Override, I've been trying to locate where Safari may have stored it to manually delete it. Not having a lot of luck on that front. It seems to me that Safari was unable to escape my regular expression correctly and it then causes additional issue. Just a guess though. Any advice or help in getting Safari Source & Network working again / manual removal of the LocalOverride would be greatly appreciated. I'm fluent in OSX and Linux, but grep was not much help surfacing anything that worked. Thanks in Advance, possibly a Safari bug as well.
2
0
492
Oct ’25
Safari Web Extension Error Stack Traces in Sentry Show webkit-masked-url://hidden/ — Any Way to Restore Real Script Paths?
I’m a developer working on a Safari Web Extension that’s distributed via the App Store and also tested locally through Xcode. I’m running into an issue that’s affecting my ability to debug errors reported to my Sentry error logging instance from production. The Problem When an error is thrown in one of my extension scripts (e.g., background.js, popup.js, or content.js), the error is sent to Sentry but the captured JavaScript error stack trace replaces the file paths with the webkit-masked-url://hidden placeholder like this: ReferenceError: Cannot access uninitialized variable. at ? (webkit-masked-url://hidden/:14677:28) at ? (webkit-masked-url://hidden/:16307:3) This happens consistently across both App Store builds and local Xcode runs. It prevents me from seeing which script the error came from or resolving the actual source code lines using uploaded source maps in Sentry. My Setup Safari Version: 18.5 (Stable on macOS) Distribution: App Store and local Xcode development Extension Type: Safari Web Extension Error Reporting: Sentry (@sentry/browser SDK) Bundler: Webpack with inline-source-map What I’ve Confirmed I can see the actual source files in Safari’s Web Inspector under the Sources tab when the extension is running. My source maps are uploaded to Sentry correctly and are associated with the matching release. Errors from Safari are being captured by Sentry, but the file URLs are masked, so stack traces cannot be resolved against my original source. My Question Is this behavior (masking file URLs in stack traces with webkit-masked-url://hidden/) intentional for Safari Web Extensions? If so, is there any supported method or workaround to allow exception stack traces to reveal the original script path (e.g., popup.js, background.js) so tools like Sentry or even console logs can point to real locations? I fully understand the privacy/security rationale behind the masking, but as the extension developer, this is making it extremely difficult to debug runtime issues in production. I’d really appreciate any insight into: Whether this masking is expected and permanent behavior If there are any entitlements, debug settings, or Info.plist keys that can alter this behavior for development or for trusted/own extensions If Apple recommends a different way to log extension errors that includes script name or source references Thanks in advance for your help! I’m happy to share more technical details or try out suggestions.
0
0
136
Jun ’25
[iOS 26 Beta] event.target.value is always empty — only from specific script domains
Hey everyone, After installing iOS 26 beta, I started noticing unexpected behavior in our input event handlers. Specifically, when users type into an field, event.target.value is always an empty string — but only when the JS file is loaded from a specific domain (e.g., t1.daumcdn.net). The exact same code works perfectly when hosted on other domains like t2.daumcdn.net or search1.daumcdn.net. 👉 I created a demo here: 🔗 CodePen Demo The scripts loaded from each domain are 100% identical (apart from the top-level selector). Before iOS 26 beta, this worked fine. I suspect this is related to ITP or some new cross-origin behavior in Safari, but I’d love to know if anyone else is running into this — or if someone knows a workaround. Thanks!
1
0
122
Jun ’25
iOS 26/MacOS 26 - PWA App Icons: Dark,Clear,Tinted Appearance
Hi everyone, I'm exploring the new app icon appearance options (Clear, Dark, Tinted) for Progressive Web Apps (PWAs) on iOS26, iPadOS26, and macOS26. Currently, PWA icons don't seem to render well with these new appearances, particularly in Clear and Tinted modes, resulting in very very poor visual quality. You can hardly see anything. Has support for these icon appearances been fully implemented for PWAs? If so, could someone point me to the relevant Apple Developer documentation or provide guidance on how to configure PWA icons to support Clear, Dark, and Tinted appearances? I've searched the Apple Developer Forums, Stack Overflow, and Reddit but haven't found clear information on this topic.A possible solution is a png file with transparent areas, but if the pattern is dark, nothing will be visible in dark mode. Any insights or resources would be greatly appreciated. Thanks! (plz don't give up on PWA😭) Reference: https://developer.apple.com/forums/thread/761615 https://stackoverflow.com/questions/78780916/is-there-a-way-to-provide-light-dark-and-tinted-variants-of-apple-touch-icon https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html
0
2
458
Jun ’25
min-height not interpreted preoperly after upgrading iOS 18.4
I have a UI application built with the Vue framework, using Vuetify for the UI components. There's a div with the class v-application--wrap, which is provided by Vuetify. This class internally includes the following style rule. .v-application--wrap { backface-visibility: hidden; display: flex; flex: 1 1 auto; flex-direction: column; max-width: 100%; min-height: 100vh; position: relative; } The pages were rendering correctly up to version 18.3, but after upgrading to version 18.4, we encountered layout issues related to height. Upon investigation, we discovered that the min-height property was no longer being interpreted or applied correctly. Replacing min-height with height resolved the issue, and the pages began loading as expected. Any insights into why this behavior is occurring would be greatly appreciated.
1
0
158
Jun ’25
Unable to send a message from website to Safari web extension
I've been unable to successfully get a webpage to send a message to a Safari web extension, no matter what I try doing. I've added the following to my manifest.json file, and it's running manifest v3 { "externally_connectable": { "matches": [ "*://mywebsite.com/*", "*://localhost:3000/*" ] } } My web page executes the following code snippet. I've tried this both while running my site locally (on localhost) and pushed to production. let safariExtensionId = "co.companyname.productname.Extension (ABCD1234)" browser.runtime.sendMessage(safariExtensionId, { greeting: "hello"}, function(response) { console.log("Received response from background page"); console.log(response.farewell); } ); In the Safari web extension's background.js file, I've added the following onMessageExternal listener: browser.runtime.onMessageExternal.addListener((message, sender, sendResponse) => { console.log("Received message from the sender."); console.log(message.greeting); sendResponse({ farewell: "Goodbye!" }); }); This is directly copied from the instructions in this WWDC video: https://developer.apple.com/documentation/safariservices/messaging-between-a-webpage-and-your-safari-web-extension It's also extremely difficult to debug what's happening since the extensions service working frequently does not appear in the Web Extension Background Content menu Is there something I'm doing wrong, or a bug I'm not aware of?
1
0
147
May ’25
"Too many redirects" on forum
Anyone else seeing this? I'm sometimes getting "too many redirects" errors from Safari when trying to view this forum: It goes away after a while, randomly. Also: this is hard to debug; the Network tab in the Safari Javascript Console only shows the final load of the error page, not the failure. Is there a way to see the actual redirect loop URLs?
3
1
593
Feb ’25
Issue with SFSafariViewController Not Always Detecting Redirect After Stripe Payment
I am using SFSafariViewController to process payments via a Stripe checkout URL. Once the payment is completed, the user is redirected to a success URL. I have also added associated domains for deep linking. Below is my implementation: func presentCheckout(url: String) { showProgressHUD() let checkoutURL = URL(string: url)! safariVC = SFSafariViewController(url: checkoutURL) safariVC.delegate = self self.present(safariVC, animated: true) } // Delegate method implementations func safariViewControllerDidFinish(_ controller: SFSafariViewController) { print("SafariViewController dismissed") // Handle dismissal } func safariViewController(_ controller: SFSafariViewController, initialLoadDidRedirectTo URL: URL) { print(URL.absoluteString) if URL.absoluteString.contains("xsworld/payment/stripe/checkout/success") { controller.dismiss(animated: true) { if URL.absoluteString.contains("/v1/resources/xsworld/payment/stripe/checkout") { NotificationCenter.default.post( name: Notification.Name("StripePaymentStatus"), object: nil, userInfo: ["url": URL] ) } } } else if URL.absoluteString.contains("xsworld/payment/stripe/checkout/cancel") { // Handle failure NotificationCenter.default.post( name: Notification.Name("StripePaymentStatus"), object: nil, userInfo: ["url": URL] ) } } func safariViewController(_ controller: SFSafariViewController, didCompleteInitialLoad didLoadSuccessfully: Bool) { if didLoadSuccessfully { print("Initial page loaded successfully") } else { print("Initial page load failed") } } Issue: The safariViewController(_:initialLoadDidRedirectTo:) method does not always get called after the payment is completed. Sometimes it works as expected, and sometimes it does not trigger at all. What I’ve Tried: Ensuring the associated domains for deep linking are correctly set up. Checking the success and failure URLs. Debugging to see if the redirect happens but is not detected. What I Need Help With: I want to ensure that the redirection always works after the payment process is completed, whether through deep linking or another reliable approach. How can I guarantee that my app correctly detects and handles the redirect every time? Any guidance or best practices would be greatly appreciated.
0
0
469
Feb ’25
Issue with Safari v18.2: Extension Prevents Video Playback When Inspecting
I am a developer working on a Safari extension that handles video playback, and I’ve encountered an issue with Safari version 18.2. When I open the developer tools to inspect the browser, videos fail to play as expected. It worked well on safari version 18.1. Details: Safari Version: 18.2 Operating System: macOS Sequoia v15.2 Additional Information: I’ve tested the extension with various video formats and sites. Clearing the cache and disabling other extensions did not resolve the issue. There are no error messages displayed in the console related to the extension. If I close inspecting, then extension(video playback) works well. I would appreciate any insights or suggestions on how to address this issue, as it impacts the functionality of my extension. Thank you for your help!
2
0
540
Jan ’25