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.
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!
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.