Click this button
JS execution should be paused in the Debugger
Expand the Block -> person object in the Scopes side panel
Right click on age property and pick Break on... -> Property Set
You should see a marker indicating that there is Watchpoint.
Resume execution.
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
Open Firefox Developer tools
Click this button
JS execution should be paused in the Debugger
Expand the Block -> person object in the Scopes side panel
Right click on age property and pick Break on... -> Property Get
Resume execution.
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
Click the button from test case #2 again
Expand the Block -> person object in the Scopes side panel
You should see a marker. Click on it to remove the Watchpoint
Resume execution
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
Try to create multiple (get and set) Watchpoints
Refresh the page while paused on an existing Watchpoits. All should work as expected
Try to create/remove Watchpoints while the debugger is paused.
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.