Please kindly improve the Safari browser side bar implementation further along with what The Browser Company has done with their Arc browser. Arc is about to retire soon too and they're willing to sell their SwiftUI code perhaps too for a decent pile of dollars, not the Jony Ive piles at least it should not.
The toggle for side bar is nice and works perfect though!
Safari Developer Tools
RSS for tagInspect, edit, debug, and check the performance of your web content using Safari developer tools.
Posts under Safari Developer Tools tag
20 Posts
Selecting any option will automatically load the page
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?
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?
Help get access please
Topic:
Developer Tools & Services
SubTopic:
Apple Developer Program
Tags:
Automator
Safari Developer Tools
DeviceCheck
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)
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.
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!
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?
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.
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.
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!
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
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.
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?
I am using Angular version 14
Topic:
Community
SubTopic:
Apple Developers
Tags:
Safari Developer Tools
Safari Services
Safari and Web
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?
Topic:
Developer Tools & Services
SubTopic:
Developer Forums
Tags:
Forums Feedback
Safari Developer Tools
hi, I'm having an issue with Safari devlop menu "Web Extension Background Content" menu item being grayed out. I cant do any debugging right now and its becoming mission critical for us. Any help is appreciated.
Thank you,
Topic:
Safari & Web
SubTopic:
General
Tags:
Extensions
Web Inspector
Safari Developer Tools
Safari Extensions
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.
Topic:
Safari & Web
SubTopic:
General
Tags:
Safari Developer Tools
Safari Services
Safari
Safari Extensions
Hi there,
I have a problem that , after I add website at dock but unable to turn on the website from dock & pop up message also mention that app was damaged. This problem appears after I factory reset my iMac. Please kindly advise. Thank guys.
Topic:
Safari & Web
SubTopic:
General
Tags:
Safari Developer Tools
Safari Services
Safari
Safari and Web
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!