The Chromium debugger can do far more than just report errors and output the results of console.log() statements. You can actually use it to interact with your application in real-time, use it to experiment with invoking javascript api methods, and change the contents of variables on-the-fly. As depicted in figure 15, you can even fire events on application elements and see the result in the emulator!
Figure 14: Variables that are output via console.log appear in the Chromium debugger Console view
If your application invokes methods from the Cordova API, or uses device features that are not natively supported by Javascript, you may find
yourself in a situation when it's most effective to troubleshoot the app when it's actually running on a physical device.
Using a desktop debugger to inspect an app running on a device is a process called remote debugging. Remote debugging is supported by the Intel XDK via the weinre remote debugger.
For remote debugging to work properly, you must: 1. Embed the following code into your HTML files:
<script
src="http://debug-software.intel.com/target/target-script- min.js#{unique identifer}"></script>
Where {unique identifier} is indicated on the Intel XDK New Test
panel.
2. Launch the app on the device via App Preview.
3. Click on the Begin Debugging on Device button in the Intel XDK New
Test panel.
Figure 16: Add the <script> from the Test tab onto all html pages that you need to remotely debug.
As depicted in figure 17, after you click the Begin Debugging on Device
button, the weinre extension for the Chromium browser appears, enabling you to troubleshoot your app as it's runs on your device. The debugger functions nearly identically to the one that you used in the Emulate panel.
In a manner similar to the Chromium debugger, you can inspect the browser's DOM, review network traffic, review runtime errors, and even interact directly with the app through the debugger's Console view.
Figure 17: Invoking the weinre remote debugger.
In this lab, you will perform the following tasks:
Use Javascript's debugger; and console.log() methods to aid you in your debugging efforts.
Use the Chromium debugger to step through your code on an emulated device.
Use the weinre debugger to step through code in your app running on a physical device.
Steps
Open a Project
1. Open Intel XDK New
2. Click on the word PROJECTS in the top-left corner of the GUI. 3. Click the Open a Project button.
4. Select the following file:
/ftIntelXdkNew/walk/walk2_2/walk2_2.xdk
5. Click the open button.
Add JavaScript Debugging Statements
6. Click on the Develop tab.
7. In the project's file browser, click on the index.html file. 8. Click on the CODE button.
9. On line 32, insert the following statement to establish a programmatic breakpoint:
debugger;
10. After the code that you inserted from the prior step, insert a for loop that loops from 0 to 4:
for (var i=0; i<5; i++) { }
11. Inside the for loop, insert a statement that outputs the value of the variable i to the debugging console:
console.log(i);
13. Click on the Emulate tab 14. Click on the Debug button
15. Click on the Debug Me button within the app running in the emulator. The sources panel of the debugger should activate.
16. Click on the [+] button in the Watch Expressions title bar. 17. Enter i as the expression and press [Enter]
18. Click the debugger's Step Over button to advance the program
execution through the for loop. Notice how the value for the variable I changes in the Watch panel.
19. Mouse-over the variable i, located in the console.log() statement. Hovering your mouse over the variable should display its value. 20. Open the Scope Variables panel and review the contents of the
variables that are present.
21. Click the Resume Script Execution button to allow your scripts to run to completion.
22. Click on the debugger's Console tab. You should see the results from executing your console.log() statement.
Use the Remote Debugger
23. In the Intel XDK New, click on the Test tab.
24. Scroll down the page to the On Device Debugging section. 25. Copy the script tag displayed at the bottom of the page to your
clipboard.
26. Click on the Develop tab.
27. Open the index.html file in Code view.
28. Paste the <script> tag just above the </head> tag. 29. From the code editing menu bar, select File > Save.
30. Click the Test tab.
31. Click on the Push Files button.
32. Run Intel App Preview on your mobile device.
33. Tap on the Camera button and scan the QR code from the Test tab. 34. On your mobile device, tap OK to launch the app.
35. In the Intel XDK Test tab, click on the Begin Debugging on Device
40. Click on the End Debugging Button to end your remote debugging session.