By using the
WKWebView apps can load and display either remote webpages or local HTML stored in the app bundle. In both cases the web content is often developed by the same team and there is a need to be able to debug it while running in the
WKWebView. Unfortunately there is no console like browsers provide for developers. The console output is missing.
Based on this example this blog post provides a guide on how to add polyfills to
WKWebView with native code interaction. As a result you will be able to catch the console output of a webpage loaded in a
WKWebView and print it to the Xcode debug console.
First things first
For simplicity our
WKWebView in this example will load a webpage from the app bundle. You could also host it on your server and let the
WKWebView load it from there.
Create a new project in Xcode using the Single View App template and add the following simple test page as consoleTest.html file to the bundle.
Setup the WKWebView
Open the ViewController.swift file. In viewDidLoad add a
WKWebView to the view and load the html resource which we created above.
Build the bridge
We will now setup a bridge between the
WKWebView and the
ViewController for handling the console functions.
Create a new file and name it domConsole.js. Add the following code to the file. It provides polyfills for the log and the error functions.
To inject these polyfills into the webpage we make use of the
WKUserContentController. We also need to setup the
ViewController as handler for the two polyfills.
A compiler error will now show up because the
ViewController does not conform to the
WKScriptMessageHandler protocol. This happens because we added the
ViewController as a script message handler to the
WKUserContentController. We will fix this by adding an extension for the
ViewController and provide native handling for the polyfills.
Make it work
When running the app in the simulator you will notice that it still doesn’t work. There is one piece missing.
At the place where we setup the
WKWebViewConfiguration we need to associate the user content controller with the web view.
Start the simulator again and use the buttons on the webpage to produce console messages. Observe the Xcode debug console. Ta-da! The console messages from the webpage show up there.
Being able to get the console output helped me a lot to debug webpages while having them running in a