If you are building a hybrid app you probably use one of the Cordova powered framework like Ionic or Phonegap.
Because hybrid app is nothing more than an Html app making it easy to debug by just running on a web server locally for example using http server . You can access it via a browser. The are many scenarios when you need to run on real device for example
- You have native capabilities like Camera, Push notification
- Embed browser (in app browser)
- Test the end result of your app on device
You might experience bad time spending on debugging issue on device. I can not imagine how hard it is fix Html layout or js error without Dev tool like Html element Inspector and Js console.
If you running on Android device it is a lot better, it is pluggable with Chrome browser. This is not the case for iOS device since you need to plug to Safari browser. Safari offers very limited capabilities comparing to Chrome. There have been lot efforts to solve this problem for example using Cordova Cross Walk.
Connecting Cordova based app to Chrome is possible today. I am gonna explain just this.
Setting up your device and web browser
First of all, connect device to your mac.
Config your device
with iOS device go to Settings ->Safari
and scroll to the very bottom of the screen and find the Advanced
then turn on the Javascript and Web Inspector.
Config your browser to use remote debugging feature
Open Safari browser, On the top menu choose Safari -> Preferences…
and Choose Advanced and then tick on Show Develop menu in menu bar.
Testing your setting
Open your Cordova app and Safari web browser.
If you see Develop menu and your iPhone name appear with sub menu index.html(Cordova app document root ) then the config above was correctly set up.
Click on index.html to open html doc of the app. Try to inspect and debug and then you will realize it is painful and you will miss all the features from Chrome dev tool.
Follow instruction below to set up remote debugging with Chrome dev tool instead.
Remote debug iOS webkit
RemoteDebug iOS WebKit making iOS debuggable with VS Code, Chrome DevTools, Mozilla Debugger.html and other tools compatible with the Chrome Debugging Protocol.
In this case we are just going to use Chrome.
Installation
The installation is very clear and straight forward. Please follow the instruction on the page.
Debugging with Chrome
Connect your device and open Cordova app
In Chrome browser address bar type chrome://inspect
and then register Discover network targets
Open your terminal and run remotedebug_ios_webkit_adapter --port=9000
then refresh the chrome device inspector page you should see the your app listed in the Remote Target as below.
Click the inspect link
You have same abilities as it was running on a web server.
Inspecting Embed browser
An embed browser is just another browser with chrome engine, it will be shown in the device inspector of chrome dev tool.
Trouble shoot
Your Cordova engine might not be shown or incorrectly shown the screen out of synch
Most of the case when you run remotedebug_ios_webkit_adapter — port=9000. Remote debug iOS webkit will listen to device connection and forward to chrome without any problem. But to make sure it always works the device must be connected and launch the app before you run remotedebug_ios_webkit_adapter — port=9000. As remotedebug_ios_webkit_adapter run before the embed browser then It might not forward to Chrome correctly. To solve this restart your remotedebug_ios_webkit_adapter.
- In your terminal that you run remote debug tool, press ctrl +c to stop
- Run remote debug tool again remotedebug_ios_webkit_adapter — port=9000
Summary
With Remote debug iOS webkit inspecting and debugging Cordova app is as easy as it was on Android. You don’t need to embed a new chrome engine to your app like Apache Cross walk making your app debuggable on iOS device and app development easier and more compatible with different platforms.
Hope you enjoy this read. If you have another approach please help share.
