F12的用法

F12在Web测试中十分重要，可以定位元素（UI自动化常用），查看网页响应时间/数据（定位BUG，测单页面响应时间→性能）

Elements

点击这个按钮，将光标移至“Google”图片位置并点击，右侧的F12控制台就会选中对应的HTML标签（......可以修改页面元素的属性）。

重点：在“标签”位置右键→Copy→Copy Xpath （即可获取元素的定位）

 

Console和Sources

这个两个用的比较少，console会打印请求，返回的结果以及数据，可以有一定的分析作用。

可以判断：js错误，数据错误

 

Network

Headers:头信息	请求头、请求体，响应头、响应体 请求数据： Query String Parameters → get传参的请求数据 Form Data → post传参的请求数据
Preview：预览	返回数据预览
Response：响应报文	格式可以是HTML，json.... 依据响应报文，判断是否为bug是哪端的
Timing：时间	这个页面请求到响应的时间

注意：

 红色为录制状态，会将浏览器的所有操作显示在控制台

点击可以清除控制台所有的内容