I'm trying to debug a problem with mobile Safari.
I'm using the desktop Web Inspector and a connected iPhone, and it basically doesn't work in any useful way.
DOM elements don't expand. I click on <div id="content">...</div> which contains 50 other DIVs and nothing happens except that the close-div disappears.
No CSS shows in the right-hand panel for any selected element
Images can't be loaded (I just get a spinner)
Are there known problems or incompatibilities? I'm using
Desktop Safari 6.0.5
iOS 7.0.4
I had this problem, too - you'll need to update to Safari 6.1.
Related
I've run many tests for mobile including using Google Chrome and Safari's Responsive Design mode with the iPhone 6 setting, however, a link with an icon is showing up differently on my actual iPhone 6.. does anyone know how I can get the same result on my browser so I can tweak the CSS so the icon doesn't go underneath? Thanks
This is what shows up on the tests in the browsers
This is what shows up on the actual iPhone 6..
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.
I have a responsive web application which is used across Ios/Android/Desktop, The Editor from Primefaces does not seems to work in Chorme/Safari on IOS Mobile devices (Ipad/Iphone), Trying to debug it I found out that it shows the source (the text that is displayed when the 'show source' button is clicked). Editor Screenshot
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!
my service has a problem.
When user get web page through mobile safari that has a lot of html and js codes, and touch input text to type a text, keyboard popup doesn't show up and safari app stops.
Is this performance issue(because of a lot of html and js codes)? or iOS safari bugs?
When I do using Chrome or though desktop, there is no problem.
I had a similar problem on iOS 7 (while everything was okay on iOS 6): in my case, the keyboard took long (about 10 seconds) to show up and Safari was frozen during that time.
I solved the problem by upgrading to newer versions of jquery and jquerymobile, in my case from jquery 1.8.3 to 1.10.2 and from jquerymobile 1.2.0 to 1.3.2
That is to say, this solution might work for you if you use jquery and jquerymobile.