求可直接在浏览器控制台运行的检测DOM重复ID的轻量ES6代码片段

以下原生ES6代码无任何依赖，复制到浏览器控制台即可运行，会自动输出当前页面所有重复ID及对应元素，不会修改页面原有内容：

// 基础版重复ID检测脚本
const idCountMap = new Map();
// 收集所有带ID属性的元素
document.querySelectorAll('[id]').forEach(el => {
  const id = el.id;
  if (!idCountMap.has(id)) {
    idCountMap.set(id, []);
  }
  idCountMap.get(id).push(el);
});
// 过滤出出现次数大于1的重复ID
const duplicateIds = Array.from(idCountMap.entries()).filter(([_, elements]) => elements.length > 1);
// 格式化输出结果
if (duplicateIds.length === 0) {
  console.log('✅ 当前页面未检测到重复ID');
} else {
  console.warn(`⚠️ 检测到 ${duplicateIds.length} 个重复ID：`);
  duplicateIds.forEach(([id, elements]) => {
    console.log(`ID: "${id}", 出现次数: ${elements.length}，对应元素:`, elements);
  });
  // 把重复ID数组返回，方便后续自定义处理
  return duplicateIds;
}

使用说明 #

• 直接复制全部代码粘贴到浏览器DevTools的Console面板回车即可运行
• 检测到的重复ID会以警告形式输出，点击打印的DOM元素即可直接在Elements面板跳转定位
• 脚本仅在当前页面生效，刷新页面后需要重新运行

如果需要直观看到所有重复ID对应的元素位置，可以使用带高亮的增强版本：

// 增强版：带重复元素高亮的检测脚本
const idCountMap = new Map();
document.querySelectorAll('[id]').forEach(el => {
  const id = el.id;
  if (!idCountMap.has(id)) idCountMap.set(id, []);
  idCountMap.get(id).push(el);
});
const duplicateIds = Array.from(idCountMap.entries()).filter(([_, els]) => els.length > 1);
if (duplicateIds.length === 0) {
  console.log('✅ 当前页面未检测到重复ID');
} else {
  console.warn(`⚠️ 检测到 ${duplicateIds.length} 个重复ID：`);
  duplicateIds.forEach(([id, els]) => {
    console.log(`ID: "${id}", 出现次数: ${els.length}，对应元素:`, els);
    // 给重复元素添加红色外边框高亮
    els.forEach(el => el.style.outline = '2px solid #ff0000');
  });
  return duplicateIds;
}
// 运行下面的代码即可清除所有高亮样式：
// document.querySelectorAll('[style*="outline: 2px solid #ff0000"]').forEach(el => el.style.outline = '');

内容的提问来源于stack exchange，提问作者Anomaly