04-Chrome开发者工具使用教程

目录

前言

工具面板组成

使用详解

   Elements(元素)

   Console(控制台)

   Sources(资源)

   Network(网络)：

   Application(应用)

---

前言

• 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的方法保持登录状态