9

Dev Tools: Debugging DOM Tree modifications

 4 years ago
source link: https://www.matuzo.at/blog/dev-tools-debugging-dom-tree-modifications/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
Dev Tools: Debugging DOM Tree modifications

This site is updating in the open

It looks like stylesheets are missing, but actually I’m working on this site openly and I just started to redesign it. Things will look a little better every time I find the time to update it.
If something is completely broken, please get in touch.

Dev Tools: Debugging DOM Tree modifications

posted on January 29., 2021

“Break on Subtree Modification” allows you to debug dynamically added and removed DOM nodes.

The other day I was debugging a Drag’n’Drop component, and I noticed that it added a DOM node every time I dragged an element. I wanted to inspect the node and see what’s going on in the CSS panel, but as soon as I dropped the element I was dragging, the new node was removed from the DOM (Document Object Model). I tried to catch it quickly, but I didn’t have a chance.

Break Stuff

A quick search pointed me to an option I’ve noticed several times in the context menu of nodes in the elements panel, but I never cared to see what it was doing: “Break on…”.

Context menu in Firefox Dev Tools: the option “Break on…” selected and three child menu items showing: Subtree Modification, Attribute Modification, and Node Removal

Selecting “Break on Subtree Modification” pauses any script that modifies the DOM of the selected element and jumps to the line in the script that modified it.

The line that caused the DOM modification is highlighted in the sources panel.

Now that the script is paused, you can unhurriedly inspect the DOM.

Dev tools shows a message “Paused on DOM mutation” and allows me to select the new node in the elements panel.

This option helped me not only to debug the component, but I also felt less stupid because I didn’t have to desperately try to move the mouse as quickly as possible.

The other options are useful, too. I can imagine that “Break on attribute modification” can come in handy when we’re debugging complex animations or user interactions.

You can use this CodePen, if you want to try it yourself.

© 2019 - 2021

Back to top


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK