Safari开发者工具新增了CSS网格布局分析功能，可以直观展示网格轨道和间距，帮助开发者更高效地调试和优化网页布局。这一改进增强了Web Inspector工具对现代CSS布局的支持。

Safari开发者工具新增CSS网格布局可视化功能

WebKit团队于2026年1月14日宣布，Safari Technology Preview 235版本推出了全新的CSS Grid Lanes（网格通道）可视化工具。这项创新功能旨在帮助开发者更直观地理解CSS Grid Lanes布局模式。

核心功能亮点： 1. 网格顺序可视化 - 新增"Order Numbers"功能，可显示网格项在HTML中的原始顺序 - 支持标准CSS Grid、Subgrid和新型Grid Lanes布局 - 延续了Safari 16.0以来Flexbox检查器的排序标注功能

2. Grid Lanes特性解析

• 实现砖石式(masonry)布局，支持内容按单方向（列或行）排列
• 允许不同宽高比内容自然堆叠，无需强制裁剪
• 新增flow-tolerance属性控制内容流位置容差

3. 开发者工具优势

• 无限制同时激活多个布局覆盖层
• 清晰区分Flexbox中的剩余空间与间隙
• 可自定义覆盖层颜色以适应不同网站背景
• 完整列出页面所有网格/弹性容器

应用场景： - 照片墙等不规则内容排版 - 动态加载内容布局 - 无障碍访问优化（键盘导航/屏幕阅读器支持）

开发者可通过Safari Technology Preview 235体验该功能，WebKit团队同时开放了演示案例和详细文档供参考。这项改进延续了Safari开发者工具在布局调试方面的精细化设计理念，为CSS Grid Lanes这一新型布局模式提供了重要的可视化支持。

总结评论内容：

1. 对Safari浏览器工具的评价：

• 开发者工具优秀（除JavaScript调试外）： "Safari continues to have the best developer tools, so long as you don't need to debug JavaScript."
• 持续进步获得认可： "It's so good to see Safari steadily making progress on being a decent browser."

2. 对CSS Grid Lanes功能的讨论：

• 命名偏好但使用频率存疑： "Regarding CSS Grid Lanes, I find it to be a better name than 'masonry'. I'm not sure how often I'd actually reach for grid lanes."
• 兼容性问题： "The polyfill is not comparible to the native experience. The column width calculation is off."

3. 浏览器市场竞争观点：

• 各浏览器各有优势： "Safari is a fine browser, just as Firefox and Chrome are"
• 对Chrome的批评： "Chrome is the new IE: is a monopoly imposing its quirks and 'standards' on others."

4. 其他评价：

• 简单肯定： "Have a pat on the head, Safari."