黑匣子思维之向bug学习-程序员宅基地

技术标签: 前端开发  程序员  bug  

一、黑匣子思维

当我们的信仰受到挑战的时候,人的本能更倾向于纂改证据,以维护我们原本的信仰。我们会创造新的借口 ,以维护我们所认可的事实。”这个是“闭路循环”导致的“认知失调”,在很多事情上,进步取决于我们从失败中学习的意愿,如果忽视失败,掩饰错误,我们就毁掉了宝贵的学习机会。所以,我们需要有一种记录和审视失败并从中吸取经验的积极态度,让失败变得有意义,这种从错误中学习的思维称之为黑匣子思维。

作为一个工程师(程序员),我们所面对的错误最常见的就是代码bug,那么,我们如何利用黑匣子思维向bugs学习呢?最近在思考这个,写下了记录一下。


二、向bug学习四部曲

1、收集——整理、收集有价值的bug(让你费神、容易出错的bug)

2、分享——向团队分享bug(错误原因、修复方案)

3、归纳——归纳大部分问题出现的原因和解决问题的思路

4、自省——正视并接受自己犯的错误或者代码写的不好的地方,加以改正


三、分享一些之前收集的常见的容易出错的bug(你可能需要像上学时有个错题本一样建立一个收集bugs的文件)

1、小心null和undefined
let someValue = obj.attr + "";   => (obj.name ||"") + ""

2、小心0的情况
let someId = someId || 1; =>let someId = (!someId && someId !==0) ? 1 : someId;

3、小心浮点数
let result  = 0.1+ 0.2  =>let result = +(0.1+0.2).toFixed(2)

4、小心对象为空
let someAttr = obj.attr.name    =>let someAttr = obj && obj.attr && obj.attr.name

5、forEach里面用了return当成了函数的return =>函数外return
function fun(){
    arr.forEach((item)=>{
if(1){
    return;
}
    })
}

6、在数组for循环里面改变数组长度
arr.forEach((item,index)=>{
    arr.splice(index,1)
})

7、在条件判断里面定义函数
if(flag){
function fun(){
}
}

8、日期相关
1、兼容:let date = new Date("2017-07-07")  => date = date.replace(/\-/g,"/")
2、月份减1:let date = new Date(2017,6,7)

9、监听input输入框blur事件,如果输入错误,在input后面插入一个显示错误信息的dom节点;
   监听input输入框focus事件,把错误信息隐藏
====> 当光标在第一个输入框并且输入内容是错误时,把鼠标聚焦到第二个输入框;这时候依次触发第一个输入框的blur事件、插入节点显示错误、触发第二个输入框的focus事件...
正常来讲是这样的,但是有个bug会偶现,就是第二个输入框的foucs事件会偶尔触发不了;猜测原因是插入节点的时候打断了focus事件的触发(浏览器渲染机制),尝试setTimeout后执行插入节点,解决了问题。

10、switch case时忘记break
switch(flag){
case 1:
    name="aa";
case 2:
    name = "bb";
break;
}

11、boom发布的时候 一直报node-sass加载失败 =》  当初intall这些node_modules的node或者npm的版本要和当前的一致,服务器的node版本发生变化, 就需要删掉之前的模块重新install
解决办法是加一个RUN npm uninstall的命令

12、react按需加载,按照网上教程一步步写完却不生效,折腾一阵反应过来是react-router版本不一样,我本地的是最新版本,教程是早期版本。
解决办法:用最新版本按需加载的方式来做,生效了。

13、a标签的herf属性写了#    <a href="#">action</>    => <a href="javascript:;">action</>   注意javascript千万不要拼写错误了

14、iphone浏览器下数字的样式异常 =》因为iphone默认把数字当成了电话,并设置了特殊的样式,需要设置一下meta头部
<meta name="format-detection" content="telephone=no" />


四、问题记录多了,你需要归纳引发问题常见的原因,这样有助于我们快速找到问题的症结点

1、模块、依赖包、app、浏览器的版本号不一致
2、特殊的操作方式,比如先填这个再单击那个等等
3、浏览器、手机系统不同
4、ajax请求失败:接口是否正常、路径及host是否正确、端口是匹配、入参是否正确、请求头(contentType、cookie等)是否匹配
5、浏览器是否放大缩小了
6、是否是代码压缩的问题
7、网络问题(wifi、4G、局域网)
8、本地host问题
9、极限值、特殊字符、生僻字
10、文件编码(utf-8 、不带BOM的UTF-8、ANSI)
11、特定帐号或者特定产品的问题


五、当发现问题后,如何解决问题呢?结合几位有多年解决问题经验的同学反馈,有如下解决思路,可以参考下。

1、查看问题的现象——报什么错??
2问题出现的条件——什么浏览器、什么系统、什么产品、什么网络??
3问题出现的操作轨迹——如何操作、操作顺序、操作内容??
4根据条件和轨迹找出重现问题的步骤——必现路径??
5不断重复出错的步骤思考可能的原因
6用排除法排除明显的干扰项
7不断试错逐渐缩小问题原因的范围
8找到问题原因后寻找解决的办法
8.1——好解决,一键修复
8.2——不好解决,但问题比较严重,影响进度或者用户体验,采用折中或者临时解决方案(不要引发其他问题),先让用户先能用,然后后续的时间用完善的方案继续解决;

8.3——难以解决,时间不紧急的话,可以休息放松下第二天再解决。
8.4——基本无法解决,在出错的条件下隐藏相关功能,或者使用替代方案

9问题修复后自测是否影响其他模块,确保杜绝因修复引发的问题
10写注释,标明出错原因及修复记录;
11寻找方法预防该类错误再次发生,比如在源头解决问题等
12查看其它地方相似模块是否有同样问题,有,修复之。
13记录问题,完善bug库
14分享问题,询问团队成员是否遇到同样问题,提醒修复,并告知相关解决方案。


六、我的代码到底哪里出错了?针对这个问题,这里总结了一些查错的方法。

1、看错误现象和错误提示——找关联性、关键词
2、猜测可能出问题的地方去试错——试错
3、对比当前文件和之前正常文件,查看修改了哪些点——对比
4、打印关键信息——通过日志整理思路
5、断点——一步步走下去,看哪里卡住了
6、删代码,一行行或一段段删除代码,看哪些代码删除后不报错了就找到地方了——放大招,慎用。


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/grandPang/article/details/78668895

智能推荐

c#中用循环语句输出九九乘法表_c# 通过for循环输出10 20 30-程序员宅基地

文章浏览阅读5.2k次,点赞3次,收藏5次。 一些基础的逻辑运算,自己也是初学者,记录一下,全是自己的一些见解,大神请轻喷输出结果:代码:public void ChengFaBiao(){ for (int a = 1;a&lt;=9;a++){ for (int b = 1; b &lt;= a; b++) { Console.Write (b + "*" + a + "=" + a * b+" "); ..._c# 通过for循环输出10 20 30

AGPBI: {"kind":"error","text":"Cannot fit requested classes in a single dex file (# methods: 67300 >-程序员宅基地

文章浏览阅读2.8k次。错误信息 AGPBI: {"kind":"error","text":"Cannot fit requested classes in a single dex file (# methods: 67300 > 65536)","sources":[{}],"tool":"D8"}com.android.builder.dexing.DexArchiveMergerExce..._agpbi: {"kind":"error","text":"cannot fit requested classes in a single dex

python之windrose风向玫瑰图的用法_windroseaxes.from_ax-程序员宅基地

文章浏览阅读2w次,点赞4次,收藏47次。1.安装A package is available and can be downloaded from PyPi and installed using:$ pip install windroseInstall latest development version$ pip install git+https://github.com/python-windrose/wi..._windroseaxes.from_ax

pxe linux 配置文件,(六)PXE技术篇--pxelinux 的配置文件-程序员宅基地

文章浏览阅读1k次。pxe 启动引导器pxelinux.0 在 syslinux 包中, 把它拷贝到 /var/lib/tftpboot/ 下, 客户机会从此目录读取该文件安装yum -y install syslinux复制文件cp /usr/share/syslinux/pxelinux.0 /var/lib/tftpboot我们告诉客户端使用 vmlinuz 作为内核, 并且使用 initrd.img 作为初..._pxelinux.0文件在什么地方

图解:深度优先搜索与广度优先搜索及其六大应用_请叙述广度优先搜索和深度优先搜索的特点和使用场合-程序员宅基地

文章浏览阅读5.9k次,点赞13次,收藏46次。图算法第二篇 深度优先搜索与广度优先搜索及其应用约定:本文所有涉及的图均为无向图,有向图会在之后的文章涉及1.图的存储方式我们首先来回顾一下图的存储方式:邻接矩阵和邻接表。为了实现更好的性能,我们在实际应用中一般使用邻接表的方式来表示图。具体的实现代码为:package Graph;import java.util.LinkedList;public class Graph{ private final int V;//顶点数目 private int E;/.._请叙述广度优先搜索和深度优先搜索的特点和使用场合

Ubuntu登录界面输入正确密码依然无法登陆_ubuntu advantage token-程序员宅基地

文章浏览阅读1w次。Ubuntu登录界面输入正确密码依然无法登陆Ubuntu14出现了2次这样的情况,开机进入登录页面,输入正确的密码后,再次回到登录页面,一直这样无法进入Ubuntu桌面。 在网上找到了解决方案,按Ctrl+Alt+F1(F1~F6一共6个终端可用),删除home目录下的.Xauthor*文件即可。命令行下: reboot命令重启 startx可以启动图形桌面_ubuntu advantage token

随便推点

进程环境相关(APUE)_linux 进程 文件 apue-程序员宅基地

文章浏览阅读90次。就是一个main程序的运行开始到结束的一些介绍,运行环境的一些,比较简单的一章,里面那个setjmp和longjmp函数那里有点难懂,记得后面信号那里还出现了。mian函数背后进程(main函数)的开始进程的终止的方式(8种(其中5种正常))三个正常终止进程的函数:exit、_exit和_Exit,三者有什么不同,参数代表什么(终止状态)什么情况下终止状态是未定义的,什么情况下终止状态..._linux 进程 文件 apue

《Linux从0到99》七 进程地址空间_99在内存中的地址-程序员宅基地

文章浏览阅读108次。地址空间1. 什么是地址空间?2. 虚拟地址空间出现的原因3. 地址空间的工作方式4. 地址空间的三种管理方式01 分页式内存管理(提高内存利用率)02 分段式内存管理(便于管理)03 段页式内存管理(既提高了内存利用率,又便于内存管理)1. 什么是地址空间?地址空间(address space) 表示任何一个计算机实体所占用的内存大小。比如外设、文件、服务器或者一个网络计算机。地址空间包括物理空间以及虚拟空间。物理地址 (physical address): 放在寻址总线上的地址。放在寻址总线上_99在内存中的地址

php mysql 排名算法_PHP实现四种基础排序算法的运行时间比较(推荐)-程序员宅基地

文章浏览阅读120次。许多人都说算法是程序的核心,算法的好坏决定了程序的质量。作为一个初级phper,虽然很少接触到算法方面的东西。但是对于基本的排序算法还是应该掌握的,它是程序开发的必备工具。下面通过本文给大家介绍PHP实现四种基础排序算法的运行时间比较,一起看下吧。废话不多说了,直接给大家贴代码了。具体代码如下所示:/*** php四种基础排序算法的运行时间比较* @authors Jesse (jesse152@..._for($i=0;$i

YOLOV3代码详解_b, target_labels = target[:, :2].long().t()-程序员宅基地

文章浏览阅读7.5k次,点赞16次,收藏126次。代码分析:https://github.com/eriklindernoren/PyTorch-YOLOv3论文地址:https://pjreddie.com/media/files/papers/YOLOv3.pdf注:本次分析的代码是以上给出的网址,全部根据自己的理解写的,如有不足,还请指正。1、datasets.py因为所有模型都包括数据加载,模型载入,训练和测试等,所以先从数据的载..._b, target_labels = target[:, :2].long().t()

均衡技术matlab,无线通信均衡技术matlab仿真.doc-程序员宅基地

文章浏览阅读304次。无线通信均衡技术matlab仿真现给出迫零均衡(ZF)、最小均方误差均衡中的最小均方算法(LMS)的matlab程序,理解各程序,完成以下习题。将程序运行结果及各题目的解答写入word中:用matlab分别运行“main_zf.m”和“main_lms.m”(a)在程序中标注“注释”处加上注释(英文或中文)。(b)写出这两种算法实现的流程。(c)运行程序,会得到关于信号的一系列图形,包括信号序列图..._matlab信道均衡代码

Python 绘制散点密度图_c#计算二维散点的密度热度值-程序员宅基地

文章浏览阅读4.7k次,点赞8次,收藏81次。matplotlib、seaborn绘制散点密度图_c#计算二维散点的密度热度值

推荐文章

热门文章

相关标签