Show duplicate IDs in chrome dev console

Question

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?

Answer 1

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);