Web Debugging: Watching Element Changes

Recently, I was debugging a regression where I wanted to watch change’s in an element’s property at runtime. Specifically, I wanted to watch the URL change when I select different colors in Tesla’s customizer. By using the Inspect Element tool, I can find the relevant image in the tree, and then when I pick aContinue reading “Web Debugging: Watching Element Changes”


This content originally appeared on text/plain and was authored by ericlaw

Recently, I was debugging a regression where I wanted to watch change’s in an element’s property at runtime. Specifically, I wanted to watch the URL change when I select different colors in Tesla’s customizer. By using the Inspect Element tool, I can find the relevant image in the tree, and then when I pick a different color in the page, the Developer Tools briefly highlight the changes to the image’s attributes:

Unfortunately, you might notice that the value in the xlink:href property contains a ... in the middle of it, making it difficult to see what’s changed. I noted that the context menu offers a handy “Break on” submenu to break execution whenever the node changes:

…but I lamented that there’s no Watch attribute command to log the changing URLs to the console. Mozillian April King offered a helpful snippet that provides this functionality.

After selecting the image (which points Console variable $0 at the element), type the following in the Console:

new MutationObserver(i => console.log(i[0].target.attributes['xlink:href'])).observe($0,
{ attributes: ['xlink:href']});

This simple snippet creates a MutationObserver to watch the selected element’s xlink:href attribute, and every time it changes, the callback writes the current attribute value to the console:

Cool, huh?

Thanks, April!

-Eric


This content originally appeared on text/plain and was authored by ericlaw


Print Share Comment Cite Upload Translate
APA
ericlaw | Sciencx (2022-12-01T21:23:19+00:00) » Web Debugging: Watching Element Changes. Retrieved from https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/.
MLA
" » Web Debugging: Watching Element Changes." ericlaw | Sciencx - Friday September 25, 2020, https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/
HARVARD
ericlaw | Sciencx Friday September 25, 2020 » Web Debugging: Watching Element Changes., viewed 2022-12-01T21:23:19+00:00,<https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/>
VANCOUVER
ericlaw | Sciencx - » Web Debugging: Watching Element Changes. [Internet]. [Accessed 2022-12-01T21:23:19+00:00]. Available from: https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/
CHICAGO
" » Web Debugging: Watching Element Changes." ericlaw | Sciencx - Accessed 2022-12-01T21:23:19+00:00. https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/
IEEE
" » Web Debugging: Watching Element Changes." ericlaw | Sciencx [Online]. Available: https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/. [Accessed: 2022-12-01T21:23:19+00:00]
rf:citation
» Web Debugging: Watching Element Changes | ericlaw | Sciencx | https://www.scien.cx/2020/09/25/web-debugging-watching-element-changes/ | 2022-12-01T21:23:19+00:00
https://github.com/addpipe/simple-recorderjs-demo