前言

用途：
如果你是前端开发人员，F12可以帮你定位元素，直接修改页面…
如果你是网页测试人员，F12可以帮你定位到指定的元素进行点击功能测试，post接口测试需要传递的参数在这里也可以看到

一、F12调试参数详解

1.Elements：

查看当前页面的样式（界面html和Data）结构，以及一些样式或属性，方便修改页面的样式，调试浏览器的兼容性（从此处可以看到各控件的标签、属性和对应的XPATH）

2.Network：

可以用来调试前后台交互性的一些问题，比如ajax之类的请求
主要分为以下几个部分：

Name：

资源名称以及url路径（main/css）

headers：

列出资源的请求url、http方法、响应状态吗、请求头、响应头及它们各自的值、请求参数等等

(1)Request Headers–http请求数据报的头
(2)Response Headers–http响应的头
(3)cookie----指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）
(4)Method–http请求方法（GET或POST）
(5)Status/Text–http状态码（200，OK）
(6)Type–请求资源的类型（html，css，js等）
(7)Query String Parameters–请求参数

Preview:

预览面板，用于资源的预览

Response:

响应信息面板，包含资源还未进行格式处理的内容

Timing:

资源请求的详细信息花费时间

Network里的Preview和Response的结果相似，有什么区别？

Response—网页返回结果（不具有可读性）
Preview–(预览功能)控制台会把发送过来的json数据自动转换成javascript的对象格式
Content-Type的格式有四种：
（1）application/x-www-form-urlencodend(默认)
（2）application/json
（3）text/xml
（4）multipart/form-data