你的网页被广告吃掉了多少CPU和流量，今天DevTools把这件事彻底透明化了

你的网页被广告吃掉了多少 CPU 和流量，今天 DevTools 把这件事彻底透明化了

每次页面跑慢了，你怀疑是广告，但从来找不到数据支撑——Network 面板里全是数字但分不清哪个请求属于广告，哪个属于业务代码。这种靠猜的调试方式从今天起结束了：Chrome 153/154（2026年10月 DevTools 更新）直接在 Application 面板里新增了一个 Ads 子面板，把广告对页面的影响拆得清清楚楚。

四个实验性指标，一眼看穿广告消耗

这个新面板的核心是四个实验性指标，直接来自 Chrome 用户体验报告（CrUX）的广告维度：

• 视口广告密度（Viewport ad density by area）：广告面积占视口的百分比，整数 0~100
• 视口广告数量（Viewport ad count）：当前可见广告个数
• 广告总 CPU 时间（Total ad CPU time）：页面生命周期内广告脚本消耗的 CPU，毫秒级
• 广告总网络字节数（Total ad network bytes）：广告相关请求的网络流量

这四个数字以前只能靠第三方工具或者手动算，现在直接在 DevTools 里就有。

Before：开发者想搞清楚「广告到底占了我多少流量」，只能靠 Network 面板过滤 document.write、googlesyndication.com、doubleclick.net 这些特征域名，再凭经验估算。CrUX 的四个实验指标虽然 9 月份就发布了，但也只是服务端宏观数据，看得到全局影响但看不到具体是哪个脚本。

After：打开 DevTools → Application → Ads，所有广告消耗一目了然。

按广告元素细分 CPU 和网络

除了四个宏观指标，面板还把 CPU 和网络消耗拆到了具体的广告元素级别。你能看到页面上哪个 <iframe> 里的广告消耗最多，哪个资源占的带宽最大。这才是真正的瓶颈定位——不是全局数据，是具体到元素的数据。

广告脚本表：直接跳到来源

面板底部有一张广告脚本表，列出主帧内所有追踪到的广告脚本。每条记录包含脚本 ID 和来源信息（provenance），点击即可跳转到 Sources 面板定位对应代码。这张表使用增量（Delta）模式：每次调用 Ads.getAdScripts 只返回新增的脚本，避免轮询时重复返回历史数据，Payload 最小化。

同时面板内置了一个切换开关，一键高亮页面上所有被标记为广告的 <iframe>，再也不用手动在 Elements 面板里一个个找。

用 CDP 接口查这些数据

通过 Chrome DevTools Protocol 的 Ads 域，可以把广告指标接入自动化监控：

// 查询当前页面的广告指标
const metrics = await cdp.send('Ads.getAdMetrics', {});
console.log({
  viewportAdDensityByArea: metrics.metrics.viewportAdDensityByArea, // 整数 0-100
  viewportAdCount: metrics.metrics.viewportAdCount,
  totalAdCpuTime: metrics.metrics.totalAdCpuTime, // 毫秒
  totalAdNetworkBytes: metrics.metrics.totalAdNetworkBytes // 字节
});

// 增量查询广告脚本（Delta 模式，不重复）
const scripts = await cdp.send('Ads.getAdScripts', {});
console.log(scripts.newScripts.map(s => s.provenance));

Chrome 153/154 稳定版已内置 Ads.getAdScripts 和 Ads.getAdMetrics 两个协议方法，可以接入 CI 流水线做广告性能回归检测。

下一步

打开 Chrome 153+ 的 DevTools → Application → Ads，检查你的页面有没有异常的 CPU 或流量数字。如果广告消耗过高，用 Sources 面板里的脚本表定位问题脚本，和广告供应商对线时带上具体数据而不是靠感觉。也可以把 CDP 调用集成到自动化测试里，每次发布前跑一遍，确保广告消耗不超过预期阈值。