F12开发者工具的使用技巧
什么是F12(Chrome Devtool)开发者工具
它是浏览器自带的一个开发调试工具,因为可以用键盘上的F12快捷键直接启动,所以也可以简称为F12工具。
它的特点:
- 简单轻量级,是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。
- F12作为浏览器的一部分,是数据收发的一端,抓取到的HTTPS报文是可以得到明文数据的(抓包),类似于抓包工具有
Fiddler、Charles
(需另外安装)。
如何打开F12工具
多种方式,可任意选择:
- 按
F12 启动! - 按
ctrl +shift +i 启动! - 鼠标右键选择
检查
页面启动! - 点击浏览器右上角的菜单(三个小点点) –> 更多工具选项卡 –> 开发者工具
F12工具的设置和常用功能
- 点击F12工具的右上角 “三个点” 的按钮,可以选择工具的停靠位置,显示的位置调整:靠右、靠左、靠下或者独立窗口
- 设置颜色和语言(chrome)
- 进行手机版本的切换,还能选择尺寸和不同的手机型号,预览各模型机的显示效果,适合测试H5页面小程序测试,可以方便在电脑操作和调试,这个预览功能还支持屏幕截图。
- 选中要截图的元素范围,按
ctrl +shift +p ,输入截图
,选中合适的功能截图即可。
F12工具的主要面板精讲
元素(Elements)
查看网页元素的代码
映入眼帘的是Html的Dom(Document Object Model)树形结构,计算样式(Computed)找主要数据(字体大小、行高等等)。有稍微接触过Web前端的同学应该都知道,此面板是常用来Debug css的。点击左上角的箭头图标(快捷键
查看CSS样式的属性状态:hov .cls
样式(style)里点击:hov查看指定元素的各个状态,如:active、:hover、:focus等等;点击.cls查看类样式的具体在网页上的展现效果。
修改元素的代码与属性
可以用这个面板来调试前端页面效果,ctrl+F来搜索关键词,进行修改代码、保存代码、预览代码效果等操作。
UI自动化元素的定位
案例场景:找到页面的用户名和密码输入框,点击登录按钮,完成页面的自动化登录操作。
步骤:
- 安装selenium工具、UI自动化测试江具、webdriver
- 八大元素定位方法-找id name XPath。其中有两种路径,绝对路径:html/body/div[2]/div/form/div[1]/input== 中间节点依赖性不方便用来作为元素定位
相对路径://input[@name=”phone”]==推荐标签+属性定位/层级文本轴定位。xpath的表达式验证:ctrl + F 搜索你的XPath,查看定位是否准确。 - 编码进行自动化操作:Python 或者 Java
控制台抽屉栏
点击最顶部右上角的“三个点” 选择显示控制台抽屉栏,可以看到最底部已经显示出来。其中的功能有很多,有控制台、传感器、网络状况、渲染、动画等等
控制台(Console)
此面板可用来Debug javascript。
点击右上角的设置按钮,常见的用途有保留日志,编写js原生的测试代码。
主要功能:
- $0 - 代表现在的DOM
- $1,$2,$3 - 选择之前的的DOM
- $_ - 回传上一个值
- console.table - 列出table 出來, 方便读取
- console.time, console.timeEnd - 测效能用的、记录时间
- $(‘Selector’) - 內建有jquery 選擇器,效果跟document.querySelector一样,用来调取某个元素的具体内容。可用于爬虫
- 执行js代码
- document.cookie - 查看或修改cookies信息
- document.designMode=”no” - 任意编辑或复制网页上的内容
源代码(Source)
网页静态资源的存放位置。此面板亦可用来Debug javascript,对源码进行端点调试。
网络(Network)
获取网页的全部网络请求与响应数据,抓取分析报文内容,并还有过滤功能帮助我们更快地查找、模拟网速测试性能。
基础功能:
- 保留日志/持续记录:开启后,重新加载url或者跳转了页面之后,之前的请求显示资源信息依然会保留下来,不会清空。
- 停用缓存:开启后,页面资源不会存入缓存,可以在status栏的状态码看文件请求状态。
请求过滤:
- Content type: HTML,CSS,JS
- XHR requests: XMLHttpRequests
- WS: VebSocket连接
报文过滤:ctrl+F
- url:域名或者文件部分包含这个URL
- status-code:404
- method:post
- domain:8.129.91.152:8765
- remote-ip:124.237.176.160
- mime-type:image/png
搜索请求:
- 点击搜索按钮打开搜索框
- 搜素关键字可以是请求和响应消息头和响应消息体
- 大小写敏感:Aa
- 关闭搜索框
API接口测试和数据篡改
通过F12工具检查返回的JSON信息是否准确,遇到异常数据报错是否有相应的信息提示:
- 选中要测验的报文
- 右键点击编辑并转发
- 修改要检验的数据
- 发送接口请求
- 检查响应结果。
结合第三方接口测试、抓包工具
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份。
步骤:
- 录制并进行replay
- 导出给开发进行replay复现bug
- 导入进行replay
- 还可以进入分析性能页面
注意:功能还是试用性功能,还在完善中,大家选择进行使用!