Show duplicate IDs in chrome dev console

user_2402595 0
Viewed 1242

Is there a way to get the chrome dev console to warn you about duplicate IDs on a page? I can't tell you how many times I've been stumped by an issue only to finally realize that 2 elements are sharing the same id and messing up the code. Does anyone have any other suggestions on how to catch things like this as well that chrome doesn't seem to warn about by default?

google-chrome-devtools html javascript
2 Answers

Running this in devtools will print them out

const dupes = Object.entries(
    [...document.querySelectorAll("[id]")]
      .map((x) => x.id) /* get all ids */
      .reduce(
        (acc, id) => ({ ...acc, [id]: (acc[id] || 0) + 1 }),
        {}
      ) /*count them*/
  ).filter(([_key, val]) => val > 1); /* find the ones repeating more than once */
  
console.warn(dupes);
user_80012310

Chrome's developer's console doesn't provide a feature for doing that.

However, there is a Chrome Extension that can do it for you.

user_142512210
Related