Google chrome comes with a lot of handy tools to assist web developers in building a better experience for users/customers. And it has added numerous features over the last few years, forcing other browsers to follow the same path.

This article will talk about how one can detect changes on elements in the DOM during runtime, primarily for debugging. This is the first in a series of posts covering useful tools of Chrome Dev tools.

Elements Panel

Elements panel, as you know, is the place where you can see the elements that are currently available in the DOM (Document Object Modal).

Chrome allows to listen to three specific events that occur to an element in the DOM tree.

• Add/Update of an attribute value
• Change in the element's children (subtree)
• Removal of node (child elements)

How to add listeners?

Open the Dev Tools and select the Elements tab. In the list of DOM nodes, select the node on which you need to add listener.

Once the node is selected, a three-dot menu will appear on the left of the node. Clicking on the dots will open a context menu with a bunch of options.

Now, for adding the listener, Select the "Break on" option and then the type of event. Once selected, chrome will listen to changes to that particular element and stop JS execution at the line of code which modifies the selected node.

Once the breakpoint is hit, you will get to see all the contextual information and memory snapshot, which can be used in identifying the issue source.

Preview (breaking on subtree modification):

If you want to try it out yourself, head over to the repo below. It has the file that is shown in the Video. Clone the repo and play around :)

Direct Link: Lessons: Detecting Element Updates