Endjin - Home

Amazingly Useful Chrome Developer Tips: #1 Inspecting dynamically created DOM elements

by Alice Waddicor

I recently needed to style a dropdown menu which was part of a set of elements inserted into the DOM by a third party JavaScript library (CK Editor) when another element was clicked. To style the dropdown, I needed to have a look at the DOM elements for the dropdown. However, this was tricky because they weren’t present when the page loaded.

The usual method of inspecting elements didn’t work here. Right clicking had apparently been disabled on elements within the drop down menu. Using the context button on the keyboard as an alternative to right clicking didn’t work – the element wasn’t selected.

Here’s how I eventually managed to track the dropdown menu down.

1. Find a DOM element which you think becomes a parent element of the dynamically created element you want to inspect

2. Right click on the element, and select Break on > Subtree modifications

break on subtree modifications

3. Back on the page itself, trigger the insertion of the dynamically created DOM element by hovering, clicking, or whatever you need to do

4. You will be taken to the Script panel of Chrome Developer Tools, where you can step through the JavaScript responsible for creating the element (F10 steps through)

5. Hover over the variables in the script to get more information about them

6. When you see a likely looking one, right click, and select Reveal in elements panel

Reveal in elements panel

This will reveal the element.

Choosing the right variable in someone else’s minified JavaScript is not easy, so it might take a bit of experimentation!

Happy inspecting.

There’s more information about JavaScript debugging on the Chrome Developer site.

About the author

Alice is a 3rd year apprentice at endjin, providing engineering services using the Microsoft Cloud. She comes from a writing background, and re-trained because of an interest in technology, particularly data processing, information extraction, and automation.