成华区建设局网站,WordPress网校系统,seo个人优化方案案例,北京环保网站建设在日常工作中#xff0c;我们常常会遇到以下两类典型的挑战#xff1a;
场景一#xff1a; 接手无文档的老项目 1、情景描述#xff1a; 你接手了一个历史久远的项目#xff0c;项目文档缺失#xff0c;前任开发者已经离开#xff0c;而你对当前的业务逻辑和代码结构都…在日常工作中我们常常会遇到以下两类典型的挑战
场景一 接手无文档的老项目 1、情景描述 你接手了一个历史久远的项目项目文档缺失前任开发者已经离开而你对当前的业务逻辑和代码结构都不熟悉。然而线上系统出现了故障需要紧急解决。
2、挑战
缺乏文档资料难以快速了解系统架构。不熟悉业务流程难以迅速定位问题。代码结构混乱增加了调试难度。
场景二 项目中出现难以复现的幽灵Bug 1、情景描述 项目中出现了难以捉摸的Bug相关反馈人员如测试工程师、实施人员等无法准确描述或复现问题这使得问题的定位变得异常困难。
2、挑战
问题出现的概率较低难以捕捉。相关人员提供的信息不完整缺乏具体细节。缺乏一致的复现步骤难以进行有效的调试。
不管是哪种场景我们要解决问题关键的一点就是必须找到引发问题的地方以及真正引发问题的原因。
查找定位错误文件的方法
我们首先可用通过以下方法来找到和定位引发问题的文件
1、通过页面路由路径查找 此方法得基于规范得页面结构如果一个项目得项目文件引用像蜘蛛网一样错综复杂此法行不通 2、通过css样式查找 浏览器上鼠标选中对应的html查看css然后全局搜索 3、通过菜单查找 页面菜单管理或者菜单数据结合页面路由路径找到对应的文件地址比如component配置。对于采用动态配置菜单得项目可用 4、全局关键字搜索 通过页面特殊关键字全局搜索查找文件。前提是该关键字在项目中出现次数比较少最好5次以下。另外全局搜索时应将打包后的文件删除或者排除在外避免干扰 5、从逻辑上顺藤摸瓜 根据路由文件的逻辑比如先找到路由文件然后根据“查看”按钮找到详情页文件
页面调试的一些思路整理
1、遇到页面出不来第一反是看浏览器控制台观察是否报错如果报错根据报错指定的文件去查找错位问题改正侯继续观察页面情况 2、控制台如果没用报错查看netWork对应的接口请求看是否有数据 3、如果有检查代码逻辑是否获取到数据一定得检查并打印或者debug查看而不是空想 4、遇到棘手的无法定位错误的问题可以使用注释部分代码观察页面变化的方式、找到错误文件后根据文档等定位代码逻辑根据代码逻辑打印调试数据并分析数据是否正确 5、还原真实的操作逻辑和使用场景。能准确复现的问题相对很难复现的问题会比较好解决。如果是其他人发现的问题尽可能的摸清楚对方的操作逻辑在相同账号、相同数据下来查找问题 6、涉及硬件、设备的做好关键步骤和逻辑的数据打印然后分析日志
以下案例均为笔者之前亲身经历。
案例一某单位取款机项目部分客户登录跳转首页客户取钞过程中莫名跳转首页问题排查。
该问题在公司测试时并没有发现出差到现场时开始的第一天也未出现此问题
排查方法 首先分析日志从日志打印的顺序和时间上分析发现钞票冠字号打印的顺序和取款批次不完全一致有延后的情况 问题复现方式模拟现场用户取款实际步骤流程情况来测试后复现了问题 关键方法 还原用户真实场景测试复现
案例二 vue-press打包报错error Error rendering / 该问题的难点在于报错信息基本无用从报错信息上几乎找不到报错的原因和引发位置
原因查找
文档已有知识根据查阅官网示例文档vue-press是服务端渲染。本地搭建测试环境结合项目本身需求和环境排查采用本地建测试仓库本地建测试组件库本地建测试文档项目统一测试流程逐个移植原组件库的组件到测试组件库中这里也可以采用二分法发布到测试仓库后更新测试文档然后执行vue-press项目本地打包命令。
查找结果
初步组件定位最终找出影响打包的组件有弹窗、文件上传、文件预览、裁剪等组件。这些组件的共同点就是都直接或间接用到了document操作dom或者使用了window对象调用api。初步验证锁定组件后仅留下这些组件中的一个然后去掉document相关调用得到了正确的验证。进一步验证后又通过对其他组件使用注释/开启方式不断测试确定了问题原因包括在create生命周期中使用window、document或bom方法事件import引入含有或间接调用含有window、document或bom方法事件的函数
关键方法 逐渐注释和逐渐移植或者二分法
假设你是一个科学家——以科学探究的精神面对挑战
在面对复杂且难以一眼洞悉的问题时你是否曾想过或许可以借鉴科学研究的方法来寻找和解决问题
1、提出猜想。当遇到一个未知的、暂时无法准确定位具体问题的bug时可以先以自己当下知识提出可能的假设原因 2、验证猜想。猜想必须要验证。这里要注意的是提出的只是猜想并非就一定是这个原因所以要避免先入为主的观念而是要用事实来证明猜想的正确性。
如何验证
打印数据。打印数据时注意浅拷贝问题。数组和对象的打印建议使用JSON.parse(JSON.stringfy()),杜绝数据变化注释特定地方代码修改特定地方代码
3、问题未解决之前不断提出猜想反复验证
案例一 某政府大屏项目——解决客户电脑(winserver2012政企版蓝色chrome 83)浏览器布局出现混乱的问题。
出现场景客户电脑和windowserve2012系统上装客户的特供版chrome浏览器会出现该问题。原因推测因开发电脑装了特供版chrome浏览器没复现故只能推测原因。推测为界面使用flex布局出现问题的时候界面flex布局的row失效混乱效果和直接使用block相同可能是浏览器版本较低加上该浏览器内核和通用chrome内核更新并不一致最终对项目中的flex布局支持异常导致。 解决 加上百分比宽度布局兼容给模块容器加上宽度100%显示模块加上比例宽度兼容测试后解决。
案例二 某项目需要从第三方平台跳转在开发者模式下模拟可以正常跳转而在打包到客户生产环境下无法正确跳转 问题描述 本该跳转到登录页面的地址变成了ajax网络请求页面显示404数据信息。
猜想一 原因推测 前端路由地址和后端api地址冲突 验证 前端修改路由路径信息验证失败排除了前后端路由和api冲突的可能猜想二 原因推测nginx vue history模式必须的 try_files配置、即404重定向配置 验证加上后try_files配置问题未解决猜想三 原因推测nginx整体配置问题 验证尝试将后端api配置注释操作后项目可以成功的跳转到前端页面确定了跳转失败的原因所在后由后端伙伴提供新的配置后问题解决
知识深度和广度的影响
知识深度和广度可以在一定程度上快速帮你解决问题、查找原因
知识深度比如一个vue2页面你发现数据更新了但是页面没有更新。从知识深度来讲如果熟悉vue的$Set和vue对象在初始创建时没有对应的键名的坑那看一下代码就很快能联想到在赋值的地方需要用this.$set又比如熟悉js基本类型和引用类型在存储上的区别在处理数据莫名其妙发生变化的情况时很容易就能想到是下游数据改变影响了上游数据的原因知识广度比如用Uniapp写一个app发现网页端视频可以播放app视频无法播放对安卓熟悉的很容易就会联想到权限问题
工具的运用
百度搜索——适合英文不好的但是专业网站上的iss等基本搜不出来 谷歌搜索——如果需要搜索国外的方案最好有一点英文基础能看个大概也行可以搜索到github上的issue还有很多新新技术国外的解决方案比国内多 AI工具——ChartGpt、通义千问等智能型工具
