DEV Community

Varun A P ⚡️
Varun A P ⚡️

Posted on • Edited on

10 1 1 1

Chrome DevTools: Detecting Element Changes

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 :)

GitHub logo apvarun / learndevtools

Debug Better With DevTools

Learn Dev Tools

Collection of walk-throughs for learning to use developer tools in the browser. Read more here

Getting Started

Visit https://learndevtools.now.sh/ to learn and try out various features of devtools to help you be more productive at work.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT




Direct Link: Lessons: Detecting Element Updates

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more