一、小按钮和下面板---调试面板

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，。

转载于:https://www.cnblogs.com/camille666/p/debug_tool_1.html