Webview: How to debug on iPhone with DevTools

05, November 2019 clemdesign

You develop with Ionic, PhoneGap, Cordova and you would like to debug on iPhone, like on Android, here is the solution...

The configuration of debugging environment is not easyunderstand on the Apple environment, and sometimes you have to persist to search the Internet.
I give you the main elements to better understand and properly configure your environment.

1. iPhone configuration.

First, you shall activate the Web Inspector of Safari at this location: Settings > Safari > Advanced > Web Inspector

Connect you iPhone to the Mac and trust connection.

In this step, you allow the Safari browser to access the webviews of your iPhone, which will be used to display your application.

2. Debug on Macbook

There are two possibilities to debug a WebApp in a webview from the Mac: using Safari or DevTools of Chrome.

Safari has the advantage of having all the pre-configured exchange tools.

2.1. Debug with Safari

Start your app on iPhone.

Open Safari from your Mac

Check that the menu Development is in the bar. Otherwise, click on Safari > Preferences > Advanced > Show development menu in bar

Click on Development > iPhone de ... > Votre app

Safari's own debugging tool appears and looks like Chrome's DevTool.

2.2. Debug with Chrome

To debug with Chrome, you shall use a proxy developed by Google team: ios-webkit-debug-proxy.

Install the Mac bundle manager if not yet installed: HomeBrew.

Then, install the tool ios-webkit-debug-proxy:

brew install ios-webkit-debug-proxy

When installed, start the app on iPhone then execute the tool with this command:

ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

In Chrome, go to the following URL:

chrome-devtools://devtools/bundled/inspector.html?ws=localhost:{port}/devtools/page/1

{port} corresponding to:

  • 9221: Devices list
  • 9222: Device A
  • 9223: Device B
  • ...
  • 9322: Maximum device allowed

You shall install the last version of libimobiledevice to avoid errors during connection to the app. Refer to this article Troubleshooting part for more informations.

So you have the Chrome-specific debugging tool that you can use for your iPhone App.

3. A Little Further

On iPhone, the webview is managed by the browser owner of Apple, Safari. On Android, it's Google's, Chrome.

On iPhone, it is necessary to use a gateway (between Chrome and Safari) to use the debugger of Chrome.

I wish that this article was useful for you and see you in the next article. xD

Usefull links:

Previous Post Next Post

Add a comment