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!
