F12开发者工具

一、概述

F12开发者工具可用于查看HTML元素、响应事件、网络状态……测试人员和前端开发常用来快速定位调试分析问题。

调试用到最多的功能通常就四个：元素（Elements）、控制台（Console）、源代码（Sources）、网路（Network）

Elements：可用于查看或修改HTML元素的属性、CSS属性、监听事件、断点；

Console：一般用于执行一次性代码，查看JS对象，查看调试日志信息或异常信息；

Sources：查看HTML、CSS、JS的源代码，调试JS代码；

Network：查看URL、status、type、size、time、waterfall，弱网模拟

二、细说

1.元素（Elements）

查看、修改元素代码

通过箭头图标选择页面中的元素，可查看对应的元素属性（properties），双击可以修改（修改只会对当前页面渲染生效）。

还有些功能，见名知意。

2.控制台（Console）

查看JS对象及其属性；执行JS语句；查看控制台日志：当网页的JS代码中使用了console.log()函数时，该函数输出的日志信息会在控制台中显示。

3.源代码（Sources）

 

 tree-源文件、页面代码设置断点、右侧断点设置栏（（继续）运行、单步跳过、单步进入等）

4.网络（Network）

网络请求设置（请求开关、清除列表、过滤条件等）、下方的请求信息表

 列表就是要分析的对象了，可以看到URL，响应状态码，响应数据的类型、大小和时间，如果请求过多，可用filter（漏斗图标）进一步筛选，支持正则表达式搜索。

waterfall能分割重要的请求耗时，鼠标移动到相关区域时可以看到，各种请求阶段耗时在页面上有简单的数据标识，在性能分析时可帮助判断（以后深入了再说）。

三、其他用途

复制某些页面上不可复制的文字；

下载不能保持的图片；

（都是避开站点的限制，找到他们的本源所在，然后编辑操作，原理差不多）

……