1. 使用开发者工具检查元素
- 在Chrome中按`Ctrl+Shift+I`打开开发者工具→选择“Elements”面板→鼠标悬停页面元素→自动高亮对应HTML标签（如点击按钮查看button代码）。
- 通过右键点击文字→选择“Inspect”→直接跳转到该元素的DOM节点→查看绑定事件和样式（如发现隐藏的`display:none`属性）。
2. 通过Console命令提取信息
- 在Console输入`document.querySelector('.header-title').innerText`→直接获取标题文本→复制到剪贴板（避免手动复制错误）。
- 输入`Array.from(document.querySelectorAll('img')).map(e=>e.src)`→批量提取所有图片URL→生成数组格式（方便保存或分析）。
3. 抓取动态加载内容
- 在Network面板→刷新页面→筛选“XHR”请求→找到返回JSON数据的接口（如`api/products`）→复制URL用于API测试。
- 通过Console输入`copy(document.querySelector('price').textContent)`→将价格数据存入剪贴板→粘贴到Excel表格（实现快速数据采集）。
4. 验证元素唯一性定位
- 在Elements面板→右键点击目标元素→复制XPath（如`//body/div[3]/div[2]/button`）→测试在Console执行`document.evaluate()`方法→确保路径准确。
- 通过添加自定义属性`data-extract="true"`→在Console输入`document.querySelectorAll('[data-extract]')`→快速定位标记元素（适合复杂页面分析）。
5. 处理框架内嵌内容
- 遇到iframe时→在开发者工具切换到“Frames”面板→选择内层框架→执行相同元素检查操作（如提取地图弹窗中的坐标数据）。
- 通过命令行启动Chrome→添加参数`--disable-site-isolation-trials`→解决跨域限制导致的元素不可见问题（适合多域名嵌套页面）。
6. 自动化脚本提取数据
- 在Console输入`javascript： (function() { let links = document.querySelectorAll('a'); return Array.from(links).map(e=>e.href); })()`→一键获取所有链接地址→生成可下载的TXT文件（便于离线分析）。
- 通过“Scraper”扩展→录制鼠标点击操作→自动生成提取规则（如循环抓取表格行数据并存储为CSV）。