Debugging Hotwire Native - WebView Debugging

Continuing on our journey to learn about debugging Hotwire Native applications, we are going to touch on specific techniques. Previous articles covered broad strokes, and today we are digging into WebView Debugging. Remember, Hotwire Native works by wrapping a webview in a native app.

iOS WebView Debugging

We’ll start with iOS because there are more steps, and you are more than likely going to make an iOS app first.

To attach a web inspector to an iOS app, we first need to start our app on the simulator. From there, we must open up Safari.

1. Ensure that you enable Develop mode on the Safari App under preferences.

2. Click “CMD + ,” or navigate to Preferences > Show features for web developers.

3. Now you should be able to open up the web inspector by navigating to Safari > Develop > Simulator.

If you are using an older version of Hotwire Native, you may need to make sure that the webView is inspectable. You can do that in the Hotwire Config object under the AppDelegate.

Hotwire.config.makeCustomWebView = { config in
  let webView = WKWebView(frame: .zero, configuration: config)
  webView.allowsLinkPreview = false
  webView.isInspectable = true
  return webView
}

Android WebView Debugging

Opening up the Android web inspector is much easier. When your Hotwire Native Android app is running, visit this site on a Chromium-based browser.

Benefits of the WebView Debugger

Being able to access the Web Inspector opens us to far more creative uses, such as testing CSS styles that are only applied natively, debugging Bridge components and debugging code itself. We also have the chance to set breakpoints and do all the wonderful things that many web developers already know how to do.

We have moved the ball from the native realm into our court, and that’s just the way I like it.