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

51 Posts
Sort by:

Post

Replies

Boosts

Views

Activity

Simulate Device On Safari
Hey Developers! I love web design and am trying to test out some CSS, I am currently using a MacBook Pro 13" (2020 Version), I only use Safari and I want to know if I'm able to simulate other devices like a Windows 10 PC, an Android phone, an iPhone, or an iPad. I do own an iPhone and iPad but wanted to do it all on my Mac, I've tried searching for Safari extensions to do this but so far I haven't found one. If you could give me some suggestions or a link to what I should use it would be appreciated. Thanks, Mateo
3
0
18k
Sep ’23
Browser.permissions.request not working as expected
Hi there - I am trying to port over Chrome extension over to Safari Web extension. Looks like Safari has a very aggressive permissions flow which isn't a great user experience but I get the privacy benefits. I am trying to move some of my permissions like <all_urls> or tabs as optional permissions and build a flow where I can request the user for them in hopes that i can educate them as to why I need them similar to how Chrome/FF have it. However when i use browser.permissions.request - i always end up getting true without invoking the prompt. The prompt seems to come up regardless when i start visiting a website. Can someone help with this? Sounds more like a defect in Safari.
2
0
1.1k
May ’24
iOS 16.4 ASWebAuthenticationSession's webview can not debug in safari web inspector
I'm using Xcode 14.2 to build an app that runs on iOS 16.4. There is no webView.isInspectable property in this version. When my app presents a webview, it is inspectable in Safari -> develop, which is nice. However, when starting a ASWebAuthenticationSession, Safari -> develop shows "no inspectable applications". It was inspectable on iOS 16.1 but not iOS 16.4. How to solve this?
5
2
1.8k
Sep ’23
Passwordless single sign on using SFSafariViewController in swift
0 I integrate with safriService (SFSafariViewController) to log in through a single sign-on password, the problem was the first time I log in using SFSafariViewController but the authentication follow not complete the first time so the safari browser still appear & can not direct into my app after authentication follow to become a success, another behavior is when I login again the authentication follow work fine & get the token then directed into my app fine so the main problem is the first time I login SFSafariViewController does not catch the user auth if let url = URL(string: "url") { let safariVC = SFSafariViewController(url: url) safariVC.delegate = self safariVC.dismissButtonStyle = .done present(safariVC, animated: true, completion: nil) } extension DouWebViewVC: SFSafariViewControllerDelegate { func safariViewController(_ controller: SFSafariViewController, didCompleteInitialLoad didLoadSuccessfully: Bool) { if didLoadSuccessfully { print("didLoadSuccessfully") // Do something with the URL here } } //initialLoadDidRedirectTo func safariViewController(_ controller: SFSafariViewController, initialLoadDidRedirectTo requestUrl: URL) { let absoluteUrl = requestUrl.absoluteString print("requestUrl(requestUrl)") } func safariViewControllerDidFinish(_ controller: SFSafariViewController) { print("safariViewControllerDidFinish") } }
0
0
618
Aug ’23
SessionNotCreatedError: Could not create a session: Some devices were found, but could not be used:
I am trying to automate Web app on iOS Safari for e2e test. Even though following code worked for emulator in iOS 17 beta, it seems not working on Real Device(iPhone 12, iOS 16.6). code for test describe("test0", () => { const getDriver = async () => { const options = new safari.Options() const capabilities = webdriver.Capabilities.safari() capabilities.setPlatform('ios') capabilities.set('safari:deviceType', 'iphone') capabilities.set('safari:useSimulator', false) const driver = new Builder().forBrowser('safari').withCapabilities(capabilities).setSafariOptions(options).build() return driver } let driver beforeAll(async () => { driver = await getDriver() }, 10000000) afterAll(async () => { await driver.quit(); }); test("test", async () => { await driver.get("https://google.com"); }, 1000000); }); Following error will happen when testing through real device while device is listed on Device and Simulators opened by Xcode > Window > Device and Simulators. SessionNotCreatedError: Could not create a session: Some devices were found, but could not be used: - iPhone (***-xxxxxxx): Remote Automation is turned off (turn it on via Settings > Safari > Advanced > Remote Automation) - [unknown wireless device]: device is not paired at Object.throwDecodedError (../node_modules/selenium-webdriver/lib/error.js:524:15) at parseHttpResponse (../node_modules/selenium-webdriver/lib/http.js:601:13) at Executor.execute (../node_modules/selenium-webdriver/lib/http.js:529:28) What I tried I turned on Safari > Advanced > Web Inspector, Safari > Advanced > Remote Automation, Developper > Enable UI Automation on iOS setting. I enabled safaridriver running safaridriver --enable. Versions XCode: 15.0 beta iOS: 17 beta
0
0
575
Aug ’23
iOS 17.0 Webkit 'display:flex' issue
When rendering 2 'div' components with 'display:flex' placed on top of each other, the preceding one sometimes comes up. The 'position:absolute' has been set and the second 'div' component is being generated after the first one. However, when inspecting the iOS webview in Safari, I enable-disable the 'display:flex' property, everything starts working again. This is possibly a bug in the layout engine. I tried the same process in iOS 16.4 and there are no issues at all.
3
0
1.2k
Sep ’23
Safari Responsive Design Mode Simulators are not showing up.
I have simulators downloaded to my 14" M2 Pro Macbook Pro, and for some reason, I cannot see any simulators as an option in Safari's Responsive Design Mode. Am I missing something obvious, or is my computer bugged? Above is an image of the Responsive Design Mode showing no simulators. I would offer more screenshots to prove that I have simulators installed, but it won't let me upload any more photos for some reason.
22
9
3.8k
4d
Failed to load resource: the network connection was lost when I hit specific URL which is connected to AZURE Front Door
The end user experiences error "Failed to load resource: the network connection was lost" when using safari browser via reverse proxy only(Azure Front door). Using google chrome, or accessing the resource directly, the user does not see the error. After taking a packet capture and HTTP Archive traces, we were able to determine that the safari browser is completely blocking the traffic from being sent over the network.
1
0
1.2k
Sep ’23
Safari Bug
Hello, safari consumes less CPU than Chrome, but it does not consume less RAM. When you access YouTube in Safari, especially when you skip 5 seconds while watching a video, the buttons are very inadequate compared to Chrome. The video and audio lag, the loading sign appears and the audio lag is very annoying. At the same time, when I log into Twitter, some videos do not play but remain loading. While browsing the web in Safari, the mouse sometimes remains stuck. While typing, the mouse becomes a line, but when I hover over something to click, it still remains as a line. There are such bugs. I like to use Safari, it is very useful, but I always prefer to stay in Chrome because of such errors. I try it every time Apple updates Safari, most bugs go away, but new ones come and unfortunately the Youtube problem is very bad. This problem only occurs on YouTube, not on Netflix and similar platforms. Browsing YouTube with Safari is very annoying. I hope you find a solution to these problems soon. Since I deal with CDN and Linux servers, the web is very important to me and I like the safari web tool part, but it is not an immersive view. It gives the impression that I shouldn't have opened it. I hope a new design language will be added to this design. Other than that, using safari is nice and I love how minimalist it is. Thank you, I wish you good work.
1
0
686
Sep ’23
Bring back device views in Responsive Design Mode
In Safari 17.0, the Responsive Design Mode was updated with two major changes. The quick device view icons that were at the top were removed in favor of a simple resizable web view. New integration with Xcode simulator for easily opening a website in a devices native simulator. The new simulator integration is nice. It definitely promotes giving a much better testing of webpages since we get to see the webpage in the native app/environment. I think that this new integration is welcoming. However, removing the device views has been a major step backwards. These views gave us quick access to checking webpage layouts across different devices with the click of a button. As a web developer, I am aware that these views are not a guarantee that the website will be fully functional on the device clicked on. The simulator is better for that. But during the development process, these views were good for quick sanity checks as it was quick and "close enough". Having to launch multiple simulators to test on two different iPhones and two different iPads takes a lot of time. The devices have to boot up each and load the website. This wastes minutes of time vs the fraction of a second it did before, just for a quick check. Another downside of the simulators is that if I am testing a web app that requires a login, I need to log into each app on every simulator. The older responsive design mode just used the exact session that I was logged into Safari with. I submitted this as feedback as well... https://feedbackassistant.apple.com/feedback/13225118
7
22
2.3k
Oct ’23
Safari Web Inspector ultra lag
So previously I had a Mac Pro 2020 Touchbar with i5 16GB RAM and it was a pain to work with Safari due to the lagness of the web inspector. I thought it was related to my hardware. Upgraded recently to an M2 Pro chip 32GB 2023, and still happens the same, i can't believe how bad it is to develop & work with Safari. Even when trying to search on files it lags as if it has a 500ms debounce per key stroke. Adding breakpoints and following code line-by-line, everything is laggy. What is going on? It's literally impossible to work on big projects and having to debug with Safari.
0
0
525
Oct ’23
SFSafariContextMenu is not working
Hello, I try to develop extension for safari. I edited info.plist but I can't see my menu items. My Info.plist page <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> <key>NSExtension</key> <dict> <key>NSExtensionPointIdentifier</key> <string>com.apple.Safari.web-extension</string> <key>NSExtensionPrincipalClass</key> <string>$(PRODUCT_MODULE_NAME).SafariWebExtensionHandler</string> </dict> <key>SFSafariContextMenu</key> <array> <dict> <key>Text</key> <string>Search for selected text in MyApplication.</string> <key>Command</key> <string>Search</string> </dict> <dict> <key>Text</key> <string>Add an entry for selected text in MyApplication.</string> <key>Command</key> <string>Add</string> </dict> </array> <key>SFSafariWebsiteAccess</key> <dict> <key>Level</key> <string>All</string> </dict> </dict> </plist>
1
0
605
Oct ’23
Safari, WKWebView video slow loading issue
my web service has video content. the problem is in chrome browser, downloading and playing video is much faster than Webkit browser (Safari and WkWebView). we are struggling to find the reason why there is huge gap between two browsers. we've checked browser inspector and there's something look like error in safari inspector that doesn't appear in chrome. There are two cases in network section. First red header case that I think something went wrong Second yellow header csae that I think succeeded to donwload
0
0
516
Oct ’23