| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <head> |
| <link rel="stylesheet" type="text/css" href="../../../netbeans.css"> |
| <title>Debugging and Testing JavaScript in HTML5 Applications - NetBeans Tutorial</title> |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| <meta name="description" content="A tutorial demonstrating support for debugging JavaScript and testing using JS Test Driver in the NetBeans IDE"> |
| <meta name="keywords" content="NetBeans, IDE, integrated development environment, JavaScript, debugging, testing, HTML5, JS Test Driver"> |
| </head> |
| <body> |
| |
| <!-- |
| Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved. |
| --> |
| |
| <h1>Debugging and Testing JavaScript in an HTML5 Application</h1> |
| |
| <p>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.</p> |
| |
| <p>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.</p> |
| <p>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. |
| </p> |
| |
| <p class="tips">For details on how to install the NetBeans Connector extension for the Chrome browser, |
| see the tutorial <a href="html5-gettingstarted.html">Getting Started with HTML5 Applications</a>.</p> |
| |
| <p class="tips">For an overview of the JavaScript editing features in the IDE, see <a href="../ide/javascript-editor.html">Editing JavaScript in NetBeans IDE.</a>.</p> |
| <p class="tips">To watch a screencast of this tutorial, see <a href="../../docs/web/html5-javascript-screencast.html">Video of Testing and Debugging JavaScript in HTML5 Applications</a>.</p> |
| |
| <h3>Contents</h3> |
| <img src="../../../images_www/articles/73/netbeans-stamp.png" class="stamp" alt="Content on this page applies to NetBeans IDE 7.3" title="Content on this page applies to the NetBeans IDE 7.3" > |
| |
| <ul class="toc"> |
| <li><a href="#createproject">Creating the NetBeans HTML5 Application</a></li> |
| <li><a href="#debugger">Using the JavaScript Debugger</a></li> |
| <li><a href="#unittest">Running JS Unit Tests</a></li> |
| <li><a href="#debugtest">Debugging a JS Unit Test</a></li> |
| <li><a href="#summary">Summary</a></li> |
| <li><a href="#seealso">See Also</a></li> |
| </ul> |
| |
| <h4>To complete this tutorial, you will need the following resources.</h4> |
| |
| <table id="requiredSoftware"> |
| |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software or Resource</th> |
| <th class="tblheader" scope="col">Version Required</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, Java</a></td> |
| <td class="tbltd1">7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6 or 7</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://www.google.com/chrome">Chrome Browser</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">NetBeans Connector Extension for Chrome</a></td> |
| <td class="tbltd1">1.0.0</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://code.google.com/p/js-test-driver/">JS Test Driver JAR</a></td> |
| <td class="tbltd1">--</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <p><strong class="notes">Notes:</strong></p> |
| |
| <ul> |
| <li>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 |
| <a href="http://code.google.com/p/js-test-driver/">JS Test Driver project home</a>.</li> |
| |
| <li>This document assumes you have some basic knowledge of, or programming experience with |
| HTML, CSS, and JavaScript.</li> |
| </ul> |
| |
| |
| <!-- ++++++++++++++++ Creating the Application ++++++++++++++++ --> |
| <a name="createproject"></a> |
| <h2>Creating the HTML5 Sample Application</h2> |
| <p>Perform the following steps to create the HTML5 sample application from a site template.</p> |
| <ol> |
| <li>Choose File > New Project (Ctrl-Shift-N; ⌘-Shift-N on Mac) in the main menu to open the New Project wizard.</li> |
| <li>Expand the <strong>Samples</strong> node in the New Project wizard and |
| select the <strong>HTML5</strong> category.</li> |
| <li>Select the <strong>AngularJS Phone Catalog Tutorial</strong> project. Click Next.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-newproject.png" |
| class="margin-around b-all" alt="screenshot of Sample project in New File wizard" |
| title="AngularJS Phone Catalog Tutorial sample project in New File wizard"> |
| |
| </li> |
| <li>Specify a location for the project. Click Finish. |
| |
| <p>When you click Finish the IDE creates the project and opens the <tt>index.html</tt> file in the editor. |
| In the Projects window you can see that the project contains <tt>index.html</tt> and various CSS style sheets |
| and JavaScript files and libraries. </p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-projectswindow.png" |
| class="margin-around b-all" alt="screenshot of project nodes in Projects window" |
| title="AngularJS Phone Catalog Tutorial project nodes in Projects window"> |
| |
| <p>The project also includes several JavaScript unit test and configuration files |
| that were generated by default. </p></li> |
| <li>Confirm that Chrome with NetBeans Integration is selected in the dropdown list in the toolbar.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-selectbrowser.png" |
| class="margin-around b-all" alt="screenshot of dropdown list in toolbar" |
| title="Browser selected in dropdown list in toolbar"></li> |
| <li>Click the Run button in the toolbar (F6) or right-click the project node in the |
| Projects window and choose Run. </li> |
| </ol> |
| <p>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.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-runproject1.png" |
| class="margin-around b-all" alt="screenshot of application in the browser window" |
| title="AngularJS Phone Catalog Tutorial application in the browser window"> |
| |
| <p>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.</p> |
| |
| <p class="alert">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.</p> |
| |
| <p>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.</p> |
| |
| <!-- ++++++++++++++++ Using the JavaScript Debugger ++++++++++++++++ --> |
| |
| <a name="debugger"></a> |
| <h2>Using the JavaScript Debugger</h2> |
| <p>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.</p> |
| <ol> |
| <li>Expand the <tt>js</tt> node in the Projects window and double-click <tt>controllers.js</tt> |
| to open the file in the editor.</li> |
| <li>Place a line breakpoint on line 16 in <tt>controllers.js</tt> by clicking in the left margin. <br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint1.png" |
| class="margin-around b-all" alt="screenshot of breakpoint set in editor" |
| title="Breakpoint set in editor"> |
| <p>You can view the breakpoints that are set in the project by choosing Window > Debugging > Breakpoints to open the Breakpoints window.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-breakpoint2.png" |
| class="margin-around b-all" alt="screenshot of breakpoints in Breakpoints window" |
| title="List of breakpoints in Breakpoints window"> |
| |
| </li> |
| |
| <li>Click the Run button in the toolbar to run the project again. |
| <p>When you run the project you will see the same page because the breakpoint that you set was not hit.</p></li> |
| |
| <li>In the browser, click one of the entries in the page, for example, Motorola Atrix4G. |
| |
| <p>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.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-break-details.png" |
| class="margin-around b-all" alt="screenshot of details page in browser" |
| title="Details page of the application is partially loaded in the browser"> |
| </li> |
| |
| <li>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 <tt>controllers.js</tt>.</li> |
| <li>Hover your cursor over the <tt>phone</tt> variable to view a tooltip with information |
| about the variable.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-variables1.png" |
| class="margin-around b-all" alt="screenshot of variables tooltip in editor" |
| title="Variables tooltip in editor"> |
| |
| <p>In the tooltip you can see the following information: <tt>phone = (Resource) Resource</tt>.</p> |
| </li> |
| <li>Click the tooltip to expand the tooltip and view a list of the variables and values.<br> |
| |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-variables.png" |
| class="margin-around b-all" alt="screenshot of expanded variables tooltip in editor" |
| title="Expanded variables tooltip in editor"> |
| <p>For example, when you expand the <tt>android</tt> node you can see the values of the strings |
| <tt>os</tt> and <tt>ui</tt>.</p> |
| <p class="tips">You can also choose Window > Debugging > Variables to |
| view the list in the Variables window.</p></li> |
| |
| <li>Use the step buttons in the toolbar to step through the JavaScript functions in the <tt>angular.js</tt> library |
| or click the Continue button (F5) to resume the application. </li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Running JS Unit Tests ++++++++++++++++ --> |
| <a name="unittest"></a> |
| <h2>Running JS Unit Tests</h2> |
| <p>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. |
| </p> |
| |
| <p>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.</p> |
| |
| <p>For more details on configuring the JS Test Driver server, |
| see the <a href="http://code.google.com/p/js-test-driver/wiki/GettingStarted">Getting Started with JsTestDriver</a> documentation.</p> |
| |
| <ol> |
| <li>Download the |
| <a href="http://code.google.com/p/js-test-driver/">JS Test Driver JAR</a> |
| and save the JAR to your local system.</li> |
| <li>In the Services window, right-click the JS Test Driver node and choose Configure. <br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-serviceswindow.png" |
| class="margin-around b-all" alt="screenshot of Configure jsTest Driver node in Services window" |
| title="Configure jsTest Driver node in Services window"></li> |
| <li>In the Configure dialog box, click Browse and locate the JS Test Driver JAR that you downloaded.</li> |
| <li>Select the Chrome with NetBeans JS Debugger option. Click OK.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configure.png" |
| class="margin-around b-all" alt="screenshot of Configure jsTest Driver dialog box" |
| title="Configure jsTest Driver dialog box"> |
| <p class="notes"><strong>Note.</strong> You only need to specify the location of the JS Test Driver JAR |
| the first time that you configure the JS Test Driver.</p> |
| |
| <p>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.</p> |
| </li> |
| <li>Right-click the project node in the Projects window and choose New > Other.</li> |
| <li>Select the <strong>jsTestDriver Configuration File</strong> in the Unit Tests category. Click Next.</li> |
| <li>Confirm that <strong>jsTestDriver</strong> is the File Name.</li> |
| <li>In the Created File field, confirm that the location for the file is |
| the <tt>config</tt> folder of the project (<tt>AngularJSPhoneCat/config/jsTestDriver.conf</tt>). |
| <p class="notes"><strong>Note.</strong> |
| The <tt>jsTestDriver.conf</tt> configuration file must be in the <tt>config</tt> folder of the project. |
| If the location for the created file is not the <tt>config</tt> folder, |
| click Browse and select <tt>AngularJSPhoneCat - Configuration Files</tt> folder in the dialog box.</p> |
| </li> |
| <li>Confirm that the checkbox for downloading the Jasmine libraries is selected. Click Finish.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-configfile.png" |
| class="margin-around b-all" alt="screenshot of New jsTestDriver Configuration File wizard" |
| title="New jsTestDriver Configuration File wizard"> |
| |
| <p class="notes"><strong>Note.</strong>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.</p> |
| |
| <p>When you click Finish the IDE generates a skeleton <tt>jsTestDriver.conf</tt> 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 <tt>lib</tt> |
| folder under the Unit Tests node you can see that the Jasmine libraries were added to the project.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-projectswindow.png" |
| class="margin-around b-all" alt="screenshot of Unit Tests folder in the Projects window" |
| title="Unit Tests folder in the Projects window"> |
| <p>In the editor you can see the following contents of the configuration file |
| that are generated by default:</p> |
| <pre class="examplecode">server: http://localhost:42442 |
| |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| |
| exclude: |
| </pre> |
| <p>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 <tt>unit</tt> folder. |
| Tests are usually located in the <tt>unit</tt> folder but you can modify the list to |
| specify the locations of other files that need to be loaded to run the tests.</p> |
| <p>The <tt>unit</tt> folder of the AngularJS Phone Catalog Tutorial project contains |
| four JavaScript files with unit tests.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-fileswindow.png" |
| class="margin-around b-all" alt="screenshot of Unit Tests folder in the Files window" |
| title="Unit Tests folder in the Files window"> |
| <p>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.</p> |
| </li> |
| <li>Add the following locations (in <strong>bold</strong>) to the <tt>load</tt> |
| section of the configuration file. Save your changes. |
| |
| <pre class="examplecode"> |
| load: |
| - test/lib/jasmine/jasmine.js |
| - test/lib/jasmine-jstd-adapter/JasmineAdapter.js |
| - test/unit/*.js |
| <strong>- app/lib/angular/angular.js |
| - app/lib/angular/angular-*.js |
| - app/js/*.js |
| - test/lib/angular/angular-mocks.js</strong></pre> |
| </li> |
| <li>Disable any breakpoints that you set in the project. |
| <p>You can disable the breakpoints by deselecting the checkbox for the |
| breakpoints in the Breakpoints window.</p></li> |
| <li>Right-click the project node in the Projects window and choose Test. |
| |
| <p>When you click Test the IDE automatically opens the JS Test runner in the Chrome browser |
| and two tabs in the Output window.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-browserwindow.png" |
| class="margin-around b-all" alt="screenshot of jsTestDriver running in the browser window" |
| title="jsTestDriver running in the browser window"> |
| <p>The Chrome browser window displays a message when the jsTestDriver server is running. |
| You can see that the server is running on <tt>localhost:42442</tt>. |
| In the js-test-driver Server tab in the Output window you can see the status of the server.</p> |
| |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputstatus.png" |
| class="margin-around b-all" alt="screenshot of js-test-driver Server tab in the Output window" |
| title="js-test-driver Server tab in the Output window"> |
| |
| <p class="notes"><strong>Note.</strong> 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.</p> |
| |
| <p>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 <tt>controllerSpec.js</tt> and the <tt>filtersSpec.js</tt> files. |
| (The <tt>servicesSpec.js</tt> and <tt>directivesSpec.js</tt> files in the <tt>unit</tt> folder |
| do not have any tests.)</p> |
| |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow.png" |
| class="margin-around b-all" alt="screenshot of Running JS unit tests tab in Output window" |
| title="Running JS unit tests tab in Output window"> |
| </li> |
| <li>Choose Window > Output > Test Results in the main menu to open the Test Results window. |
| <p>In the window you can see the message that all tests passed.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow.png" |
| class="margin-around b-all" alt="screenshot of Test Results window" |
| title="Test Results window"> |
| |
| <p>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. </p></li> |
| </ol> |
| |
| |
| <!-- ++++++++++++++++ Debugging a JS Unit Test ++++++++++++++++ --> |
| <a name="debugtest"></a> |
| <h2>Debugging a JS Unit Test</h2> |
| |
| <p>This exercise demonstrates how you can use the IDE to debug your |
| JavaScript files when a unit test fails.</p> |
| <ol> |
| <li>Expand the <tt>js</tt> folder in the Projects window and double-click <tt>controllers.js</tt> |
| to open the file in the editor.</li> |
| <li>Modify line 7 in the file to make the following changes (in <strong>bold</strong>). Save your changes. |
| <pre class="examplecode">function PhoneListCtrl($scope, Phone) { |
| $scope.phones = Phone.query(); |
| $scope.orderProp = '<strong>name</strong>'; |
| }</pre> |
| <p>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.</p> |
| </li> |
| <li>Confirm that the JS Test Driver server is running and that the |
| status message is visible in the Chrome browser window.</li> |
| <li>Right-click the project node in the Projects window and choose Test.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-testresultswindow-fail.png" |
| class="margin-around b-all" alt="screenshot of failed test in Test Results window" |
| title="Failed test in Test Results window"> |
| <p>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".</p></li> |
| <li>Open the Running JS unit tests tab in the Output window.<br> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-outputwindow-fail.png" |
| class="margin-around b-all" alt="screenshot of failed test in Running JS unit tests tab in Output window" |
| title="Failed test in Running JS unit tests tab in Output window"> |
| <p>You can see in the message that the <tt>orderProp</tt> is expected to be <tt>age</tt> on line 41.</p> |
| </li> |
| <li>Click the link in the Running JS unit tests tab to navigate to the line in the test that failed. |
| The test file <tt>controllersSpec.js</tt> opens in the editor at line 41 (in <strong>bold</strong>) |
| <pre class="examplecode">it('should set the default value of orderProp model', function() { |
| <strong>expect(scope.orderProp).toBe('age');</strong> |
| });</pre> |
| <p>You can see that the test expected "age" as the value of <tt>scopeOrder.prop</tt>.</p> |
| </li> |
| <li>Set a breakpoint at the line where the test failed (line 41).</li> |
| <li>Right-click the project node in the Projects window and choose Test. |
| <p>When you run the test again the program counter hits the breakpoint. |
| If you hover your cursor over <tt>scopeOrder.prop</tt> |
| you can see in the tooltip that the value of the variable is "name" |
| when the breakpoint is hit.</p> |
| <img src="../../../images_www/articles/73/web/html5-js/html5-js-testdriver-evaluate.png" |
| class="margin-around b-all" alt="screenshot of IDE showing editor, Evaluate Code window and Variables window" |
| title="IDE showing editor, Evaluate Code window and Variables window"> |
| <p>Alternatively, you can choose Debug > Evaluate Expression in the main |
| menu to open the Evaluate Code window. |
| If you type the expression <tt>scopeOrder.prop</tt> in the window and click the Evaluate Code Fragment |
| button (<img src="../../../images_www/articles/73/web/html5-js/evaluate-button.png" |
| alt="Evaluate Expression button" |
| title="Evaluate Expression button">)(Ctrl-Enter) the debugger displays the value of the expression |
| in the Variables window.</p> |
| </li> |
| <li>Click Continue in the toolbar to finish running the test.</li> |
| |
| </ol> |
| |
| |
| |
| <h2 id="summary">Summary</h2> |
| |
| <p>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.</p> |
| |
| |
| <div class="feedback-box"> |
| <a href="/about/contact_form.html?to=3&subject=Feedback:%20Debugging%20and%20Testing%20JavaScript%20in%20HTML5%20Applications">Send Feedback on This Tutorial</a> |
| </div> |
| |
| <br style="clear:both;"> |
| |
| <br> |
| <h2 id="seealso">See Also</h2> |
| |
| <p>For more information about support for HTML5 applications in the IDE on |
| <a href="https://netbeans.org/">netbeans.org</a>, see the following resources:</p> |
| |
| <ul> |
| <li><a href="html5-gettingstarted.html">Getting Started with HTML5 Applications</a>. |
| A document that demonstrates how to install the NetBeans Connector extension for Chrome |
| and creating and running a simple HTML5 application.</li> |
| <li><a href="html5-editing-css.html">Working with CSS Style Sheets in HTML5 Applications</a>. |
| A document that demonstrates how to use some of the CSS wizards and windows in the IDE and how to |
| use the Inspect mode in the Chrome browser to visually locate elements in your project sources.</li> |
| <li><a href="../ide/javascript-editor.html">Editing JavaScript</a>. A document |
| describing basic JavaScript editing features provided by the IDE.</li> |
| </ul> |
| |
| <p>For more information about running unit tests using JS Test Driver, refer to the following documentation:</p> |
| |
| <ul> |
| <li>JS Test Driver Project Page: <a href="http://code.google.com/p/js-test-driver/">http://code.google.com/p/js-test-driver/</a></li> |
| <li>Jasmine Home Page: <a href="http://pivotal.github.com/jasmine/">http://pivotal.github.com/jasmine/</a></li> |
| <li><a href="http://transitioning.to/2012/07/magnum-ci-the-jenkins-chronicles-1-intro-to-jstestdriver/">Intro to JsTestDriver</a>. |
| An introduction to using JsTestDriver with a continuous integration server.</li> |
| </ul> |
| |
| |
| </body> |
| </html> |
