Chrome DevTools：更清楚地排查 CSS 与加载问题

从一个具体的调试问题开始

Matthias Rohmer 于 10 月 20 日发布的十一月回顾，适合遇到弹层位置不对、预加载似乎没有效果的开发者。无需一次采用所有功能：选一个有问题的页面，沿对应面板检查即可。本推荐依据官方文章与仓库文档整理，本站没有实测这些浏览器新功能。

看清锚点元素应该放在哪里

Elements 中新的 position-area 编辑器，把锚点定位声明变成可选择的网格。下图同时展示锚点、被定位的卡片与位置网格，帮助读者在修改 CSS 前理解当前选中的区域。

可以找一个已有的锚点定位元素，只改一个区域，再用窄视口检查。这是本站建议的小练习，不是公告中的测量结果；保留原值，便于随时撤销。

先读警告，再决定是否改服务器

Network 面板现在会解释：启用 Disable cache 时，为什么忽略 Early Hints 中的预加载。这让开发者能先检查一个明确条件，而非直接归咎于生产响应。更新还介绍了本地覆盖与分析状态的保留；它们是调试便利性，并不证明网站加载速度已经提升。

智能体访问需要单独判断

文章链接的 Chrome DevTools MCP 文档介绍了面向编码智能体的 CSS 检查与浏览器调试，同时说明客户端可以读取或修改浏览器数据，正式支持 Chrome 与 Chrome for Testing，并提供使用统计和 CrUX 相关控制。连接私人浏览器前应读清配置；功能公告不会自动授予智能体访问登录会话的权限。