自己在Web前端项目中解决bug的思路

在项目中往往会遇到各种各样的程序bug,而且有些bug很隐蔽。例如仅仅一个字母引发的“血案”……

因为刚刚入行,所用的技术不够强劲,所以很多技术都是老套的办法。现在咱把前不久公司的一个项目中的bug修复办法及思路给记录下来,以便将来用于往后的工作当中。

首先是bug的运行(不知道咋说,应该bug的演示吧)和代码片段:

自己在Web前端项目中解决bug的思路_第1张图片

让该程序出现bug的第一步:

  首先,单击红圈中的“主页链接”

自己在Web前端项目中解决bug的思路_第2张图片

然后进入到以上的界面。

此时:单击图中上部的“用户界面”的XX(翻译:叉叉)按钮,则页面的结果如下:

自己在Web前端项目中解决bug的思路_第3张图片

  整个页面呈现一片空白:

调查浏览器开发工具中element便签下的代码显示结果是这样子:

自己在Web前端项目中解决bug的思路_第4张图片

iframe下style的属性里display值很明显为none,说明内容在标签页里有,只是未显示出来。此时bug演示完毕。

晒下代码片段:y

自己在Web前端项目中解决bug的思路_第5张图片

代码分析:

当切换灰色的按钮时,因没有将页面调出来,促使“用户界面”处于unvisible状态。当进程移除操作是,代码运行至


时会将“主页”页面移除,而保留“用户界面”。然而用户界面此时并未改变显示方式,于是整个页面呈现出一片空白的状态。

 以下是bug进行修复后的代码片段:

自己在Web前端项目中解决bug的思路_第6张图片

红色框内为修改后的内容。首先,获取当前要删除对象的ID,然后通过ID获取要移除的iframe,当移除iframe后,进行一次判断,判断是否有iframe显示,如果iframe无显示状态,则将最后一个iframe默认改为显示状态---此时bug没有再显示(暂时修复)。

通过此次修复这个小bug中,本人学习到了一些工作中需要用到的知识:

首先,项目中往往时间的原因,无法将整个项目的代码完完整整的通读一遍,而且将整个代码完全理解透也不切实际。而且很多情况下一期项目完后,很少有人会将项目内的代码完完整整的进行关键性注释。这个时候针对性模块理解起到了一定的关键作用。

针对自己在项目中要增加、修改的模块花些时间进行理解很重要,而且因为时间原因,一旦遇到了不理解的地方不能一直死盯着,需要合理的跳过。很多项目中,模块之间是相互联系的,虽然在此模块中不能将一部分代码理解,但是往往到另一个模块中却会惊奇的发现:之前模块中遇到的不理解的代码片段在此模块中会很容易的理解出来。

你可能感兴趣的:(bug解决思路,web前端,工作中遇到的问题解决思路)