测试工作中浏览器F12工具简单使用介绍
F12常用于网站界面测试、调试，分析网页所出现的问题，查看html元素、查看响应事件等方面。打开一个网页，点击F12，弹出一个窗口，其窗口的功能如下:
元素（Elements）
- 查看元素的代码：点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
- 查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
- 给元素添加断点：在元素的右键菜单中选择断点选项（Break on…），选中之后，当元素被修改（通常是被JS代码修改）时，页面加载会暂停，然后可以查看该元素的属性。元素断点添加之后，可以在右侧栏的DOM Breakpoints页面中看到，这个页面可以看到当前网页的所有元素断点。
- 查看元素的监听事件：元素的右边栏的Event Listener页面，可以查看到该元素的所有监听事件。在开发中，尤其是维护其他人的代码时，会出现不了解元素对应的监听事件，这个时候，可以在这个页面中找到。这个页面不仅能看到对应的事件函数，还可以定位该函数所在的JS文件以及在该文件中的具体位置（行数）。
<!doctype html><!--声明当前文档类型-->
<html><!--网页结构的开始-->
<head><!--描述网页基本信息-->
<meta charset="UTF-8"><!--声明网页编码格式-->
<meta name="Keywords" content="关键字，关键词">
<meta name="Description" content="描述和简介">
<title>测试网站</title><!--网站标题-->
<!--<style>
#baner4{
width:200px;
height:200px;
background:green;
}
.banner3{
width:200px;
height:200px;
background:yellow;
}
</style>-->
<link rel="stylesheet" href="style.css">
</head>
<body><!--可视区域-->
test
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<p>这是一个段落</p>
<!--<div style="width:200px;height:200px;background:red;"></div>-->
<div id="baner4"></div>
<div class="banner3"></div>
<a href="http://www.baidu.com">这是一个超链接</a>
<img src="/usr/local/123.jpg" /><!--图像是单标签-->
<iframe src="www.baidu.com" width="400" height="400"></iframe><!--内嵌元素-->
<ul><!--无序列表-->
<li>coffee</li>
<li>juice</li>
<li>milk</li>
</ul>
<ol><!--有序列表-->
<li>coffee</li>
<li>juice</li>
<li>milk</li>
</ol>
</body>
</html>
控制台（Console）
- 当网页的JS代码中使用了console.log( )函数时，该函数输出的日志信息会在控制台中显示。日志信息一般情况下是测试开发工程师在测试调试时启用，而在正式上线后，一般会将console.log( )函数去掉。
- 在测试界面时，如果出现Bug问题，一般情况下会在这栏展示，查看调试日志信息或者异常错误信息，然后前端开发工程师根据具体问题来调试，进行解决问题。
源代码（Sources）
- 当前打开的网页界面所涉及到的所有源代码都会出现在该栏，包括：样式、css、图片、js文件等。
网络（Network）
- Name/Pat：资源名称以及URL路径（main.css）
- Method：Http请求方法(GET或者POST)
- status/Text：Http状态码/文字解释（200，ok）
- Type ：请求资源的MIME类型，MIME是Multipurpose Internet Mail Extensions (html,css,js等)
- Initiator：解释请求是怎么发起的，有四种可能的值
1.Parser ：请求是由页面的html解析时发送
2.Redirect：请求是由页面重定向发送
3.script ：请求是由script脚本处理发送
4.other ：请求是由其他过程发送的，比如页面里的Link链接点击
- size/content：size是响应头部和响应体结合的大小，content是请求解码后的大小
功能介绍
-
第一个按钮：停止和开启按钮，默认是开启抓包
-
第二个按钮：清空抓包记录
-
第三个按钮：过滤器，可以通过搜索想要的关键字
-
第四个按钮：保留日志（建议必须勾上，不然有些跳转页面无法抓取）
-
第五个按钮：停用缓存
-
第六个按钮：弱网模拟
抓包过程
-
在页面上把所有前置操作做完
-
在F12里面清除掉之前的抓包记录
-
开始抓包
-
进行目标操作（查询）
-
停止抓包
抓包信息
-
请求网址：包的网络地址
-
请求方法：发包方式
-
状态代码：http状态码
- 载荷：前端传递给服务器的信息
- 响应：服务器返回给前端的结果信息
