什么是F12(Chrome Devtool)开发者工具

它是浏览器自带的一个开发调试工具,因为可以用键盘上的F12快捷键直接启动,所以也可以简称为F12工具。
它的特点:

  1. 简单轻量级,是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。
  2. F12作为浏览器的一部分,是数据收发的一端,抓取到的HTTPS报文是可以得到明文数据的(抓包),类似于抓包工具有Fiddler、Charles(需另外安装)。

如何打开F12工具

多种方式,可任意选择:

  1. F12启动!
  2. ctrl + shift + i 启动!
  3. 鼠标右键选择检查页面启动!
  4. 点击浏览器右上角的菜单(三个小点点) –> 更多工具选项卡 –> 开发者工具

F12工具的设置和常用功能

  1. 点击F12工具的右上角 “三个点” 的按钮,可以选择工具的停靠位置,显示的位置调整:靠右、靠左、靠下或者独立窗口
  2. 设置颜色和语言(chrome)
  3. 进行手机版本的切换,还能选择尺寸和不同的手机型号,预览各模型机的显示效果,适合测试H5页面小程序测试,可以方便在电脑操作和调试,这个预览功能还支持屏幕截图。
  4. 选中要截图的元素范围,按ctrl + shift + p,输入截图,选中合适的功能截图即可。

F12工具的主要面板精讲

元素(Elements)

查看网页元素的代码

映入眼帘的是Html的Dom(Document Object Model)树形结构,计算样式(Computed)找主要数据(字体大小、行高等等)。有稍微接触过Web前端的同学应该都知道,此面板是常用来Debug css的。点击左上角的箭头图标(快捷键ctrl + shift + C)可以在网页上选择要查看的元素,然后帮你定位这个元素相关的代码、属性以及准确位置。

查看CSS样式的属性状态:hov .cls

样式(style)里点击:hov查看指定元素的各个状态,如:active、:hover、:focus等等;点击.cls查看类样式的具体在网页上的展现效果。

修改元素的代码与属性

可以用这个面板来调试前端页面效果,ctrl+F来搜索关键词,进行修改代码、保存代码、预览代码效果等操作。

UI自动化元素的定位

案例场景:找到页面的用户名和密码输入框,点击登录按钮,完成页面的自动化登录操作。
步骤:

  1. 安装selenium工具、UI自动化测试江具、webdriver
  2. 八大元素定位方法-找id name XPath。其中有两种路径,绝对路径:html/body/div[2]/div/form/div[1]/input== 中间节点依赖性不方便用来作为元素定位
    相对路径://input[@name=”phone”]==推荐标签+属性定位/层级文本轴定位。xpath的表达式验证:ctrl + F 搜索你的XPath,查看定位是否准确。
  3. 编码进行自动化操作:Python 或者 Java

控制台抽屉栏

点击最顶部右上角的“三个点” 选择显示控制台抽屉栏,可以看到最底部已经显示出来。其中的功能有很多,有控制台、传感器、网络状况、渲染、动画等等

控制台(Console)

此面板可用来Debug javascript。
点击右上角的设置按钮,常见的用途有保留日志,编写js原生的测试代码。

主要功能:

  1. $0 - 代表现在的DOM
  2. $1,$2,$3 - 选择之前的的DOM
  3. $_ - 回传上一个值
  4. console.table - 列出table 出來, 方便读取
  5. console.time, console.timeEnd - 测效能用的、记录时间
  6. $(‘Selector’) - 內建有jquery 選擇器,效果跟document.querySelector一样,用来调取某个元素的具体内容。可用于爬虫
  7. 执行js代码
  8. document.cookie - 查看或修改cookies信息
  9. document.designMode=”no” - 任意编辑或复制网页上的内容

源代码(Source)

网页静态资源的存放位置。此面板亦可用来Debug javascript,对源码进行端点调试。

网络(Network)

获取网页的全部网络请求与响应数据,抓取分析报文内容,并还有过滤功能帮助我们更快地查找、模拟网速测试性能。

基础功能:

  1. 保留日志/持续记录:开启后,重新加载url或者跳转了页面之后,之前的请求显示资源信息依然会保留下来,不会清空。
  2. 停用缓存:开启后,页面资源不会存入缓存,可以在status栏的状态码看文件请求状态。

请求过滤:

  • Content type: HTML,CSS,JS
  • XHR requests: XMLHttpRequests
  • WS: VebSocket连接

报文过滤:ctrl+F

搜索请求:

  1. 点击搜索按钮打开搜索框
  2. 搜素关键字可以是请求和响应消息头和响应消息体
  3. 大小写敏感:Aa
  4. 关闭搜索框

API接口测试和数据篡改

通过F12工具检查返回的JSON信息是否准确,遇到异常数据报错是否有相应的信息提示:

  1. 选中要测验的报文
  2. 右键点击编辑并转发
  3. 修改要检验的数据
  4. 发送接口请求
  5. 检查响应结果。

结合第三方接口测试、抓包工具

Jmeter + postman + Metersphere

弱网测试

性能测试(Performance)

存储(Memory)

用途:主要存储一些cookies和前端本地数据等。本地存储和会话存储主要是前端开发人员在前端设置,一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器间不必要地来回传递,提高浏览器访问速度!

本地存储和会话存储的操作代码完全相同,它们的区别仅在于数据的寿命。

  • 本地存储:保存不受时间限制,用于长期保存网站的数据;除非用户自己删除,否测不会消失;并且站内任何页面都可以访问该数据;主要用来保存访客将来还能看到的数据。
  • 会话存储:用于临时保存针对一个窗口(或标签页)的数据,保存受时间限制,当前窗口一旦关闭,内容就会被浏览器删除。通常用于保存那些需要从一个页面传递给下一个页面的数据。

Cookies就是会话存储的一种,它是下载到您计算机上的小文件。比如访问过的链接,单击的按钮,登录信息或过去访问过的页面,当我们下次访问该网站时,该网站将使用该信息来跟踪我们先前在其网站上的活动。它还可以记住以前输入到表单字段中的信息,例如姓名,日期,出生详细信息,信用卡号等。

Cookies的组成部分:
expires=date:表示cookiel的失效时间(可自行设置),默认是浏览器关闭时失效(可选)-会话默认
path=路径:访问路径,默认为当前文件所在目录(何选);设置了之后只有设置的那个路径文件才可以访问cookies
domain=域名:访问域名,限制在该域名下访问(可选)=设置的域名才可以访问cookies没有设置默认当前域名
O secure:安全设置,如果设置了则必须使用nttps协议才可获取cookie(可选)

完整格式为:
name=value;[expires=date];[path=路径];[domain=域名];[secure]
cookies鉴权:和sessioni配套使用。

案例场景:比如页面上输入一些内容信息(注册信息),中途被打断,页面关闭,然后重新打开,能保留上次输入的内容。

应用(Application)

可查看目前网页的Cookies、local storage、session storage

安全

记录器

记录器(录制脚本)的用途(导入和导出):测试的时候一些重复性的工作可以录制下来进行回放;也可以保存后导入进行repaly(重放),chrome98版本后才有的功能。
录制需求脚本的场景:某项目里登录输入用户名和密码登录成功之后,点击购买某商品10份。
步骤:

  1. 录制并进行replay
  2. 导出给开发进行replay复现bug
  3. 导入进行replay
  4. 还可以进入分析性能页面

    注意:功能还是试用性功能,还在完善中,大家选择进行使用!

Lighthouse报告