Apache Cordova and Remote Debugging on iOS
This tutorial will show you how to remotely debug your cordova app on iOS using the Safari Remote Debug Tool.
Some time ago, I wrote an article explaining how to remotely debug your Cordova App running on Android with Chrome Webview Debugging Tool. Actually, you can do exactly the same thing for iOS and Safari.
Like the Chrome Webview Debugging Tool, the Safari Remote Debugging Tool will allow you to make live changes to your DOM and debug your Javascript code step by step.
Enable Debugging
First, you need to enable Safari Develop menu in Safari desktop. Go to Safari > Preferences and ensure the Show Develop menu in menu bar check box is checked.
Now, you need to enable Web Inspector in the advanced Safari Settings of your iOS Device. Go to Settings > Safari > Advanced and enable Web Inspector.
Note: You don't have to do this step with the iOS simulator, as the Debug Option is already enabled.
Inspect with Safari
Now we're finally able to remotely debug our cordova webview with Safari. First, launch your app on your iOS device connected to the computer via USB.
In Safari desktop, Go to Develop > Your iPad/iPhone > Index.html.
That's it! Now you should be able to debug your app like any other website!
Debug JavaScript Step by Step
Exactly like you would do on any website, you can remotely debug step by step your JavaScript code in the Safari Web Inspector.
And exactly like Chrome Dev Tool, if you use Typescript or CoffeeScript, you can actually debug your app directly inside your Typescript or CoffeeScript files thanks to the JS source maps, as shown in the screen below.
