Repository: cordova-docs Updated Branches: refs/heads/master ac6eb41a1 -> e7b8d159d
CB-7565 - Add debugging guide for iOS with Xcode and Safari Web Inspector Signed-off-by: Shazron Abdullah <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/cordova-docs/repo Commit: http://git-wip-us.apache.org/repos/asf/cordova-docs/commit/e7b8d159 Tree: http://git-wip-us.apache.org/repos/asf/cordova-docs/tree/e7b8d159 Diff: http://git-wip-us.apache.org/repos/asf/cordova-docs/diff/e7b8d159 Branch: refs/heads/master Commit: e7b8d159d2eee5e945d4210253426da90c736373 Parents: ac6eb41 Author: Edna Morales <[email protected]> Authored: Tue Sep 16 15:55:12 2014 -0400 Committer: Shazron Abdullah <[email protected]> Committed: Tue Sep 16 13:21:44 2014 -0700 ---------------------------------------------------------------------- docs/en/edge/guide/next/index.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cordova-docs/blob/e7b8d159/docs/en/edge/guide/next/index.md ---------------------------------------------------------------------- diff --git a/docs/en/edge/guide/next/index.md b/docs/en/edge/guide/next/index.md index ba6564e..8f369e0 100644 --- a/docs/en/edge/guide/next/index.md +++ b/docs/en/edge/guide/next/index.md @@ -114,8 +114,13 @@ Tip: It is possible on Android Nexus devices to easily flash different versions Debugging Cordova requires some setup. Unlike a desktop application, you can't simply open dev tools on your mobile device and start debugging, luckily there are some great alternatives. -## Safari Remote Debugging -The first option is Safari Remote Debugging. This works only on OSX and only with iOS 6 (and higher). It uses Safari to connect to your device (or the simulator) and will connect the browser's dev tools to the Cordova application. You get what you expect from dev tools - DOM inspection/manipulation, a JavaScript debugger, network inspection, the console, and more. For more details, see this excellent blog post: [http://moduscreate.com/enable-remote-web-inspector-in-ios-6/](http://moduscreate.com/enable-remote-web-inspector-in-ios-6/) +##iOS Debugging + +###Xcode +With Xcode you can debug the iOS native side of your Cordova application. Make sure the Debug Area is showing (View -> Debug Area). Once your app is running on the device (or simulator), you can view log output in the debug area. This is where any errors or warnings will print. You can also set breakpoints within the source files. This will allow you to step through the code one line at a time and view the state of the variables at that time. The state of the variables is shown in the debug area when a breakpoint is hit. Once your app is up and running on the device, you can bring up Safari's web inspector (as described below) to debug the webview and js side of your application. For more details and help, see the Xcode guide: [Xcode Debugging Guide](https://developer.apple.com/library/mac/documentation/ToolsLanguages/Conceptual/Xcode_Overview/DebugYourApp/DebugYourApp.html#//apple_ref/doc/uid/TP40010215-CH18-SW1) + +###Safari Remote Debugging with Web Inspector +With Safari's web inspector you can debug the webview and js code in your Cordova application. This works only on OSX and only with iOS 6 (and higher). It uses Safari to connect to your device (or the simulator) and will connect the browser's dev tools to the Cordova application. You get what you expect from dev tools - DOM inspection/manipulation, a JavaScript debugger, network inspection, the console, and more. Like Xcode, with Safari's web inspector you can set breakpoints in the JavaScript code and view the state of the variables at that time. You can view any errors, warnings or messages that are printed to the console. You can also run JavaScript commands directly from the console as your app is running. For more details on how to set it up and what you can do, see this excellent blog post: [http://moduscreate.com/enable-remote-web-inspector-in-ios-6/](http://moduscreate.com/enable-remote-web-inspector-in-ios-6/) and this guide: [Safari Web Inspector Guide](https://developer.a pple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Introduction/Introduction.html) ## Chrome Remote Debugging Virtually the same as the Safari version, this works with Android only but can be used from any desktop operating system. It requires a minimum of Android 4.4 (KitKat), minimum API level of 19, and Chrome 30+ (on the desktop). Once connected, you get the same Chrome Dev Tools experience for your mobile applications as you do with your desktop applications. Even better, the Chrome Dev Tools have a mirror option that shows your app running on the mobile device. This is more than just a view - you can scroll and click from dev tools and it updates on the mobile device. More details on Chrome Remote Debugging may be found here: [https://developers.google.com/chrome/mobile/docs/debugging](https://developers.google.com/chrome/mobile/docs/debugging)
