F12调试窗口
F12调试窗口
前言
用途：
如果你是前端开发人员，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
3.console：
控制台，在这里可以看到页面上出现的错误提示信息，以及可以在这里调试js
4.Sources:
主要用来调试js和查看源代码
二、操作
1.窗口位置设置
可以设置显示为：左边框、下边框，在新窗口打开显示
2.怎么清除请求信息
主要用于排除其他历史请求的干扰，分析单个点击动作会触发哪些请求
一般操作是，先清除一把请求，再点击要分析的按钮