网站建设的目标和需求分析,电子贺卡在线制作网站,百度手机浏览器,福田网站制作系列文章目录 提示#xff1a;这里可以添加系列文章的所有文章的目录#xff0c;目录需要自己手动添加 例如#xff1a;第一章 Python 机器学习入门之pandas的使用 提示#xff1a;写完文章后#xff0c;目录可以自动生成#xff0c;如何生成可参考右边的帮助文档 文章目…系列文章目录 提示这里可以添加系列文章的所有文章的目录目录需要自己手动添加 例如第一章 Python 机器学习入门之pandas的使用 提示写完文章后目录可以自动生成如何生成可参考右边的帮助文档 文章目录 系列文章目录1 浏览器F12开发者工具1.1 F12开发者工具基本介绍1.2 F12常规设置 2 标签页2.1 Elements 查看器2.2 Network 网络2.3 Network抓包分析案例1 以登录百度账号为例案例2 登录账号案例3 问题定位分析如何定位前端问题和后端问题? 2.4 接口测试和数据篡改2.5 和postman、jmeter等工具的结合使用2.6 Recorder 记录器2.7 Application 应用存储cookies 2.8 Console 控制台2.9 Performance 性能2.10 小结 1 浏览器F12开发者工具
1.1 F12开发者工具基本介绍 1.2 F12常规设置
1)显示的位置调整:靠右靠左靠下独立窗口 2)设置颜色和语言(chrome)
3)手机版本的切换适合测试H5页面小程序测试可以方便在电脑操作和调试;也可以选择尺寸和不同的手机型号
2 标签页 英文中文Elements查看器Console控制台Sourse源代码/调试器Network网络Performance性能Memory内存Application应用Recorder记录器Performance insights性能数据分析 查看器主要用来做元素的定位 控制台调试错误等 源代码前端代码的调试断点等 网络测试用来抓包、进行分析进行一些测试问题的定位 性能前端页面的性能 应用存储cookie缓存等
2.1 Elements 查看器 1.查看元素的代码 点击左上角的箭头图标(或按快捷键CtrlShftC)进入选择元素模式然后从页面中选择需要查看的元素然后可以在开发者工具元素(Elements) -栏中定位到该元素源代码的具体位置。 2.查看元素的属性 定位到元素的源代码之后可以从源代码中读出该元素的属性。如class、 src、 width等属性的值。 3.修改元素的代码与属性
点击元素然查看右键菜单可以看到chrome提供的可对元素进行的操作:选择Edit as HTML选项时,元索进入编辑模式可以对元素的代码进行任意的修改。当然这个修改也仅对当前的页面渲染生效不会修改服务器的源代码所以这个功能也是作为调试页面效果而使用。 结果如下
2.2 Network 网络 网络协议–01–HTTP协议 2.3 Network抓包分析
案例1 以登录百度账号为例 双击查看详细报文消息内容 标头消息头 常规请求网址、请求方法、状态代码响应头请求头 载荷(请求体) 可看到登录输入的手机号和验证码 响应响应体 时间 cookie: 案例2 登录账号 案例3 问题定位分析
抓不到登录的这个post请求:
保留日志开启后重新加载url,或者跳转了页面之后之前的请求显示资源信息依然会保留下来不会清空;停用缓存:开启后页面资源不会存入缓存可以在status栏的状态码看文件请求状态。 输入账号提示“账号不存在”如果没抓到包证明是前端页面给出的提示抓到POST请求的包了证明是后端返回的提示
如何定位前端问题和后端问题?
步骤 1.明显的前端js问题 2.抓包分析 1前端没有发送请求 --前端问题 2前端发送请求了但是前端发送内容的数据错误 --前端问题 3前端发送了正确请求后端没有给响应消息 --后端问题 4前端发送了正确请求后端也响应消息了但是响应的数据错误 --后端问题 5前端发送了正确请求后端给出了正确响应但前端没有正确显示 --前端问题 有时需要配合数据库确认Linux服务器分析项目日志
2.4 接口测试和数据篡改
接口测试(数据篡改) :以谷歌浏览器为例 右键后点击复制以fetch格式复制粘贴到控制台
可以修改捕获到的请求的数据(参数)对接口的正常数据异常数据进行测试。回车发送接口请求检查响应结果 可修改请求体的数据或参数例如将用户名输入错误回车键发送请求 检查响应结果
使用场景: 前端检查了一些异常数据报错接口层面是否也有检测这种异常数据的能力呢?所以要对接口进行这些异常数据的测试检查。
2.5 和postman、jmeter等工具的结合使用
复制为curl命令(linux)可以在postman里粘贴使用–import里进行粘贴 复制为HAR格式/所有内容保存为HAR模式可以导入到其他工具使用比如Metersphere工具。 导入HAR文件: F12可以导入其他工具导出的HAR文件。
测试HAR文件导出 给到开发进行问题的定位 --问题复现 修复bug 2.6 Recorder 记录器
录制按钮- -chrome 98版本后才有的功能
录制脚本的用途导入和导出: 测试的时候一些重复性的工作可以录制下来进行回放;也可以保存后导入进行repaly (重放)。
录制并进行replay导出给开发进行replay复现bug导入进行replay还可以进入分析性能页面
注意:功能还是试用性功能,还在完善中大家选择进行使用!
2.7 Application 应用
存储 cookies cookies用户鉴权:
登录一次过后用户的一些信息保存到服务器里以session的形式也就是会话服务器这边的会话也有一定的时效服务器会把session的一些信息通过set cookies字段发送给客服端客户端保存到浏览器里面也就是以cookies的形式保存。 --和session配套使用。
2.8 Console 控制台 1执行js语句 2查看cookies信息 查看当前网站的cookie 设置cookie值 例如
document.cookie csrf_token124353323552.9 Performance 性能 案例:
点击●可以开始录制 它会记录用户的交互以及这些交互对页面性能数据的影响,当交互完成后点击Stop来停止Record ,Performance面板会展示出刚才录制的页面性能数据 2.10 小结
