index.rst (2448B)
1 =============== 2 Use watchpoints 3 =============== 4 5 When debugging JavaScript code, it can be useful to know when properties on objects are read or modified. In a large, complex codebase, it's not always easy to know where in the code a given property is accessed. In the Firefox Debugger, this information can be provided by *watchpoints*. By setting a watchpoint on the property, rather than a breakpoint at a particular line, you can discover where that access occurs. 6 7 There are three types of watchpoints: *get*, *set*, and *get or set*. A *get* watchpoint pauses whenever a property is read; a *set* watchpoint pauses whenever a property value changes; a *get or set* watchpoint pauses whenever a property value is accessed in either way. 8 9 Set a watchpoint 10 **************** 11 12 1. Run and then pause the debugger. 13 2. In the Scopes pane on the right side of the Debugger user interface, find an object you want to watch, and right-click it to open its context menu. 14 3. Choose **Break on**, and then one of 15 16 - **Property set** 17 - **Property get** 18 - **Property get or set** 19 20 .. image:: watchpoint-get-or-set.png 21 :alt: Screenshot showing the context menu for setting a watchpoint on an object 22 :class: border 23 24 A watchpoint icon appears to the right of the property in the Scopes pane. *Set* watchpoint icons are blue, *get* watchpoint icons are reddish, and *get or set* watchpoint icons are dark yellow. 25 26 27 .. image:: watchpoint-icons.png 28 :alt: Screenshot highlighting the 3 types of watchpoint icons 29 :class: border 30 31 4. Click **Play** or press :kbd:`F8` to resume execution. 32 33 34 View a watchpoint 35 ***************** 36 37 When the watched property is accessed in the way specified by the watchpoint type (get or set), the debugger pauses, enabling you to see line of code responsible, and to inspect anything else you wish at that time. 38 39 In the following screenshot, the debugger pauses at line 7, where ``obj.a`` is set. The message panel in the upper right corner indicates that the debugger is "Paused on property set". 40 41 .. image:: watchpoint_pause.png 42 :class: border 43 44 Delete a watchpoint 45 ******************* 46 47 - Locate the watched property in the Scopes pane. 48 - Click the watchpoint icon, or right-click and choose **Remove watchpoint**. The watchpoint is removed. 49 50 See also 51 ******** 52 53 - `Debugging variables with watchpoints in Firefox <https://hacks.mozilla.org/2019/12/debugging-variables-with-watchpoints-in-firefox-72/>`_