前言
- Chrome开发者工具是谷歌浏览器自带的一款开发者工具，它可以给开发者带来很大的便利，作为一个测试工程师，熟练使用这个工具会也是必须的，接下来我们一起学习吧。
- 打开开发者工具F12 或 Ctrl + Shift + I
工具面板组成
- Elements(元素)：用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。css可以即时修改，即时显示。
- Console(控制台)：控制台一般用于执行一次性代码，查看JavaScript对象，查看调试日志信息或异常信息。还可以当作Javascript API查看用。
- Sources(资源)：用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，此外最重要的是可以调试JavaScript源代码，可以给JS代码添加断点等。
- Network(网络)：记录当前页面请求加载信息，并记录各个请求资源信息（包括状态、资源类型、大小、所用时间等）
- Performance(性能)：用来对当前页面进行性能分析。
- Memory(内存)：用于分析当前页面内存消耗。
- Application(应用)：记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据等。
- Security(安全)：判断当前网页是否安全。
使用详解
Elements(元素)
- 选择元素：做web自动化元素定位经常会用
- 手机模式：可以设置手机型号、分辨率、显示百分比、是否在线等
Console(控制台)
- web自动化测试使用js定位时可以在这里调试是否定位到元素
Sources(资源)
- 可以在这个面板里面调试你的JS代码
Network(网络)：
- 平时工作中经常用到的，如下图介绍
Application(应用)
- 查看cookies，做web自动化验登录证码搞不定时，可以使用添加cookies的方法保持登录状态
