浏览器提示存在重复ID #log-in-email，但项目中未找到重复项

浏览器提示[DOM] Found 2 elements with non-unique id #log-in-email;但本地源码搜不到重复，大概率是运行时的问题，按下面的步骤排查：

• 动态渲染导致重复生成
  比如用框架（React/Vue）循环渲染组件、或者原生JS动态创建元素时，硬编码了固定ID。比如列表循环里直接写id="log-in-email"，每循环一次就生成一个相同ID的元素。检查组件的渲染逻辑，把ID改成动态唯一的，比如id={log-in-email-${uniqueKey}}（框架）或者拼接随机数/索引（原生JS）。

• 组件/模板被多次挂载
  如果这个ID所在的组件（比如登录弹窗）被多次实例化或挂载到页面上，每次都会生成一个带相同ID的元素。要么给组件的ID加动态后缀，要么如果不需要ID做表单关联/锚点，直接用类名替代ID。

• 浏览器缓存残留旧代码
  本地代码已经改了，但浏览器缓存了旧的HTML/JS文件，导致运行的还是带重复ID的旧代码。按Ctrl+Shift+R强制刷新页面，或者直接清除浏览器的缓存后再打开页面。

• iframe嵌入内容带重复ID
  页面里如果有iframe，浏览器会把iframe内部的DOM也算进全局DOM树，要是iframe里的内容也用了log-in-email这个ID，就会触发提示。检查页面内所有iframe的源码，看看有没有重复的ID。

• 直接查看渲染后的实际DOM
  别只搜本地源码，打开浏览器开发者工具（F12），在Elements面板按Ctrl+F搜索log-in-email，找到两个重复ID的元素，看它们的父节点结构，就能反推是哪个组件或逻辑生成的重复元素。

• 检查拼写或搜索范围
  确认搜索本地代码时是完全匹配log-in-email，有没有漏看大小写、连字符？比如是不是搜成了login-email（少了连字符）导致没找到重复项。

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