Debugging and Testing JavaScript in an HTML5 Application

NetBeans IDE 7.3 introduces a new project type to help you develop HTML5 applications. HTML5 applications typically combine HTML, CSS and JavaScript to create applications that are run in a browser and that are displayed on a variety of devices, including smartphones, tablets and laptops. This document demonstrates how the IDE provides tools that can help you debug and test JavaScript files in the IDE.

When you want to debug the JavaScript files in your HTML5 application it is recommended that you install the NetBeans Connector extension for the Chrome browser. Debugging is enabled automatically when you run the application in the browser and the extension is installed.

The IDE also enables you to easily configure and run unit tests on JavaScript files using the Jasmine testing framework and the JS Test Driver server. You can configure JS Test Driver to run unit tests against a variety of browsers and you can quickly specify the JavaScript libraries, scripts and tests that you want the IDE to load when running the tests. When a test fails you can use the debugger to help you locate the problematic code.

For details on how to install the NetBeans Connector extension for the Chrome browser, see the tutorial Getting Started with HTML5 Applications.

For an overview of the JavaScript editing features in the IDE, see Editing JavaScript in NetBeans IDE..

To watch a screencast of this tutorial, see Video of Testing and Debugging JavaScript in HTML5 Applications.

Contents

Content on this page applies to NetBeans IDE 7.3

To complete this tutorial, you will need the following resources.

Software or Resource Version Required
NetBeans IDE, Java 7.3
Java Development Kit (JDK) 6 or 7
Chrome Browser --
NetBeans Connector Extension for Chrome 1.0.0
JS Test Driver JAR --

Notes:

  • This document uses JS Test Driver server to run the JavaScript unit tests. You might want to familiarize yourself with the properties of the server at the JS Test Driver project home.
  • This document assumes you have some basic knowledge of, or programming experience with HTML, CSS, and JavaScript.

Creating the HTML5 Sample Application

Perform the following steps to create the HTML5 sample application from a site template.

  1. Choose File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) in the main menu to open the New Project wizard.
  2. Expand the Samples node in the New Project wizard and select the HTML5 category.
  3. Select the AngularJS Phone Catalog Tutorial project. Click Next.
    screenshot of Sample project in New File wizard
  4. Specify a location for the project. Click Finish.

    When you click Finish the IDE creates the project and opens the index.html file in the editor. In the Projects window you can see that the project contains index.html and various CSS style sheets and JavaScript files and libraries.

    screenshot of project nodes in Projects window

    The project also includes several JavaScript unit test and configuration files that were generated by default.

  5. Confirm that Chrome with NetBeans Integration is selected in the dropdown list in the toolbar.
    screenshot of dropdown list in toolbar
  6. Click the Run button in the toolbar (F6) or right-click the project node in the Projects window and choose Run.

When you Run the project the front page of the HTML5 application opens in the Chrome browser and you can see a list of mobile phones. When you click the name of a mobile phone the page displays the phone details.

screenshot of application in the browser window

You will notice that there is a yellow bar in the browser tab that notifies you that the NetBeans Connector is debugging the tab. The IDE and the browser are connected and are able to communicate with each other when the yellow bar is visible. When you launch an HTML5 application from the IDE the JavaScript debugger is automatically enabled. When you save changes to a file or make changes to a CSS style sheet you do not need to reload the page because the browser window is automatically updated to display the changes.

If you close the yellow bar or click Cancel you will break the connection between the IDE and the browser. If you break the connection you will need to run the HTML5 application from the IDE again to use JavaScript debugger.

You will also notice that the NetBeans icon is visible in the URL location field of the browser. You can click the icon to open a menu that provides various options for changing the display size of the browser and for enabling the Inspect in NetBeans mode.

Using the JavaScript Debugger

In this exercise you will place a breakpoint in a JavaScript file and run the application. You can use the tooltip in the editor to quickly see the values of variables.

  1. Expand the js node in the Projects window and double-click controllers.js to open the file in the editor.
  2. Place a line breakpoint on line 16 in controllers.js by clicking in the left margin.
    screenshot of breakpoint set in editor

    You can view the breakpoints that are set in the project by choosing Window > Debugging > Breakpoints to open the Breakpoints window.

    screenshot of breakpoints in Breakpoints window
  3. Click the Run button in the toolbar to run the project again.

    When you run the project you will see the same page because the breakpoint that you set was not hit.

  4. In the browser, click one of the entries in the page, for example, Motorola Atrix4G.

    You will see that the page is partially loaded but that the data for the phone is missing because the data has not been passed to the JavaScript and rendered.

    screenshot of details page in browser
  5. In the editor in the IDE you can see that the breakpoint was hit and that the Program Counter is currently in line 16 of controllers.js.
  6. Hover your cursor over the phone variable to view a tooltip with information about the variable.
    screenshot of variables tooltip in editor

    In the tooltip you can see the following information: phone = (Resource) Resource.

  7. Click the tooltip to expand the tooltip and view a list of the variables and values.
    screenshot of expanded variables tooltip in editor

    For example, when you expand the android node you can see the values of the strings os and ui.

    You can also choose Window > Debugging > Variables to view the list in the Variables window.

  8. Use the step buttons in the toolbar to step through the JavaScript functions in the angular.js library or click the Continue button (F5) to resume the application.

Running JS Unit Tests

The IDE enables you to easily configure the JS Test Driver server to run your unit tests. In this tutorial you will use the JavaScript unit tests that are included with the sample project and use the Jasmine testing framework.

The JS Test Driver is a server that provides a URL that is the target for running JavaScript unit tests. When you run your tests the server starts and waits to run the tests. You will see a green status message in the browser window that confirms that the server is running and waiting. The IDE provides a configuration dialog for JS Test Driver that you can open from the JS Test Driver node in the Services. The configuration dialog enables you to easily specify the location of of the JS Test Driver server JAR and the browsers that you want to run tests against. The JS Test Driver node enables you to quickly see if the server is running and to start and stop the server.

For more details on configuring the JS Test Driver server, see the Getting Started with JsTestDriver documentation.

  1. Download the JS Test Driver JAR and save the JAR to your local system.
  2. In the Services window, right-click the JS Test Driver node and choose Configure.
    screenshot of Configure jsTest Driver node in Services window
  3. In the Configure dialog box, click Browse and locate the JS Test Driver JAR that you downloaded.
  4. Select the Chrome with NetBeans JS Debugger option. Click OK.
    screenshot of Configure jsTest Driver dialog box

    Note. You only need to specify the location of the JS Test Driver JAR the first time that you configure the JS Test Driver.

    The list of browsers that can be captured and used for testing is based on the browsers that are installed on your system. You can select multiple browsers as slave browsers, but to run the tests a window that can be a slave for the server must be open for each browser. The selected browsers will be captured automatically when you start the server from the IDE.

  5. Right-click the project node in the Projects window and choose New > Other.
  6. Select the jsTestDriver Configuration File in the Unit Tests category. Click Next.
  7. Confirm that jsTestDriver is the File Name.
  8. In the Created File field, confirm that the location for the file is the config folder of the project (AngularJSPhoneCat/config/jsTestDriver.conf).

    Note. The jsTestDriver.conf configuration file must be in the config folder of the project. If the location for the created file is not the config folder, click Browse and select AngularJSPhoneCat - Configuration Files folder in the dialog box.

  9. Confirm that the checkbox for downloading the Jasmine libraries is selected. Click Finish.
    screenshot of New jsTestDriver Configuration File wizard

    Note.You need to download the Jasmine libraries to run jsTestDriver. If you are notified that the IDE is unable to download the Jasmine libraries, check the proxy settings of the IDE in the Options window.

    When you click Finish the IDE generates a skeleton jsTestDriver.conf configuration file and opens the file in the editor. In the Projects window you can see that the configuration file is created under the Configuration Files node. If you expand the lib folder under the Unit Tests node you can see that the Jasmine libraries were added to the project.

    screenshot of Unit Tests folder in the Projects window

    In the editor you can see the following contents of the configuration file that are generated by default:

    server: http://localhost:42442
    
    load:
      - test/lib/jasmine/jasmine.js
      - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
      - test/unit/*.js
    
    exclude:
    

    The configuration file specifies the default location of the local server that is used to run the tests. The file also lists the files that must be loaded. By default the list includes the Jasmine libraries and any JavaScript files that are in the unit folder. Tests are usually located in the unit folder but you can modify the list to specify the locations of other files that need to be loaded to run the tests.

    The unit folder of the AngularJS Phone Catalog Tutorial project contains four JavaScript files with unit tests.

    screenshot of Unit Tests folder in the Files window

    To run the unit tests you also need to add the location of the JavaScript files that you want to test and the Angular JavaScript libraries to the list of files that are loaded.

  10. Add the following locations (in bold) to the load section of the configuration file. Save your changes.
    load:
      - test/lib/jasmine/jasmine.js
      - test/lib/jasmine-jstd-adapter/JasmineAdapter.js
      - test/unit/*.js
      - app/lib/angular/angular.js
      - app/lib/angular/angular-*.js
      - app/js/*.js  
      - test/lib/angular/angular-mocks.js
  11. Disable any breakpoints that you set in the project.

    You can disable the breakpoints by deselecting the checkbox for the breakpoints in the Breakpoints window.

  12. Right-click the project node in the Projects window and choose Test.

    When you click Test the IDE automatically opens the JS Test runner in the Chrome browser and two tabs in the Output window.

    screenshot of jsTestDriver running in the browser window

    The Chrome browser window displays a message when the jsTestDriver server is running. You can see that the server is running on localhost:42442. In the js-test-driver Server tab in the Output window you can see the status of the server.

    screenshot of js-test-driver Server tab in the Output window

    Note. The browser window must be open and the jsTestDriver server must be running to run the unit tests. You can start the server and open the window by right-clicking the JS Test Driver node in the Services window and choosing Start.

    In the Running JS unit tests tab in the Output you can see the output from the four tests that were run. The tests are located in the controllerSpec.js and the filtersSpec.js files. (The servicesSpec.js and directivesSpec.js files in the unit folder do not have any tests.)

    screenshot of Running JS unit tests tab in Output window
  13. Choose Window > Output > Test Results in the main menu to open the Test Results window.

    In the window you can see the message that all tests passed.

    screenshot of Test Results window

    You can click the green check icon in the left margin of the window to view the the expanded list of the tests that passed.

Debugging a JS Unit Test

This exercise demonstrates how you can use the IDE to debug your JavaScript files when a unit test fails.

  1. Expand the js folder in the Projects window and double-click controllers.js to open the file in the editor.
  2. Modify line 7 in the file to make the following changes (in bold). Save your changes.
    function PhoneListCtrl($scope, Phone) {
      $scope.phones = Phone.query();
      $scope.orderProp = 'name';
    }

    When you save your changes the page automatically reloads in the browser. You can see that the order of the phones in the list changed.

  3. Confirm that the JS Test Driver server is running and that the status message is visible in the Chrome browser window.
  4. Right-click the project node in the Projects window and choose Test.
    screenshot of failed test in Test Results window

    When you run the test you can see that one of the tests failed with the message that the value "name" was encountered instead of the expected value "age".

  5. Open the Running JS unit tests tab in the Output window.
    screenshot of failed test in Running JS unit tests tab in Output window

    You can see in the message that the orderProp is expected to be age on line 41.

  6. Click the link in the Running JS unit tests tab to navigate to the line in the test that failed. The test file controllersSpec.js opens in the editor at line 41 (in bold)
    it('should set the default value of orderProp model', function() {
          expect(scope.orderProp).toBe('age');
        });

    You can see that the test expected "age" as the value of scopeOrder.prop.

  7. Set a breakpoint at the line where the test failed (line 41).
  8. Right-click the project node in the Projects window and choose Test.

    When you run the test again the program counter hits the breakpoint. If you hover your cursor over scopeOrder.prop you can see in the tooltip that the value of the variable is "name" when the breakpoint is hit.

    screenshot of IDE showing editor, Evaluate Code window and Variables window

    Alternatively, you can choose Debug > Evaluate Expression in the main menu to open the Evaluate Code window. If you type the expression scopeOrder.prop in the window and click the Evaluate Code Fragment button (Evaluate Expression button)(Ctrl-Enter) the debugger displays the value of the expression in the Variables window.

  9. Click Continue in the toolbar to finish running the test.

Summary

In this tutorial you learned how the IDE provides tools that can help you debug and run unit tests on JavaScript files. Debugging is automatically enabled for HTML5 applications when you run the application in the Chrome browser and the NetBeans Connector extension is enabled. The IDE also enables you to easily configure and run unit tests on JavaScript files using the Jasmine testing framework and the JS Test Driver server.



See Also

For more information about support for HTML5 applications in the IDE on netbeans.org, see the following resources:

For more information about running unit tests using JS Test Driver, refer to the following documentation:

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo