As of Safari 11, the desktop has a useful devtool that overrides restrictions to allow WebRTC on non-HTTPS sites:
I've been looking for a way to do something similar for the iOS version of Safari. but can't find anything. Any ideas?
You can enable WebRTC on insecure origins by opening the iOS device web inspector window in Mac Safari clicking on the "document icon" to the far right on the top, (to the left of the search bar), near the "crosshair" icon.
Source
Related
I'm trying to debug a web app that is added to home screen. I have enabled web inspector on safari. I am able to debug the app if I open in iOS safari but when I add the app to home screen and try to debug, it shows 'No Inspectable Applications'. Any help would be appreciated.
iOS version: 11.2
MacOS Safari version: 11.0.1
You should put focus on the app first and then press:
Option+Command+i
So you do not open the inspector in advance in this case. This is not possible because you can consider it like opening a new browser tab where it makes no sense to inspect it from the inspector in another tab that is already open. Since the menu to open the inspector is missing when the PWA is opened as a desktop app, you need the keyboard shortcut to show it.
Not sure if it's related, I had an issue where I couldn't get the inspector window to open for a cordova web app on iOS 11.2
I found that I had to go back to (ios) settings and toggle Safari Web Inspector off and on while looking at the (osx safari) developer menu to see it and then inspect it.
The Safari 11 beta 6 Web Inspector has a feature I want: the ability to retain items in the network tab after navigating to the next page. Unfortunately, it also appears to have a bug: it can no longer find "inspectable applications" in the devices area of the Develop menu. Same problem with Safari Technology Preview Release 38.
For Safari windows on the Mac, that's not a problem; I can control-click and Inspect Element and I'm in business. But for troubleshooting pages on a device, I'm hosed -- this was the only way I knew to open up the Web Inspector against an external device.
This isn't a problem of losing the "Web Inspector" setting on my phone (that's still checked), and as you can see in the photo, even the desktop browser itself doesn't show the currently open windows.
Background: I'm using the custom pin share URL as you can see in the example below.
Problem: This share URL works on every single operating system and browser except Safari on iOS. It works in all other browsers on iOS, and it works in Safari on all other operating systems.
Example Link: https://pinterest.com/pin/create/button/?url=http://redefiningmom.com/the-real-reason-i-left-corporate-america/&media=http%3A%2F%2Fredefiningmom.com%2Fwp-content%2Fuploads%2F2016%2F01%2Freal-reason-i-left-corporate-america-pinterest.jpg&description=After+ten+years%2C+I+quit+my+job+in+Corporate+America.+Find+out+the+real+reason+I+left+Corporate+America+and+how+you+can+too.
Desired/Usual Behavior: This link would open a share dialogue leading to the creation of a rich pin with a large image, a description, and a link back to the webpage.
Undesired Behavior: Only on Safari on iOS this opens a share dialogue leading to the creation of a non-rich pin with a large image, a description and a link to the image, not the web page.
How do I fix this?
Using an iPhone 5S with iOS 9.2.1 (the latest), the pages look exactly the same on Chrome and Safari:
Just to clarify before I ask the question, I am not the developer of this app.
My company is building an iOS app and I have the app installed on an iPhone but there are issues that are happening in the WKWebView that aren't happening in Safari or any other browser so I want to be able to debug the HTML and CSS if possible without having to install XCode and run a simulation.
Is this possible? I've searched online and tried to find a solution to this, but couldn't find anything useful so my last clutch at straws will be to post here to find out if anyone has a solution to this.
I have found a way to do this so that it replicates the UI/WK WebView perfectly.
If you can, open the page that you're trying to view through your app in Safari and then click the button at the bottom of Safari that looks like an arrow pointing upwards inside a box. Click the Add to Homepage button and make sure that the site you're trying to debug has the below meta tags in the head:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
These will allow you to view a website in a full screen web app which is what the UI/WK WebKit does. All you now need to do is plug your iOS device into a Mac OSX computer and debug as if you would through Safari.
I hope this helps anyone else out!
You can do this if you use the simulator - the issues you're having should hopefully be specific to the WKWebView itself, rather than the the physical device..
Open Safari on you Mac, then make sure the Develop menu is enabled (Preferences->Advanced-Show Develop menu).
Then run the app in the simulator and navigate to the WKWebView in the app. Once it's on-screen you should be able to switch Safari and under the Develop menu you will see your machine name near the top. Under that there will "inspectable applications". You might see the of the document displayed in the web view, or you might see a menu item with blank text. Click this, then you get to debug your webview/js using the Safari developer tools.
You can even use the inspector to select elements in the simulator and highlight them in the DOM!
Is there any way of testing Apple Smart App Banners in a desktop browser by doing something along the line of spoofing the user agent, or is this functionality so specific to Mobile Safari that I can only test it on an iDevice?
I know that merely spoofing the user agent in a desktop browser doesn't do anything in regards to showing the Smart App Banner, but maybe I can do something else in my desktop Safari browser to test the banner?
I am not an iOS developer but I have access to the iOS emulator on my colleague's Mac if that helps.
Unfortunately, the Smart App Banner is only displayed on iOS Safari on a real device. The iOS Simulator and desktop Safari cannot display smart app banners.
This is a bummer, especially because resetting smart app banners after they have been dismissed is a huge pain.
In chrome dev tools, click the sprocket that lead you to the more advnaced settings, there check the 'override' check-box, and select a mobile user agent(IOS, Android).
Keep in mind that the screen sizes that chrome provide are not always accurate and might need some adjustment.
For more accurate screen sizes you might want to use Mozilla & Firebug(basically has the same functionality)
You can just tap the toggle device toolbar inside chrome inspector and the smart app banners are recognized since this toggle changes to a mobile user agent.
See sample result :