From 6bf0a5cb5034a7e684dcc3500e841785237ce2dd Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sun, 7 Apr 2024 19:32:43 +0200 Subject: Adding upstream version 1:115.7.0. Signed-off-by: Daniel Baumann --- .../dom_breakpoint_context.png | Bin 0 -> 8532 bytes .../dom_mutation_breakpoint.png | Bin 0 -> 20346 bytes .../break_on_dom_mutation/dom_mutation_paused.png | Bin 0 -> 17525 bytes .../user/debugger/break_on_dom_mutation/index.rst | 52 +++++++++++++++++++++ 4 files changed, 52 insertions(+) create mode 100644 devtools/docs/user/debugger/break_on_dom_mutation/dom_breakpoint_context.png create mode 100644 devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_breakpoint.png create mode 100644 devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_paused.png create mode 100644 devtools/docs/user/debugger/break_on_dom_mutation/index.rst (limited to 'devtools/docs/user/debugger/break_on_dom_mutation') diff --git a/devtools/docs/user/debugger/break_on_dom_mutation/dom_breakpoint_context.png b/devtools/docs/user/debugger/break_on_dom_mutation/dom_breakpoint_context.png new file mode 100644 index 0000000000..c8d8a78d0d Binary files /dev/null and b/devtools/docs/user/debugger/break_on_dom_mutation/dom_breakpoint_context.png differ diff --git a/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_breakpoint.png b/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_breakpoint.png new file mode 100644 index 0000000000..a36526b8ed Binary files /dev/null and b/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_breakpoint.png differ diff --git a/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_paused.png b/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_paused.png new file mode 100644 index 0000000000..f193b9878a Binary files /dev/null and b/devtools/docs/user/debugger/break_on_dom_mutation/dom_mutation_paused.png differ diff --git a/devtools/docs/user/debugger/break_on_dom_mutation/index.rst b/devtools/docs/user/debugger/break_on_dom_mutation/index.rst new file mode 100644 index 0000000000..a16f3a0c0c --- /dev/null +++ b/devtools/docs/user/debugger/break_on_dom_mutation/index.rst @@ -0,0 +1,52 @@ +===================== +Break on DOM mutation +===================== + +A DOM Mutation Breakpoint pauses the code when the DOM node on which you have set the breakpoint is modified. + +You set a DOM Mutation Breakpoint in the :doc:`Page Inspector <../../page_inspector/index>`. Navigate to the DOM node in which you are interested and use the context menu to set the breakpoint. + + +.. image:: dom_breakpoint_context.png + :class: center + +There are three choices: + +**Subtree Modification** + + Execution pauses if any of the element's descendant nodes are modified.
+ That means, the script execution is stopped whenever a child node or descendant node deeper in the DOM structure is added to or removed from the element the option is set on. + + Examples for when this breakpoint is triggered are calling `Node.appendChild() `_ and `Node.removeChild() `_, calling `Element.remove() `_ or setting `Element.innerHTML `_ on one of the subnodes. + +**Attribute Modification** + + Execution pauses when any of the elements' attributes are modified.
+ That means, the script execution is stopped whenever an attribute is added to or removed from the element the option is set on or the value of one of its attributes is changed. + + Examples for when this breakpoint is triggered are calling `Element.setAttribute() `_, `Element.removeAttribute() `_, and `Element.classList.add() `_, or setting `Element.id `_. + +**Node Removal** + Execution pauses if the element the option is set on is removed. + + Examples for when this breakpoint is triggered are calling `Element.remove() `_ or `Node.removeChild() `_ on its parent node. + + +Once you set the breakpoint, go to the Debugger. You can see the breakpoint listed in the right-most panel under **DOM Mutation Breakpoints**. + +.. image:: dom_mutation_breakpoint.png + :class: border + +Click on the icon following the node name to go back to the Page Inspector with the node selected. + +When you execute the code, the debugger will pause execution when the DOM mutation occurs. In the following example, the selected node (the unordered list) is modified by adding a new child node. + +.. image:: dom_mutation_paused.png + :class: border + +The panel on the right shows that execution is "Paused on DOM mutation" and you, as with any other breakpoint, you can see the call stack and view any Watch expressions you may have set up. + +Inline variable preview +*********************** + +New in Firefox 71, the :ref:`source pane ` now gives you an instant preview of the variables on each line of code you've stepped through. See :ref:`Set a breakpoint > Inline variable preview ` for more information. -- cgit v1.2.3