TS_65_JavaScriptDebugger Test Specification

Author: Krys Polomski
Version: 2.0
Last update: 2008/11/26

Introduction: This document describes the test specification for the client-side JavaScript Debugger.
Comment: Browsers supported: Firefox (2.x and 3.x) and InternetExplorer (6 and 7 and 8beta2). Projects used for testing include FishEye web project and MishMash web project. Tests specifically call for which browser to test due to subtle differences (See http://wiki.netbeans.org/JavaScriptDebuggingWithInternetExplorer). To avoid Firefox cache issues, it is recommended to set browser.cache.check_doc_frequency in about:config to value 1.

Table of Contents


Test suite 1: Installation

Purpose: The Installation test suite must be run before any other test suites.
Setup: Install the Netbeans "Java" distribution.

#Test caseDescription
1Autoinstall for Client-Side Debugging - Internet Explorer
SETUP: Clean userdir. A Windows machine with Internet Explorer where Client-side debugging never enabled (If necessary run regsvr32 /u "c:\NETBEANS\webcommon1\native\NetBeansExtension.dll" to remove the dll for fresh clean startup test).
  1. Create a new web project.
  2. From the main menu, run Debug Main project. This will launch a Deploy process.
  3. Debug Project dialog appears along with the Web Application's name in the dialog's banner. The radio button will be selected by default for Server Side. Select (enable) the radio button for Server Side Java with client side JavaScript and also select the radio button for Internet Explorer. Press the debug button of the dialog.
  4. If this is the very first time this machine has been used for testing the JavaScript debugger, it will check if a required Active Scripting Debugger Framework from Microsoft is installed. If not, the Install Active Scripting dialog is shown and a browser is launched with the URL pointing to the free download. Follow the verification, download, and run instructions until receiving the successful install dialog. Then OK the original dialog.
  5. Next the Register NetBeans Add-on for Internet Explorer dialog appears. Press OK.
RESULT: Internet Explorer launches with splash screen followed by ouptut "Hello World" (from default web application).
2Autoinstall for Client-Side Debugging - Firefox
SETUP: Clean userdir. Machine with Firefox where Client-side debugging never enabled (If necessary remove Firefox Add-ons Firebug and Netbeans extension using the Tools Add-ons Menu for fresh clean startup test).
  1. Create a new web project.
  2. From the main menu, run Debug Main project.
  3. Debug Project dialog appears along with the Web Application's name in the dialog's banner. The radio button will be selected by default for Server Side. Select (enable) the radio button for Server side Java with client side Javascript and also select the radio button for Firefox. Press the Debug button of the dialog.
  4. Install Firefox Add-ons appear. As warned, close any browsers before pressing Ok.
RESULT: Firefox launches with splash screen followed by ouptut "Hello World" (from default web application).
3Do not show message again
SETUP: This is a follow on test from the previous test, where extensions for both browsers have now been successfully installed.
  1. Use the previous project.
  2. From the main menu, run Debug Main project.
  3. Debug Project dialog appears again. This time check the box "Do not show this message again" and select browser of choice.
  4. Desired browser launches with splash screen. Finish session. Close browser.
  5. Launch Debug main.
RESULT: No Debug Project dialog appears and Debugger launches immediately using the desired browser.
4Manual set - project properties Launch Firefox
SETUP: Open FishEye project as main project.
  1. Popup Menu on project name in project window | Properties | Debug
  2. Uncheck Debug Web Application (Server side) if not already unchecked.
  3. Check Debug Web Application (Client side JavaScript) and set Firefox browser
  4. From the top Debug menu, select Debug Main Project
RESULT: * Splashscreen launches in Firefox browser
5Manual set - project properties Launch InternetExplorer
SETUP: Fisheye project is main project.
  1. Popup Menu on project | Properties | Debug
  2. Uncheck Debug Web Application (Server side) if not already unchecked.
  3. Under Debug Web Application (Client side JavaScript) set the radio button to InternetExplorer browser
  4. From the top menu, Debug, select Debug Main Project
RESULT: *Splashscreen launches in Internet Explorer

Test suite 2: Menu icons

Purpose: Verify activated debug toolbar icons.
Setup: Open project FishEye.

#Test caseDescription
1Toolbar running
  1. Expand project and locate fisheye.html
  2. Exercise popup to select "Debug file" option.
RESULT: The following icons appear: where the Stop and Pause icons are activated
2Toolbar deactivated
  1. Following from the previous testcase, press Finish Debugger Session red icon
RESULT: Verify that session has ended with no debugger icons visible in toolbar
Teardown: Close project.


Test suite 3: Operations

Setup: Open Window | Debugging | Sessions; Open project MishMash and set as main project; Manually set project property client-side only.

#Test caseDescription
1Suspend on debugger
SETUP: From main toolbar: Tools | Options | Miscellaneous | JavaScript Debugger tab, only Suspend on Debugger Keyword should be checked.
  1. Run Debug Main Project
RESULT: In the toolbar the icons: Finish, Continue, and all Stepping icons are activated as . A green right arrow appears in editor at the line with debugger keyword representing Current Program Counter. Sessions debugging window reads State: SUSPENDED Reason: DEBUGGER
2Suspend on exception
SETUP: From the main toolbar: Tools | Options | Miscellaneous | JavaScript Debugger tab, only Suspend on Exceptions should be checked.
  1. Expand the web page in the project window and highlight select file testexception.html
  2. From the popup menu select "Debug File"
RESULT: *Toolbar Finish, Continue, and Stepping icons are activated as ; *A green right arrow appears in editor at the line with "throw" clause; *Sessions debugging window reads State: SUSPENDED Reason: EXCEPTION; *Expand Local Variables to see [exception] under scope node
3Suspend on First Line
SETUP: From main toolbar: Tools | Options | Miscellaneous | JavaScript Debugger tab, only Suspend on First Line should be checked. Set FishEye as main project, manually set the project property debug for Client-Side only, /fisheye.html should be the project property run relative URL value.
  1. Run Debug Main Project
RESULT: * Current Program Counter stops at first executable line, line 9, "var fisheyemenu"; * Sessions Window says State: SUSPENDED Reason: FIRST_LINE
4Browser exit
SETUP: Open Fisheye project and set as main
  1. Run Debug Main Project
  2. Verify browser opens to load fisheye.html
  3. Verify debug toolbar is in not-suspended state
  4. Close browser
RESULT: Verify debug main toolbar is closed and session is ended; All debugging output windows below close.
5Show constants
SETUP: From the main toolbar: Tools | Options | Miscellaneous | JavaScript tab, debugger section, enable checkbox for Show Constants. Open Fisheye project and set it as Main. Place a breakpoint on line 28 (fisheyemenu.imgLarge(this);) of fisheye.js (Note: for 6.5 due to bug 151337 you will have to uncheck to see it working). Use Firefox Browser and client side only debug project property.
  1. Run Debug Main
  2. From the browser, run your mouse cursor over the icons shown in the page. Toolbar will suspend.
  3. Open Window | Debugging | Local Variables
  4. Expand scope node "arguments"
  5. Expand node "0"
RESULT: See the following int constants listed (and more) ABORT, ALT_MASK, ALT_TARGET, BACK, BLUR
6Show functions
SETUP: From the main toolbar: Tools | Options | Miscellaneous | JavaScript tab , debugger section, select Show Functions checkbox. Open FishEye project and set it as Main. Place a breakpoint on line 28 of fisheye.js. Use Firefox browser with project debug property set to client-side JavaScript.
  1. Run Debug Main.
  2. Toolbar will suspend.
  3. Open Window | Debugging | Local Variables
  4. Expand scope node "arguments"
  5. Expand node "0"
RESULT: Scroll down to see a set of 4 of Type function {NativeFunction}
7Run to cursor
SETUP: From main toolbar: Tools | Options | Miscellaneous | JavaScript Debugger tab, only Suspend on Debugger Keyword should be checked. Open Project MishMash and set as Main project.
  1. Run Debug Main project
  2. Debugger will suspend and program counter will point at debugger statement in editor.
  3. Move cursor to line 18 (document.writeln "third line"). From toolbar, press the Run to Cursor icon
RESULT: Green program counter moves to line 18.
8Ignore Query String
SETUP: From the main toolbar: Tools | Options | Miscellaneous | JavaScript tab , debugger section, check Ignore Query Strings checkbox. Open FishEye project and set it as Main. Place a breakpoint on line 28 of fisheye.js. Use Firefox browser with project debug property set to client-side JavaScript.
  1. Open fisheye.html file and add a query string and change line 9's src="fisheye.js" to src="fisheye.js?12345". Save file.
  2. Open Window | Debugging | Sessions window. Run debug main project
  3. From the sources window, see that the javascript filename is listed without the query string: Fisheye\web\fisheye.js.
  4. Now uncheck the ignore query string option and Run Debug again.
RESULT: From the sources window, see the javascript filename with the query string: fisheye.js?12345

Test suite 4: Breakpoints

#Test caseDescription
1Breakpoint in html file
SETUP: Open Project MishMash and select testexception.html. Have View | Show line numbers set. Check project properties that Debug property Server side is checked off. Set the project debug property to Internet Explorer browser.
  1. Place breakpoints by clicking on line 9 and line 14 by clicking on line number to reveal square annotation.
  2. Context menu on testexception.html to "Debug File" or from Debug top menu select Debug "testexception.html"
  3. Debug toolbar is in suspended state with green program counter on line 9
  4. On debug toolbar, press Step Out or Ctrl+F7
RESULT: Program counter moves to line 14. Verify Sessions debug window State: SUSPENDED Reason: BREAKPOINT.
2Breakpoint in .js
SETUP: Open Project Fisheye. Check project debug property Server side is checked off; set the project debug property for client-side to use Firefox browser.
  1. Expand directory to select fisheye.js. Place breakpoint on line 79. Verify that breakpoint appears in breakpoints window below ...\web\fisheye.js:79
  2. In project view, highlight select fisheye.html and exercise popup to Debug File.
RESULT: Program counter stops on line 79.
3Breakpoint window
SETUP: Open Project MishMash and select testexception.html. Have View | Show line numbers set. Check project properties that Debug property Server side is checked off. Set the project debug property to Internet Explorer browser.
  1. Place breakpoints by clicking on line 9 and line 14 by clicking on line number to reveal square annotation.
  2. Verify line numbers in Window | Debugging | Breakpoints window
  3. Now place an empty line above each of the two breakpoints.
RESULT: Verify in Breakpoints window that the line numbers become 10 for the first breakpoint and 16 for the second.
4Breakpoint in remote .js file (Attach Debugger)
SETUP: Set the project debug property to use Internet Explorer browser. (Note: this test is also used in Call Stack test suite.)
  1. Attach Debugger | Web Page Debugger (Javascript), type url http://www.cnn.com, any browser radio button selection and press OK.
  2. The url opens in selected browser and cnn.com page marked r/o (read only) appears in the editor. Click on Debug toolbar "Pause".
  3. Go to the browser and presh Refresh.
  4. In the IDE, prototype.js loads in the multiviewer of the IDE also as a r/o (read only) file.
  5. Place breakpoint on line 9 and 20. Finish Session.
  6. Launch Web Page Debugger (Javascript) again and expect to see same url just typed. Press OK.
  7. Toolbar is in suspended state. Verify Debugging Window | Sessions states State SUSPENDED: Reason BREAKPOINT. Press Step Out or (Shift+F7)
RESULT: Program counter moves to line 20.
5Breakpoint annotations
SETUP: Open Project MishMash and select testexception.html. Havae View | Show line numbers set. Check project properties that Debug property Server side is checked off. Set the project debug property to Firefox browser.
  1. Place breakpoints by clicking on line 9 and line 14 in the editor to reveal square annotation.
  2. Verify line numbers ini the Window | Debugging | Breakpoints window
  3. Back in the file, context menu on the existing breakpoints and select Breakpoint | Enabled which will toggle OFF and uncheck the Enabled property.
  4. Verify that both breakpoints are now greyed.
  5. Context menu on testexceptions.html to Debug file.
  6. Open Window | Sessions and verify that reason of suspend is for debugger (not breakpoint).
  7. Finish Session.
  8. Now enable the breakpoint again as in step 3 and verify that the breakpoint annotations are no longer greyed.
  9. Debug file.
RESULT: Toolbar should suspend on breakpoint on line 9. Verify in Window | Sessions.
6Breakpoint hit count
SETUP: Set the project debug property to use Firefox. Open MishMash project, select file hitbp.html.
  1. Click in gutter on line 16 to set a breakpoint on the first document.write line.
  2. Context menu on the new breakpoint in the gutter to bring up the Breakpoint properties.
  3. Check break when hit count is greater than or equal to 3
  4. Note breakpoint icon changes. Save file. Context menu on hitbp.html to Debug File.
RESULT: Web page outputs 2 lines of text; debugger toolbar is activated for stepping;
7Breakpoint conditional
SETUP: Set project debug property to use Firefox browser. Open MishMash project, select file hitbp.html.
  1. Click in gutter on line 16 to set a breakpoint on the first document.write line.
  2. Context menu on the new breakpoint in the gutter to bring up the Breakpoint properties.
  3. Check Condition and enter text i==3
  4. Note breakpoint icon changes. Save file. Context men on hitbp.html to Debug File.
RESULT: Web page outputs 3 lines of text; debugger toolbar is activated for stepping;

Test suite 5: Watches

Setup: Open Project MishMash. Use Internet Explorer via project property.

#Test caseDescription
1Window
SETUP: Expand project and open watchexpression.html
  1. Set breakpoint on Line 14
  2. Use popup on file to "Debug File"
  3. Open Window | Debugging | Watches and invoke popup on blank white pane of that window to select "New Watch". In the New Watch dialog that comes up, type the following in the Watch Expression textfield: a+b
  4. Run cursor over the new watch in the Name column and note tooltip.
RESULT: Verify that Name column is populated with a+b, Type column says String, and value is "Uknown in the current context" and for the tooltip as well.
2Verify expression
  1. Interact with browser window by clicking on the link that says "script in head" .
  2. Start stepping by Stepping Into and OK the secondary dialog that comes up in the browser. Program counter moves to line 16 in the IDE.
  3. Step Into (F7) again and watch Watches window.
RESULT: Watches window Value column says "Hello from head2"

Test suite 6: Local variables

Setup: Open Project MishMash. Set Debug project property client-side JavaScript to Firefox.

#Test caseDescription
1this
  1. Select and open file thistest.html, and set breakpoint on line 11.
  2. Invoke popup on file to "Debug File" then Step Into (F7)
  3. At the browser window, click on "Click to create event script"
  4. Open Window | Debugging | Local Variables window
  5. Verify that in the Local Variables window, the first node called scope and is expanded. Collapse.
RESULT: Verify that the second node in the window is called "this", and lists for Type "object {HTMLAnchorElement}" and when "this" node is expanded, find the textContent node and verify that the Name column is Type string, and has value "Click to create event script".
2scope
  1. Expand scope node - should read Type object {Call}
  2. Expect to see 5 child nodes: event, arguments, arguments.length, arguments.callee.length and parent scope
  3. Run mouse cursor over these nodes to reveal tooltips.
TEARDOWN: Finish Session. Delete all breakpoints by context menu on the breakpoints window. Close browser.
RESULT: Name and Types for the 5 nodes should be: event object{MouseEvent}; arguments object{Object}; arguments.length int; arguments.callee.length int; parent scope object{HTMLAnchorElement}.
3Nested functions
SETUP: Set MishMash project debug property for client-side Internet Explorer. Uncheck server side.
  1. Open Tools | Options | Miscellaneous | JavaScript debugger tab and check Set Suspend on first line.
  2. Open Window | Debugging | Local Variables
  3. Highlight select nestedfunctions.html and use popup to debug file. IE will take a while to load.
  4. Step into once. View scope node to see "x" variable.
RESULT: Step into once again. See "y" variable.
Teardown: From breakpoint debug window, use popup to delete all. Close project.


Test suite 7: Call stack

Setup: Open Project Fisheye and set the client-side JavaScript Debug property to Firefox

#Test caseDescription
1Go to source
  1. Open Web Pages | working | fisheye.js and set breakpoint on line 9
  2. Select project file fisheye_container.html and invoke popup "Debug File"
  3. If not already open, open Window | Debugging | Call Stack; Click on "x" of fisheye.js in the editor in order to remove file from multiviewer.
  4. Click on "x" in the file tab for fisheye.js in the editor in order to remove file from the multiviewer.
  5. In Call stack window, invoke popup on node with yellow button to "Go to Source"
  6. The toolbar is suspended and the correct fisheye.js from the working directory is loaded back into multiviewer.
  7. Click on "x" again in the file tab for fisheye.js in the editor in order to remove file from the multiviewer.
  8. Double click on the yellow node in Call Stack window
RESULT: The toolbar is suspended and the correct fisheye.js fronm the working directory is loaded back into multiviewer.
2UI (call stack)
SETUP: Execute the same testcase as in the Breakpoints testsuite, testcase breakpoint in remote .js file (using Attach Debugger), steps 1 - 6.
  1. Start stepping into code with Call stack window open.
  2. Step until at least two or three lines appear in the Resolved Location column. Double click on the second or third entry in the Name column to see a grey annotation in the editor and the entry bolded in the Call Stack window.
  3. Exercise the popup go to source from any entry in the Resolved Location to see the cursor move to the line number.
TEARDOWN: Finish Session. Remove all breakpoints. Close browser.
RESULT: The Resolved Location column of the call stack window matches the line numbers in the editor and have grey annotations or green program counter if it is the top of the stack.
Teardown: From breakpoints window, invoke popup to delete all (breakpoints). Finish Debugging Session.


Test suite 8: Sessions

Setup: Sessions related tests can also be found in the Operations test suite (Suspend on debugger, Suspend on exception, and Suspend on First Line).

#Test caseDescription
1Client and Server
SETUP: Debug toolbar should be deactivated and not visible. Create a plain new web project, accepting all the defaults. By default server debug property is checked on.
  1. Open Window | Debugging | Sessions. If the window is not blank, popup to Finish All.
  2. Run Debug Main Project. Debug Project dialog appears.
  3. Select server side Java witih client side Javascript in the selected browser and pick either browser. Also check do not show this message again. Press Debug.
  4. Hello World is output in web browser.
RESULT: Verify two nodes in Sessions window: Server side session is labeled "WebApplicationXX" in the Name columns has Language set to Java; Client side is identified depending on browser NETBEANS-FIREFOX-DEBUGGER-[incrementalCounter] or NETBEANS-INTERNETEXPLORER-[incrementalCounter] in the Name column and Javascript in the Language column. State is "running" for both.
2Finish
SETUP: This is a follow on test from Client and Server test above.
  1. Highlight select the server side node. Note the Projects window Debugging tab also identifies the server node. Invoke the popup on the Sessions server side node and select "Finish"
  2. There is still session active in the Sessions debug window and toolbar. Invoke popup on the client-side node to "Finish"
RESULT: Debug toolbar is deactivated. Sessions debugging window is empty.

Test suite 9: Threads

Setup: Open Project Fisheye

#Test caseDescription
1Frames
  1. Open Window | Debugging | Threads
  2. Highlight select fisheye_container.html and invoke popup to "Debug File"
RESULT: Threads window will be populated with one Window node and two child Frame nodes. Invoke Go to Source on each.
2UI (threads)
SETUP: This is follow on from previous test.
  1. Click on the "x" of the tab of all pages loaded in the editor multiviewer.
  2. Return to the threads window to excercise double clicking to open each frame and window.
RESULT: Three files are loaded into the multiviewer.
Teardown: Finish Debug Session.


Test suite 10: Http Client Monitor

Setup: For 6.5, only Firefox browser is supported.

#Test caseDescription
1Using Attach Debugger
  1. Select Main | Windows | Debugging | HTTP Client-Side Monitor
  2. Select Main | Debug | Attach Debugger | Web Page Debugger (Javascript) and enter url http://www.cnn.com. Select radio button for desired browser and press OK.
  3. Splashscreen launches in browser and replaced with the URL. All buttons in the monitor are toggled on by default and URL fields are populated along with Method (GET/POST), Sent and Received time.
  4. Close browser to Finish the Debugging Session.
  5. Http monitor no longer populated with any URL, Method, Send or Received time data.
  6. Top menu File | Close
  7. Repeat step 2. The window should have saved both the url and Firefox radio button setting. Press OK.
RESULT: Splash screen comes up followed by the url in the browser. The http client-side monitor loads data from the URL.
2JSON
SETUP: Window
  1. Select Main | Windows | Debugging | HTTP Client-Side Monitor
  2. Attach Debugger with the following URL: http://developer.yahoo.com/yui/examples/json/json_connect_clean.html
  3. Toggle off all but XHR column in monitor by toggling columns: html/js/css/images/flash
  4. In the web browser, press the Get Messages button.
  5. Return to the http monitor click on one url in the XHR columnm, ......jsconnect.php
RESULT: View HTTP response window, selecting the Body tab, that the json output matches data seen on the web page.
3POST
  1. Select Main | Windows | Debugging | HTTP Client-Side Monitor
  2. Attach Debugger with the following URL http://developer.yahoo.com/yui/examples/connection/post.html
  3. Toggle off all but XHR column in monitor by toggling columns: html/js/css/images/flash
  4. In the web browser page, interact with the web page by pressing button Send a POST Request
  5. Click on the POST Method column
RESULT: Verify the POST data in the Http Response Body

Test suite 11: Debug JSP

Purpose: This is a technique to use to debug JSP server pages. This is the technique that can be applied .gsp and .php pages.

#Test caseDescription
1Debug jsp (.gsp, .php)
SETUP: Use Project MishMash and Firefox browser. Set the project properties Debug property to Debug Web Application (Client side JavaScript) only.
  1. Open the index.jsp and note the added javascript.
  2. Use the popup on the index.jsp file to Debug File
  3. It will take longer for a read/only (r/o) page to appear in the editor
  4. It is in this r/o file that you can set a breakpoint. Pause the debugger from the icon tool bar.
  5. Set a breakpoint on the head tag in the r/o file.
  6. Return to the browser page and press refresh.
RESULT: Toolbar is activated for debugging.
2Multiple Session
SETUP: Here we set both debug project properties to both server side along with the client-side. This example uses Firefox.
  1. Create a new web project, copying the script tag from MishMash project's index.jsp file to the new project's .jsp file below the level h1 html tag.
  2. Run Debug Main Project and when the Debug Project dialog comes up, check the "Server side Java with client side JavaScript in the selected browser". Select any browser. Also check the Do not show this again. Press Debug.
  3. After the r/o file appears in the editor, activate a breakpoint in the javascript code, for example on the "for" statement. Press Finish session twice. Close browser.
  4. Run Debug Main again. Debugger suspends on the breakpoint. Verify that the NETBEANS-FIREFOX-DEBUGGER (client side) is highlighted in the Sessions Window.
  5. Make the non-suspended (server-side in this case) active using the popup "Make current"
  6. Use popup on the server side to "Finish".
RESULT: Client side becomes active in sessions window. Toolbar is in suspended state.

Test suite 12: Attach Debugger

Purpose: See the Http Client Monitor suite for testcases Using Attach Debugger. Attach Debugger is also used in the Breakpoint in remote .js file test, and is a test case in the Call Stack test suite.


Generated: 2008 11 26 03:24

Project Features

About this Project

QA was started in November 2009, is owned by Jiří Kovalský, and has 97 members.
By use of this website, you agree to the NetBeans Policies and Terms of Use (revision 20160708.bf2ac18). © 2014, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo
 
 
Close
loading
Please Confirm
Close