断图是网页上最明显的错误之一——但在 QA 期间很容易忽略，因为它们无声地失败。断图查找器捕获所有这些。激活时，该工具遍历 DOM 查找每个 <img> 元素（检查 naturalWidth / naturalHeight 以检测失败的加载）和每个 CSS 背景图像 URL（用新鲜的 Image() 探测每个以验证它加载）。结果分类为 OK / 断图 / 加载中，在顶部显示统计计数的可过滤列表中呈现。每个条目显示 URL、类型（img 或 CSS bg）、大小（如果已加载）和 alt 文本（如果存在）。断图用红色突出显示，有一个"定位"按钮可以将元素滚动到视图中并在其周围闪动红色轮廓。"复制断图 URL"按钮一次获取所有失败的 URL，供错误报告复制/粘贴。无需访问后端日志即可在任何页面上工作——一个快速的视觉 QA 门。
检查每个 <img> 元素以及计算样式中的每个背景图像 URL。数据 URI 和 blob URL 被跳过（它们总是有效的）。
一目了然的统计显示页面图像的健康状况。当异步探针解析时，数字实时更新。
在断图、全部和 CSS 背景标签之间切换。保持专注于需要修复的内容。
单击任何图像上的定位以滚动到页面上的元素并在其周围闪动红色突出显示。
一键复制断图 URL 列表——粘贴到错误报告或与后端团队共享。
上限为 500 个 CSS 背景扫描，以保持内容繁重页面上的 UI 响应性。
在部署前在暂存环境上运行，以捕获由重构、重命名资产或 CDN 迁移引入的 404。
定期扫描实时页面——断图会损害 SEO 和用户信任，它们通常会滑过自动化测试。
当编辑上传图像时，有些可能永远不会到达最终 URL。扫描以捕获死链接。
如果您依赖外部图像服务（头像、热链接的产品照片），定期扫描以捕获中断。
将资产移动到新 CDN 或存储桶后，扫描每个关键页面以验证迁移没有破坏任何内容。
单击 DevSuite Pro 停靠栏中的断图图标。打开一个面板并自动扫描页面。
面板顶部的统计显示总计/OK/断图/加载中。如果断图 > 0，切换到断图标签以查看它们。
单击任何行上的定位以将其元素滚动到页面上的视图中——红色轮廓在其周围闪动 2 秒。
单击复制断图 URL 以获取完整列表——粘贴到工单、聊天或后端调查中。
后端修复后，单击重新扫描页面以验证所有图像现在都正确加载。
