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!
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.
I'm trying to make an image go to full screen when clicked on for mobile using screenfull.js. However when I run the iOS simulator the line if (screenfull.enabled) is not passing.
Does anyone know how I can make this work for safari mobile? I'm trying to use it to make a pinch and zoom feature for images on my website.
I learned, iOS Safari does not support the native Fullscreen API http://caniuse.com/#search=fullscreen (which is what screefull.js uses underneath to implement it's API). You can try
<meta name="apple-mobile-web-app-capable" content="YES">
But only work with "Add to home screen"
I don't have an iphone, but I want to see what the HTML looks like to my users using an iphone.
Is there a way to emulate an iphone, so that flash does not appear ? For example if I visit YouTube, I don't want to see the Flash player in an emulator.
Thanks
Download Xcode for free if you have a mac and you can use the iphone simulator bundled with it. See this link on How to run iPhone emulator without opening Xcode
try safari browser. select Develop, User Agent, iPhone (or iPad or iPod Touch) from that menu.
if the Developp menu is not found then, Show Develop menu in menu bar in the Advanced Preferences
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 :
I have changed the sass file in sencha and compiled it
Cleared iPhone simulator, cleaned the project
Nothing helps, in the browser I can see that the new styles were applied, however in the iPhone simulator and iPhone itself they haven't
So basically this is the smallest changed I wanted to try:
from: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:fff;}
to: .x-desktop .x-title .x-innerhtml{padding: 0;padding:0;color:#52A5D6;}
So my question is:
Why could cause this issue? Solved: if you look at the first class it belongs to x-desktop...
How to debug the sass if the styles have been transferred to the devise and applied?
Thanks
You can use Safari's Web Inspector to inspect your application while running in the simulator, or while running on a connected iOS device. To do this, first open up Safari and go to Preferences -> Advanced, and check the "Show Develop menu in menu bar" checkbox.
After this, launch your application in either the simulator or a connected device, then bring Safari to focus. Click on the "Develop" menu, and then either "iPhone Simulator" or the name of your device. You will see the page listed in the next menu.
From here, after navigating to the page, you can use the Web Inspector to inspect the page like you would if it were in the webpage.