TS 73 JavaScriptDebugger

JavaScript Debugger Test Specification for NetBeans 7.3

Author: Vladimir Riha
Last update: 3rd October 2012
Introduction: Test specification for JavaScript debugger in NetBeans

Mac OS specific details: To find Options on MacOS, go to Netbeans menu -> Preferences

Contents


Test suite: Breakpoints manipulation

  1. New DOM breakpoint from Browser DOM window
    1. Run HTML page
    2. Select some node in Browser DOM, right mouse click and add some breakpoint
    • EXPECTED RESULT: Appropriate breakpoint is created and list in Breakpoints window
  2. New breakpoint from Breakpoints window
    1. Open HTML page in IDE
    2. Open Breakpoints window (Alt+Shift+5)
    3. Click on "Create new breakpoint" icon
    4. New Breakpoint dialog is opened, try to add all types of breakpoints: Line, DOM, Event listener and XMLHttpRequest.
    • EXPECTED RESULT: All breakpoints are created
  3. Breakpoints deactivation
    1. Open HTML page in IDE
    2. Run the file in browser
    3. In Breakpoints window, click on "Deactivate all breakpoints" icon
    4. File:Ts73_jsdebugger_deactivation.png
    • EXPECTED RESULT: All breakpoints are deactivated. Code execution does not stop on them, lines with breakpoints are gray and all breakpoints have crossed icon. Activate them back and make sure they all works as expected
  4. Create new line breakpoint
    1. Open HTML/JavaScript page in IDE
    2. Put cursor on some line with JavaScript code
    3. Try one of following: (1) Right mouse click and "Toogle line breakpoint" or (2) keyboard shortcut Ctrl+F8 or (3) click on line number
    • EXPECTED RESULT: Appropriate breakpoint is created and list in Breakpoints window
  5. Create new watch
    1. Open HTML/JavaScript page in IDE
    2. Click on some JavaScript variable
    3. Invoke New Watch dialog from context menu
    4. Name of the watch should be prefilled, confirm it
    • EXPECTED RESULT: New watch is created and it is listed in Variables and Watches windows. Debug the code and make sure it is correctly evaluated

Test suite: Debugging

  1. Line breakpoint after source modification
    1. Create a line breakpoint
    2. Trigger some action that causes code execution to be stopped at the given line
    3. Continue F5
    4. Add some new lines before the line with breakpoint and repeat action
    • EXPECTED RESULT: Code execution stops at the right (red) line. For instance if breakpoint was originally at line X and new lines moved it to line X+3, then code execution stops at line X+3 - issue 220836
  2. Test common debugging steps (Step Into, Step Over etc.)
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. Try all the debugging steps (Step Into, Step Over, Continue...) and make sure they work as expected
    • EXPECTED RESULT: All steps work, if a code execution stops in different file, this file is opened in IDE and focused.
  3. Variables
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging, check the Variables window
    4. File:Ts73_jsdebugger_vars.png
    • EXPECTED RESULT: The window should contain simple variables and their values as well as objects and their properties and values. Each object should have __proto__ property. In Global there are variables/objects with global scope.
  4. Variable value
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging, hover over some simple (primitive) variable in editor
    4. File:Ts73_jsdebugger_hover.png
    • EXPECTED RESULT: Value of the hover variable is displayed in tooltip text
  5. Call Stack window
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, open Call Stack window (if not already)
    • EXPECTED RESULT: As you Step Over, Step Into etc. the current call stack is updated. Check that if you right click on some item and select Go To Source the appropriate file is opened in Editor on given line.Call stack lines in editor are highlighted
  6. Call Stack - Copy
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, open Call Stack window (if not already)
    4. Right click on some item in Call Stack window and select "Copy Stack".
    • EXPECTED RESULT: Current call stack is copied to Clipboard, you can verify it by pasting it to some text editor
  7. Call Stack - Make current
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, open Call Stack window (if not already)
    4. Right click on some item in Call Stack window and select "Make current".
    5. File:Ts73_jsdebugger_callstack.png
    • EXPECTED RESULT: Editor shows corresponding source code, selected frame is bold. Make sure that Variables window contains only variables (and their values) that are in the given frame context
  8. Watches
    1. You can use listener for Clipboard-copy on the sample application. It calls some dummy functions from different js files
    2. Run the file and copy text from the form field
    3. While debugging the Clipboard-Copy scenario, add new watch for some expression
    • EXPECTED RESULT: New watch is listed in Variables window (if Show watches inside Variables view is turned on). Toggle the Show watches inside Variables view and make sure that visibility of watches in Variables view changes. New watch is listed in Watches window. Type and Value of the watched expression matches expected values. You can confirm this using Chrome DT and its watch expression feature
  9. Expandable tooltip
    1. Add line breakpoints in debug_event.js for the line with "foo=1"
    2. Run the debugger.html file
    3. Code execution stops on the line with breakpoint
    4. Hover over the object "e"
    5. File:ExpTooltip.png
    • EXPECTED RESULT: Tooltip for object "e" is expandable and looks like on the image below
  10. Browser log
    1. Run sample/debugger.html. There is a dummy logging (see snipped below)
console.log("LOG REPORT");
console.warn("WARN REPORT");
console.error("ERROR REPORT");
console.trace("TRACE REPORT");
    • EXPECTED RESULT: If not opened, open Window
  1. Evaluate expression
    1. Run debugger.html
    2. Add breakpoint to e.g. event listener Clipboard/Copy
    3. Try copy some text from the input field above page to clipboard
    4. Code execution is stopped on the given line
    5. Step into few times
    6. Open Debug|Evaluate expression
    7. File:EvaluatorMenu.png
    • EXPECTED RESULT: An evaluator window is opened in bottom editor area and evaluation result is visible in Variables window. Try to type some code and press Evaluate code fragment. Make sure it shows correct result. Repeat it one more time for different expression. Press the triangle icon in the right corner and a list of previously evaluated expressions is shown. If you pick some, the expression is inserted to the evaluator window
  2. Debugging
    1. Run sample/debugger.html
    2. Follow instructions on the page
    • EXPECTED RESULT: All works
Not logged in. Log in, Register

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