扒个知名项目的 Bug!

笔记 同时被 3 个专栏收录
39 篇文章 0 订阅
42 篇文章 0 订阅
5 篇文章 0 订阅

作者:程序员鱼皮
链接:https://mp.weixin.qq.com/s/RTuPZ20R5B6iByKugl9lsQ

分享一个不错的 Bug 排查思路 ~(我是转载者,主要是排查思路很值得借鉴,学习了

大家好,我是鱼皮。我们在学编程时难免会遇到各种各样的 Bug,这种时候你一般会怎么处理呢?

我估计大多数同学会在第一时间选择百度谷歌,也有同学会选择直接求助他人,仅有极少数同学会通过查文档、看源码等方式硬核解决。
在这里插入图片描述

正好我昨天遇到了个 Bug,就给大家分享一个不错的 Bug 排查思路吧~

Bug 排查之旅

这是一个关于前端 Ant Design 组件库的 Bug。

本文大纲:
在这里插入图片描述

孽起

我有一个前端项目,使用到了 Ant Design 组件库,昨天打开它的官方文档,发现竟然又更新了那么多版本,出了一些新的特性、做了些优化、修了些 Bug 什么的。

正好我自己的这个项目很久很久没更新依赖了,于是我就考虑升级一下 Ant Design 组件的版本号。

在企业级项目中,升级版本号可不是小事,说不定新的版本就淘汰了一些语法,导致你的项目报错呢?

于是,我在升级之后,先用工具整体扫描了一遍代码,还好没报错。

然后呢,还要再人工确认,每个页面都要仔细检查一遍,点一点关键的按钮等。

当我检查页面时,发现一个问题,我的导航条缺失了一些原本拥有的样式,鼠标放到子菜单项时不再变色了。

效果如下:
在这里插入图片描述
这虽然是个小问题,但还是会影响用户体验的,所以必须要处理下。

分析

前端样式上的问题相对还是比较容易解决的,毕竟不涉及什么逻辑。所以我也没有上网搜索,而是直接在原网页和更新版本后有 bug 的网页分别打开 F12 开发者工具,一下就发现,更新版本后的网页缺失了一段样式。

缺失代码如下:

.ant-menu-item-active {
    color: #1890ff;
}

原本当鼠标悬停到菜单项时,会自动为该元素添加 xx-active 类名,然后触发上述样式代码变蓝色。但更新版本后,这段代码就消失了,所以没有变色。

其实到这里就已经知道 Bug 出现的原因了,解决方案也很简单,再把这段缺失的代码补上,写到一个公共样式里就可以了。

但对于一个倔强的程序员来说,远远不够,我不仅要能解决 Bug,还要 深扒 一下这个 Bug!

有同学问了:为啥呢?项目能正常跑不就行了么?
在这里插入图片描述

为何要深扒 Bug?

其实深扒 Bug 不是真的因为倔,而是有一定的 必要性 和好处,我是这么想的:

1. 明确状况

组件库代码是别人写的,你不清楚作者为什么要去掉这段样式代码。也许是无意,但也许是有其他的原因呢?真的是 Bug 么?那如果你再把这段样式手动加上,会不会和其他的样式产生冲突呢?所以有必要搞清楚他们修改的原因。

2. 明确职责

组件库是别人提供的,我们只是整体引入现成的,如果组件库出了 Bug,本应交由官方修复,而不应该由用户自己想当然地去做补丁和适配。

举个例子,我四年级的时候,阿姨给我买了个 MP4,我很喜欢,天天拿来看动画片儿。但后来它突然开不了机了,我就轻轻摔一下它,哎,竟然突然好了!以后,只要开不了机,我就摔它,最后越摔越高,直到终于摔得屏幕粉碎、贼稀巴烂。
在这里插入图片描述
有时,你自己确实可以解决问题,但通常不如官方专业,尤其是知名项目,所以还是交给专业人士来处理吧~

如果真的是很多人都遇到的 Bug,官方一般也会给出解决方案。当然,如果项目十分紧急,自己本地改掉也未尝不可,但还是建议先多去了解下项目。

3. 开源建设

如果真的是未被发现的 Bug,你的提出和分析可以帮助到更多用到这个项目的小伙伴,何乐而不为呢?能发现和解决一个知名项目的 Bug 也是一件了不起的事。

4. 个人成长

以刨根问底的心态来面对和解决问题,我们就会收获很多学编程的乐趣和进步的空间,每个 Bug 的解决都是一项比增删改查更有意义的工作。

综上,我很早之前就养成了习惯:时间允许的情况下,我会把 Bug 翻个底朝天。

追溯

那接下来我们来追溯下这个 Bug,因为 Ant Design 是一个非常庞大的项目,代码多、版本多,所以我们要先明确两个边界,便于定位 Bug 来源。

这两个边界分别是:版本边界代码边界

版本边界很好理解,假设我的代码是从 v14.0.0 版本升级到 v14.16.3 版本,那么这两个版本号就是版本边界(更细一点的话可以把每次提交都看作一个版本),Bug 只可能在其中出现。代码边界又可以叫组件边界、模块边界等等,我们发现导航菜单出了问题,那么只需要关心这个组件代码的改动。

因此,在找 Bug 的起源时,我先登录 GitHub,找到 Ant Design 官方仓库,打开了版本(Releases)列表:
在这里插入图片描述
点击tags(我是转载者,这个图是我自己加的,主要是为了提醒自己找到(Releases)列表)
在这里插入图片描述

如上图,每一次版本的更新都做了哪些事,一目了然。

在这个列表中改动点还挺多,但我们只需要关心 Menu 菜单组件,所以很快找到了这一行:

在这里插入图片描述
如图,该版本有一个改动是 “修复 Menu 暗色模式下,部分样式被亮色模式污染的问题”,很明显是改了 Menu 组件的代码!

其实当时我看到这里,就觉得大概率是这次改动的问题了,但还不确定,所以还要点进本次改动详情看看。

一进去看代码,就发现惊喜了!果然,本次改动移除了导航条菜单的悬停样式:
在这里插入图片描述
害,Bug 果然是解决不完的,不知道这是哪位小糊涂写的,改了一个 Bug,又引入了一个新的 Bug 哈哈。
至此,真相大白。

处理

最后,我们再看看怎么处理这个 Bug,我的项目因为不急着升级,所以就先回退到了上一个正常的版本,把这个问题交给官方。
那么首先得让官方知道你的问题对吧。
一般我们遇到官方组件的问题,或者是希望有什么新的特性,都可以发起一个 issues(问题)。大家看,Ant Design 不愧为知名项目,Bug 多问题多也很正常,都有 20724 个问题了!
在这里插入图片描述
咱也有样学样提一个 issue,Ant Design 团队为了管理大家的问题,提供了一个问题表单页面,并且给你定好了一些规矩,避免一些乱七八糟不经搜索就直接提出的低质量问题。
在这里插入图片描述
提交完毕,就能看到自己创建的 issue 了,可以再打个小勾,表示自己已经确认没有其他同学问过重复的问题。
在这里插入图片描述

在问题描述中,记得把你刚刚的分析过程补充上去,尽量全面,可能会更快地被解答~
OK,接下来等着官方去处理吧。可千万别告诉我这不是 Bug,这是 Feature(特性),毕竟这种以肉换肉的 Feature 我接受不了,肯定很多用户会受到影响的。

复盘

最后再次提醒大家,组件库、框架的升级可是大事,在升级前最好把它中间版本的发展过程和改动点详细看一遍,并且在升级后仔细检查,防止被各种 Bug 所伤, 严重时可能还要把已升级的版本再退回来,得不偿失。

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值