Chrome 控制台使用手册专栏【十】Other Panel

217 阅读3分钟

Google版本差异,陆续新增一些新的面板供开发者使用,本文列举一些新面板功能,希望你有所了解,欢迎补充。

传送门 Google 各版本更新记录Blob

New Reporting API pane in the Application panel (99)

使用 Reporting API 窗格监控页面上生成的报告及其状态。帮助您监控页面的安全违规、已弃用的 API 调用等。

Application面板中,向下滚动到Background services部分并选择Reporting API窗格。

image.png

报告部分向您显示在您的页面上生成的报告列表及其状态。单击它以查看报告的详细信息。

Endpoints部分概述了标头中配置的所有端点Reporting-Endpoints

Preview feature: New Recorder panel (97)

记录器面板 用域于记录、回放和测量用户流,是一种预览功能。

切换Recorder面板,若没有面板,请从more tools添加 image.png

image.png

点击录制,输入录制记录名称,输入完毕点击开始Start image.png

执行页面操作输入,面板会有对应的操作记录(事件,以及触发节点DOM),点击结束End 完成一次录制 image.png

完成录制得到一个操作记录时间线,点击Replay重新播放记录,或者Measure Perfomance测试性能 image.png

image.png

可以对记录进行修改,删除步骤或者改变步骤顺序 image.png

工具栏支持新增录制、切换录制、删除录制 image.png

支持修改重新执行的网络环境以及延时 image.png

New CSS Overview panel

使用新的CSS 概览面板来识别页面上潜在的 CSS 进行改进。

打开CSS Overview面板,然后单击捕获概览Capture overview以生成页面 CSS 报告。 image.png

image.png

预览页面使用的颜色、字体信息、媒体查询等,同时标识对应的节点DOM image.png

颜色值还列出色彩对比度,标识满足AAA或者AA image.png

点击样式,可查看使用样式的节点DOM image.png

Lighthouse panel

是谷歌开发并开源的web性能测试工具,用于改进网络应用的质量,可以将其作为一个Chrome扩展程序运行,或从命令行运行。只需要为其提供一个需要审查的地址,Lighthouse就会对页面进行一连串的测试,生成一个有关页面性能的报告。

打开Lighthouse image.png

image.png

点击生成报告Generate report,自动进行页面性能 测试,并生成测试报告单 image.png

可以切换测试指标、或者运行环境(移动端、PC端) image.png

Coverage

监控并统计出网站应用运行过程中代码执行的覆盖率情况。 统计的对象是JavaScript脚本文件与css样式文件,统计结果主要包括文件的字节大小,执行过程中已覆盖的代码字节数,可视化的覆盖率条形图。 根据执行结果可以发现到底哪些尺寸较大的代码文件覆盖率较低,这就意味着这些代码文件中可能存在较多的无用代码。

打开Coverage image.png

点击 按钮进行页面刷新查看代码覆盖率 image.png

生成覆盖率统计报告 image.png