Skip to content
Alice Waddicor By Alice Waddicor Software Engineering Apprentice III
Amazingly Useful Chrome Developer Tips: #1 Inspecting dynamically created DOM elements

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

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

  2. 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)

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

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

Reveal in elements panel

This will reveal the element.

The Introduction to Rx.NET 2nd Edition (2024) Book, by Ian Griffiths & Lee Campbell, is now available to download for FREE.

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

Power BI Weekly is a collation of the week's top news and articles from the Power BI ecosystem, all presented to you in one, handy newsletter!

Happy inspecting.

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

Alice Waddicor

Software Engineering Apprentice III

Alice Waddicor

Alice was the second person to complete our Apprenticeship programme.

Alice came from a technical writing background, and re-trained because of an interest in technology, particularly data processing, information extraction, and automation.

During her apprenticeship Alice became passionate about Tech for Good and became an environmental campaigner.

Alice worked at endjin between 2014-2017.