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 :)
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
Direct Link: Lessons: Detecting Element Updates
Top comments (0)