步骤一：使用开发者工具检查元素唯一性
按 `Ctrl+Shift+I` 打开控制台 → 点击“Elements”标签 → 右键点击疑似重复模块（如广告位） → 选择“Copy” → “Copy selector”。此操作可查看CSS选择器路径（如`wrapper > .ad-banner:nth-child(2)`），但需注意动态加载内容（建议刷新页面后对比），或通过命令行快速定位：
bash
在控制台执行JavaScript查询重复元素
document.querySelectorAll('.ad-unit').length

步骤二：通过Lighthouse检测页面性能问题
进入Chrome开发者工具 → 切换到“Lighthouse”面板 → 点击“Generate report” → 查看“HTML”部分是否有“Duplicate Content”警告。此报告会标记出重复的div或``标签（如多处嵌入相同广告代码），但需结合SEO评分分析（建议优先处理高优先级问题），或通过扩展程序监控：
javascript
// 在扩展中监听DOM变化并记录重复节点
chrome.runtime.onInstalled.addListener(() => {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
const duplicates = document.querySelectorAll('.repeated-section').length;
console.log('重复模块数量:', duplicates);
});
});
observer.observe(document.body, {childList: true, subtree: true});
});

步骤三：利用缓存机制判断服务器是否返回相同内容
在控制台执行 `Ctrl+R` 强制刷新 → 观察网络请求状态码（如`304 Not Modified`）。此现象表示浏览器缓存了未变更资源（如CSS文件），但需确认是否为刻意优化（建议检查`Cache-Control`头），或通过清除缓存验证：
bash
使用命令提示符禁用缓存并重新加载页面
chrome.exe --disable-cache --disk-cache-size=0

步骤四：检查JS动态生成的内容是否导致重复
在控制台执行 `window.location.reload(true)` → 观察控制台日志（如`console.warn`提示）。此操作可捕捉前端代码错误（如AJAX重复请求同一数据），但需结合业务逻辑分析（建议添加唯一标识符），或通过Sources面板断点调试：
javascript
// 在控制台中标记重复渲染的元素
document.querySelectorAll('.product-card').forEach((el, index) => {
if (document.querySelector(`.product-card:nth-of-type(${index + 1})`)) {
el.style.border = '2px solid red';
}
});

步骤五：通过对比不同页面结构验证模块复用情况
打开两个相似页面（如商品详情页和列表页） → 分别复制HTML源码 → 使用文本对比工具（如`diffchecker.com`）分析差异。此方法可直观发现共用组件（如导航栏代码完全相同），但需注意语义化标签（建议使用article区分主体内容），或通过审计工具自动化检测：
bash
使用网站审计工具批量分析页面相似度
screaming-frog-seo-spider/license-key.lic -u https://example.com -o audit.xml