Debugging problems caused by multiple DOM elements with the same id


Hi everybody,
we’ve had a few bugs that were caused by DOM element ids not really being unique.

To make it easier to debug those, as of #6017, there is a keyboard shortcut - Ctrl+Shift+Z - available in the development environment, that outputs all currently duplicate ids in the current DOM into the browser’s console.

Example output:

duplicate id test 4 [div#test.panel.panel-default, div#test.panel.panel-default, div#test.panel.panel-default, div#test.panel.panel-default, ...]

(that means there are 4 distinct elements with id="test", and the array of elements can be used to find those (at least in chrome inspector))

For those unitiated, duplicate ids in DOM are a problem because the assumption is that an id is always unique, and for example $('#test') will always find just one element, and the selection (which one) can be considered completely arbitrary. That leads to problems like for example page.replace_html replacing the content of an invisible tab instead of the currently visible one, etc.