Watchpoints Test Page

Test Case #1

  1. Open Firefox Developer tools
  2. Click this button JS execution should be paused in the Debugger
  3. Expand the Block -> person object in the Scopes side panel
  4. Right click on age property and pick Break on... -> Property Set You should see a marker indicating that there is Watchpoint.
  5. Resume execution.
  6. JS execution should pause on the following line: person.age = 45; since it's the place where the property value is changed.

If you repeat this test case again the execution won't be paused in step #6 since the age property is already set to 46 and so, it isn't changed

Test Case #2

  1. Open Firefox Developer tools
  2. Click this button JS execution should be paused in the Debugger
  3. Expand the Block -> person object in the Scopes side panel
  4. Right click on age property and pick Break on... -> Property Get
  5. Resume execution.
  6. JS execution should pause on the following line: console.log(person.age); since it's the place where the property value is accessed.

The scenario should work if you repeat this test case again since we are just reading the property.

Test Case #3 - Remove Watchpoint from Test Case #2

  1. Click the button from test case #2 again
  2. Expand the Block -> person object in the Scopes side panel
  3. You should see a marker. Click on it to remove the Watchpoint
  4. Resume execution
  5. JS execution should not pause.
You can also right click on the age property and remove the Watchpoint using the context menu

Tips for other test cases

  1. Try to create multiple (get and set) Watchpoints
  2. Refresh the page while paused on an existing Watchpoits. All should work as expected
  3. Try to create/remove Watchpoints while the debugger is paused.
  4. Watchpoints created on objects defined in local scope (e.g. within a function) should disappear after the execution leaves the scope and the object is garbage collected.