响应式布局排障快照只留必要的几何信息“某台手机上按钮叠了”只能说明现场难看还不够复现。排查跨端布局时截图负责保留视觉现象视口、节点几何信息和少量计算样式才负责把问题还原出来。采集范围收紧到出错区域别把整页 DOM 和文字一起打包带走。现场快照只记录排障所需字段建议记录视口宽高、设备像素比、根字号、目标元素的矩形以及与布局直接相关的display、position、flex、grid、overflow。用户输入、页面正文、完整 UA、请求参数都不应进入这份快照。一个小型采集器const styleKeys [display, position, flex, gridTemplateColumns, overflow]; export function snapshotLayout(element: Element) { const rect element.getBoundingClientRect(); const styles getComputedStyle(element); return { viewport: { width: innerWidth, height: innerHeight, dpr: devicePixelRatio }, rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height }, styles: Object.fromEntries(styleKeys.map((key) [key, styles.getPropertyValue(key)])), }; }真实项目还应设置节点数、字段长度和上传频率上限采集失败不能影响正常页面。重放时用相同的浏览器版本、视口和字体从快照里先验证几何关系再追到 CSS 规则。有边界的可观测性日志越多不等于定位越快。能复现布局问题的最小数据集既减少噪声也避免把用户信息当成调试材料。这个约束应该在探针设计时就写进去而不是事故后再补。