How to Debug iOS Webview with Safari

In my experience working in iOS, I encountered creating a project that is basically just a web view. Most of its functionalities are triggered and handled in the Vue code, which is rendered in that particular web view.

It was a bit hard debugging the problem initially since all the web development syntax was new to me. Later I realized that it was not a problem in my iOS code, but in the way, Webkit web-view was unable to parse some modern javascript syntax,

Here are the problems I encountered with WKWebview, especially in older versions of Webkit.

• ES6 let
• Arrow Functions
• Object values
• URLSearchParams

These are just a few of them.

So enough with the intro, and let's move on to how we can debug the HTML and JS code in WKWebview through Safari.

To do this, make sure you run the Safari browser first, then you open up your app through a simulator or a connected device in the same network as your computer.

Also, take note that you need to enable Develop menu in your Safari preferences

Once your Safari and your app are running with the WKWebview opened, you should be able to see from the Develop menu in Safari the running app with the HTML title in it

Once you select the correct HTML page, you should be able to see a debugging console similar to any browser console, however, it may not be the same as in the Chromium browser, but still, it's enough to get debugging things going

So, there you have it. The next time you're stuck with something not displaying or not working correctly in your local Webview, check if some Javascript code is already supported in mobile Safari, or check on the Safari Develop console. Cheers!