基于测试维度，讲谷歌浏览器哦开发者工具和抓包工具，上篇
- 编写目的
- 基于测试维度，使用抓包工具的作用
- 基于测试维度，对谷歌浏览器开发这工具F12原理及使用的讲解
- Fiddler常见操作讲解
- 测试使用开发者工具、抓包工具的目的
- 查看隐藏字段。
- 了解协议内容，以便展开接口测试和性能测试。
- 检查数据加密。
- 定位bug原因。
- 造测试数据。
- 模拟场景，如弱网环境、手机样式切换等。
- 元素定位，元素修改，以便展开UI自动化测试以及检查前端兼容性问题。
- 拦截请求，篡改数据并请求
（注：具体场景会在工具使用说明中讲解）
- 谷歌浏览器的开发者模式说明
1.打开开发者工具
1）F12打开开发者工具
2）Ctrl+Shift+I
2.元素模块(Elements)
1）该模块作用主要是展示该页的html元素
2）可通过开发者工具左上角按钮定位该页某个图片、按钮、文本等的元素信息
3）对元素属性进行编辑，以便检查兼容问题
3.控制台模块(Console)
控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息（如：console.count 计算代码被执行的次数）
4.源代码模块(Sources)
该页面用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
5.网络模块(Network)
从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
测试常用功能：
1）录制、清除。
2）图片大小、请求耗时、接口请求状态等。
①对于status：
1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求
3）查看接口具体资源详情。
①请求方式、url、路径等
②查看http头信息
③请求参数
④响应
可前往www.json.cn 进行json格式化，以便查看
6.性能模块(Performance)
使用 Chrome DevTools 的 Timeline 面板可以记录和分析您的应用在运行时的所有活动。 这里是开始调查应用中可觉察性能问题的最佳位置。
7.内存模块(Memory)
该面板主要能做：
使用 Chrome 的任务管理器了解您的页面当前正在使用的内存量。使用 Timeline 记录可视化一段时间内的内存使用。使用堆快照确定已分离的 DOM 树（内存泄漏的常见原因）。使用分配时间线记录了解新内存在 JS 堆中的分配时间。
8.应用模块(Application)
该面板主要能做：
查看和修改本地存储与会话存储；检查和修改 IndexedDB 数据库；对 Web SQL 数据库执行语句；查看应用缓存和服务工作线程缓存；点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。
9.安全模块(Security)
该面板主要能做：
使用 Security Overview 可以立即查看当前页面是否安全；检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。
10.审核模块(Audits)
对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。