企业官网建设流程全解析

网站建设ktv,开通网站空间,wordpress套cf速度怎么样,石家庄网站建设推广服务分钟看图掌握核心观点#x1f447;图片一、背景随着公司业务的不断发展#xff0c;异地协作成为一种常态#xff0c;距离无疑给我们的沟通带来了很多不便#xff0c;尤其是给问题反馈及解决增加了更多的成本#xff0c;在这过程中我们遇到了很多痛点#xff1a;痛点一图片一、背景随着公司业务的不断发展异地协作成为一种常态距离无疑给我们的沟通带来了很多不便尤其是给问题反馈及解决增加了更多的成本在这过程中我们遇到了很多痛点痛点一沟通效率低开发和测试只能通过消息或者电话进行沟通为了将问题描述清晰双方需要反复交流有时还需提供录屏、截图以及抓包等信息整个过程耗时长、效率低。痛点二复现难、定位难经常会出现一些问题开发在本地无法复现需要使用特定的手机进行复现、解决。痛点三抓包协作难分析问题时经常需要抓包但是目前主流的抓包工具都是1对1对于异地实时抓包不是很方便而且分享抓包内容也比较繁琐无法在线实时查看。为解决这些问题我们基于开源工具与自研技术栈孵化出前端三剑客利剑一录制回放工具 - 让沟通更简单利剑二远程调试工具 - 像本地调试一样调试远程机器利剑三WEB多人抓包代理工具 - 在线抓包更简单、更实时、更便捷这是一套覆盖问题复现、远程调试、便捷抓包的一整套解决方案助力开发人员快速、精准地分享解决问题。二、利剑一录制回放工具2.1 工具介绍对于前端开发而言和测试沟通问题时问的最多的几个问题你是怎么操作的控制台有什么报错吗抓个包给我看下接口请求数据吧总结归纳起来就是以下三点图片基于以上的述求我们基于开源框架rrweb实现了从前台接入管理、后台回放管理及权限管控的一站式录制回放平台接入简单一键便可录制宿主信息、操作过程、接口信息、日志信息等数据。录制过程接入录制回放工具后页面会出现一个悬浮球用于开启和提交录制信息录制完成后会生成在线回放地址。录制过程如下图所示图片回放过程录制成功后后台管理系统中便能查询到该条录制信息点击回放可以看到该问题的操作过程以及浏览器信息、接口信息、日志信息等数据如下图所示图片整个操作的流程如下图2.2 接入方式我们提供了一个在线sdk用户只需引入该js文件进行初始化即可使用图片2.3 实现原理记录页面 DOM 变化录制过程在初始化时使用document.cloneNode(true) 方获取页面的全量 DOM 快照之后通过 Mutation-Observer 监听器监控页面的各种变化如 DOM 的增删改、鼠标移动、滚动以及页面大小调整等当这些变化发生时会将变化信息序列化为 JSON 格式的数据并存储起来。回放过程读取记录的 JSON 数据解析出页面的初始快照以及各个操作事件的时间序列根据初始快照重建页面的 DOM 树然后按照事件的时间顺序逐步应用每个操作事件。图片接口录制通过对全局XMLHttpRequest进行重写进行接口的拦截处理。图片日志录制通过对全局console.log进行重写图片2.4 遇到的问题问题1跨页面录制我们是通过在index.html中引入sdk对于单页应用切换路由时录制可以连贯的衔接上但是当遇到多页面的应用时切换页面会重新加载sdk这样数据就会丢失无法进行衔接所以我们需要在切换页面时将录制数据存在本地进入下一个页面时获取这些数据进行合并如下图图片问题2iframe页面无法录制对于很多后台的项目可能存在很多iframe嵌入的子项目如果iframe中的内容与父页面不在同一个域下为了能够正常录制iframe中的内容需要进行跨域处理在iframe的页面中也嵌入sdk并设置相应的跨域属性记录数据并通过iframe.content-Window.postMessage来同步数据到主页面中。三、利剑二远程调试工具3.1 工具介绍远程调试工具是基于开源工具chii进行二次封装相较于vConsole,chii让跨设备、跨网络的Web应用调试变得简单便捷。通过远程连接的方式像本地数据线连接手机一样在本地的chrome Devtools中进行问题定位实现和在chrome://inspect中一样的设备调试效果。远程调试工具很好的解决了开发因为本地无法复现需要测试同学手上特定机器才能复现的问题同时可以在远程看到页面实时运行的日志、接口等信息大大提升问题定位效率。下面是整个操作步骤第一步如下图点击页面中的悬浮球出现远程调试按钮点击可以开启远程调试。图片第二步在管理平台的远程列表中可以看到所有连接的设备。图片第三步远程查看点击上一步骤中的inspect按钮可以进入如下调试页面。图片第四步双向操作同步在手机执行操作远程界面同步发生变化实时显示请求和日志同样如果远程修改样式或者执行操作手机端也会同步执行相同操作。3.2 接入方式图片3.3 实现原理远程调试工具主要包括三个部分客户端中转服务远程调试端(devtools)。它们的运转模式如下图图片第一步启动一个node服务作为中转服务器然后创建webSocket服务用来连接客户端和远程调试端。图片第二步在客户端需要调试的网页中注入target.js 脚本该脚本会创建 WebSocket 连接通过订阅发布来监听DOM、Log、Network、Css、Storage、Debug等相关操作指令。图片第三步远程调试界面通过CDPChrome DevTools Protocol协议来和服务进行通信当执行控制模板某项操作时比如点击DevTools中的“Elements”面板来检查页面元素DevTools会通过CDP向服务发送一个命令请求DOM树信息服务接收到这个命令后通过渲染进程查询具体的DOM信息并将结果返回给DevToolsDevTools前端再将这些信息可视化呈现给开发者。四、利剑三WEB多人抓包代理工具4.1 工具介绍工作中经常需要抓包、代理等操作主流的抓包工具有Charles、Fiddler等这些工具都必须安装客户端且都是1对1的对多人协助不是很友好。比如开发需要获取测试同学的的抓包信息分析问题时目前都是测试同学把报文导出来发给开发开发再去导入到工具里面进行分析。在此背景下我们就在思考能否实现一个在线的抓包、代理平台让大家使用方便、分享方便降低门槛。于是就有了这款工具的诞生工具是基于mitmproxy进行了二次开发容器化部署了一套在线代理服务只需通过浏览器就能实现抓包、代理等操作。该在线抓包工具具备如下优势简单 无需安装客户端有浏览器就能使用易上手。方便 直接在浏览器中进行抓包而且可通过链接分享给他人。易用 支持断点、修改报文集成了录制回放工具、远程调试工具且支持开发、测试、线上环境任意切换。4.2 使用简介设置代理用户可以通过手机安装的App扫描页面上二维码建立连接也可以直接在手机WIFI代理设置中输入固定的代理IP和端口号。图片抓包、代理代理成功后自动跳转到抓包页面页面中会显示当前设备也支持新增设备可以同时对多个设备进行抓包、代理。并且支持对报文的篡改及环境的代理。图片工具注入我们还在抓包工具中集成了上面的录制回放工具和远程调试工具只需要打开开关便会去识别入口html动态注入工具的sdk并进行初始化这样用户再次刷新页面时页面中便会出现工具的悬浮球。图片环境切换工作中还涉及到一个场景在产品和UI验收时由于验收环境都是在测试环境需要配置host对于产品和UI同学来讲环境的配置其实是比较陌生的为了方便验收我们提供了一键切换环境的能力。用户只需要在页面上选择自己的项目然后开启对应的环境这样手机环境便能切换过来。图片4.3 实现原理在mitmproxy基础上根据设备ip对拦截的请求进行分类当用户查看抓包数据时通过ip进行过滤这样就可以只看到自己ip的抓包数据。图片4.4 问题解决4.4.1 如何实现1对N既然是在线抓包服务那每个人肯定都是独立的不能相互影响如何让1个代理服务支持多人操作就成了问题。解决方案用户连接代理后代理服务器可以获取到用户的IP地址根据IP地址分别进行分发及报文存储。前台查询时终端ip地址作为入参便只会查询当前ip相关的抓包信息。前台修改报文、环境等信息时代理服务器会根据ip分别存储修改后的信息。4.4.2 性能问题多人在线抓包时报文数据量非常大几十万甚至上百万条而且单条报文数据量也非常的大包括请求头、响应头、响应内容等等所以如何快速查询及展示就成了问题。解决方案采用虚拟滚动列表提升页面流畅性。优化报文结构列表只返回固定的几个字段等点击时再去查询报文详情。优化后即使上万条报文也能很快返回用户操作也不会卡顿。// 报文结构[{id: ccae12b0-a4f9-4379-98df-03360b6a3912,s: 200,m: POST,u: https://bbs.vivo.com.cn/,z: 649,b: 1742888674.46417,e: 1742888674.51759},...]五、总结整体回顾下本文主要介绍了开发同学在项目中遇到的问题定位、沟通等痛点通过对痛点的拆解和思考孵化出三个在前端项目中提升效率的工具录制回放精准还原问题出现的场景提供分析问题所需的必要数据环境、日志、抓包、操作过程等提升解决问题的效率。远程调试远程直连真机进行调试快速解决特定机型的问题。多人抓包让抓包变的更加便捷在线即可完成极大地提高了团队在抓包调试工作中的协作效率。希望本文采取的方案以及解决问题的思路对你能有所帮助也欢迎在评论区一起交流讨论。