1、点击该按钮,点击页面上的某元素,就会显示选中元素的Html代码和样式。
2、手机模拟,用于调试移动端页面。点击该手机图标和点击第7点中的Enable Emulation按钮效果一样,都可以打开移动端调试窗口。
3、清除日志Clean Console log
点击该按钮,可以清除控制台的日志。
4、过滤器Filter
可以用正则式查看Erros(错误),Warnings(警告),Info(信息),Logs(日志),Debug(调试)信息,过滤调试过程的错误警告信息等记录,方便查找某记录。
5、保存日志Preserve log
勾选此项,可以在重新加载或者浏览的过程中保存原有的日志。
6、Console面板
主要是报错和测试,$0直接获取所点击的元素。
7、Emulation面板
(1)Device,改变分辨率和机型;
(2)Media,改变CSS媒体类型,有的样式在电脑端和移动端会呈现不同的样子;
(3)Network,伪装操作环境;
(4)Sensor,模拟手机的倾斜等一系列行为。
8、Rendering面板
(1)Enable paint flashing,高亮重绘区域;
(2)Show layer borders,展示图层边界;
(3)Show FPS meter,展示刷新率;
(4)Show scrolling perf issues,。