Debug and Edit

For this Tutorial: Uncomment Several Script Lines in index.html

The HelloWorld_BasicHybrid app's index.html file has several commented out <script ...> lines. As part of this tutorial, we will uncomment these lines. With your own app, you may instead need to debug problems found during testing, locally modify the files in the debugger environment, retest, and then edit your sources.

To open index.html for editing, modify it, and reload the app in the EMULATE tab:

1. Click the DEVELOP tab. When you open the html file, the screen initially displays the App Designer GUI (the DESIGN button has a blue background).

2. Click the CODE button to select the code editor view. (Later, if you want to use the App Designer, click the DESIGN tab.)

3. In the left margin, click the file index.htm file to open it in the editor.

4. Around line 31, locate the following lines:

   <!--
      <script type="text/javascript" charset="utf-8" src="camera.js"></script> 
             <script type="text/javascript" charset="utf-8" src="shake.js"></script> 
             <script type="text/javascript" charset="utf-8" src="location.js"></script> 
      -->
   

5. Remove the comment characters so lines 32-34 are active:

   
   
   

6. Save the edits to this index.html file by either clicking the File > Save menu item or press Ctrl+S or Cmd+S.

7. Click the EMULATE tab.

8. If you are using an editor external to the Intel XDK or the code editor in the DEVELOP tab but have not set the auto load setting, click the button to reload your app's source files.

9. In the Devices panel, change the Orientation to Landscape. If needed, use the scroll bars on the virtual device so you can see the buttons.

10. Notice that a new Take Picture button appears, as well as some new text (Shake the device ...), and a geo location map (your screen may differ):

    
    
    

Debugging Inside the Device Emulator

The Intel XDKEMULATE tab is itself a web app that runs inside a node webkit. Your app runs within an inner HTML frame whose size depends on the currently selected device. You can use the built-in debugger to debug your application. This debugger is based on and its use resembles the standard Chrome Developer Tools (DevTools) debugger.

To show the debugger, click the button in the EMULATE toolbar. The debugger appears in a floating window, as shown in the lower part of the screen below (your screen may differ):

To close the debugger, click the red x in the upper-right corner.

This debugger lets you view elements and resources, type commands into a console, and perform other functions. For example, display Elements and right click to select options for that source line from a context menu (as shown). For information about using the debugger, see https://developers.google.com/chrome-developer-tools.

Use the debugger to focus on the emulated app's elements and sources. If you see Console messages from files that are not part of your app's sources, these messages may be from the Intel XDK and can be ignored.

The debugger lets you view your source code. If you modify the source code in the debugger, this will impact the future behavior of the EMULATE tab as you continue testing your app. However, modifying sources in the debugger does not modify your actual source code in the DEVELOP tab.

Editing Your Source Files

The debugger lets you view and modify the source code in the debugger, but changes you make in the debugger will not modify your actual source code. Use the DEVELOP tab to modify your sources:

• After you open or create a project, click the DEVELOP tab. If needed, click the CODE button to display the code editor view.

• In the left sidebar under the project name is a list of source files (file tree). Click the source file to be modified. The selected file appears.

• In the left sidebar, after you modify a file, a Working Files section appears above the project name. To add a file immediately to the Working Files section, double-click its name.

• Modify the file(s) as needed. To save your changes for this file, either click the File > Save menu item or press Ctrl+S or Cmd+S.

• For more information about the built-in editor, see the Using the Editor in the Intel® XDK Develop Tab guide.

To return to the EMULATE tab, click EMULATE. To restart your app so its appearance and behavior in the EMULATE tab is consistent with your saved sources, click the button. If you use an external editor, remember to click the button after you save the file.

The DEVELOP tab also has a APP DESIGNER view for the App Designer component and an APP STARTER view for the App Starter component. Click the DESIGN button to use these GUI views.

For more information about the various Intel XDK tabs, see the main documentation page at http://www.intel.com/software/xdkdocs or click the button on the toolbar.

Retest Your App

After you have fixed any issues using the DEVELOP tab, retest the modified parts of your app using the applicable devices and settings in the EMULATE tab. In this tutorial, return briefly to the topic Test in Emulator.