扒個(gè)知名項(xiàng)目的 Bug！

分享一個(gè)不錯(cuò)的 Bug 排查思路 ~

大家好，我是魚皮。我們在學(xué)編程時(shí)難免會遇到各種各樣的 Bug，這種時(shí)候你一般會怎么處理呢？

我估計(jì)大多數(shù)同學(xué)會在第一時(shí)間選擇百度谷歌，也有同學(xué)會選擇直接求助他人，僅有極少數(shù)同學(xué)會通過查文檔、看源碼等方式硬核解決。

正好我昨天遇到了個(gè) Bug，就給大家分享一個(gè)不錯(cuò)的 Bug 排查思路吧~

Bug 排查之旅

這是一個(gè)關(guān)于前端 Ant Design 組件庫的 Bug。

本文大綱：

孽起

我有一個(gè)前端項(xiàng)目，使用到了 Ant Design 組件庫，昨天打開它的官方文檔，發(fā)現(xiàn)竟然又更新了那么多版本，出了一些新的特性、做了些優(yōu)化、修了些 Bug 什么的。

正好我自己的這個(gè)項(xiàng)目很久很久沒更新依賴了，于是我就考慮升級一下 Ant Design 組件的版本號。

在企業(yè)級項(xiàng)目中，升級版本號可不是小事，說不定新的版本就淘汰了一些語法，導(dǎo)致你的項(xiàng)目報(bào)錯(cuò)呢？

于是，我在升級之后，先用工具整體掃描了一遍代碼，還好沒報(bào)錯(cuò)。

然后呢，還要再人工確認(rèn)，每個(gè)頁面都要仔細(xì)檢查一遍，點(diǎn)一點(diǎn)關(guān)鍵的按鈕等。

當(dāng)我檢查頁面時(shí)，發(fā)現(xiàn)一個(gè)問題，我的導(dǎo)航條缺失了一些原本擁有的樣式，鼠標(biāo)放到子菜單項(xiàng)時(shí)不再變色了。

效果如下：

這雖然是個(gè)小問題，但還是會影響用戶體驗(yàn)的，所以必須要處理下。

分析

前端樣式上的問題相對還是比較容易解決的，畢竟不涉及什么邏輯。所以我也沒有上網(wǎng)搜索，而是直接在原網(wǎng)頁和更新版本后有 bug 的網(wǎng)頁分別打開 F12 開發(fā)者工具，一下就發(fā)現(xiàn)，更新版本后的網(wǎng)頁缺失了一段樣式。

缺失代碼如下：

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

原本當(dāng)鼠標(biāo)懸停到菜單項(xiàng)時(shí)，會自動為該元素添加 xx-active 類名，然后觸發(fā)上述樣式代碼變藍(lán)色。但更新版本后，這段代碼就消失了，所以沒有變色。

其實(shí)到這里就已經(jīng)知道 Bug 出現(xiàn)的原因了，解決方案也很簡單，再把這段缺失的代碼補(bǔ)上，寫到一個(gè)公共樣式里就可以了。

但對于一個(gè)倔強(qiáng)的程序員來說，遠(yuǎn)遠(yuǎn)不夠，我不僅要能解決 Bug，還要 深扒 一下這個(gè) Bug！

有同學(xué)問了：為啥呢？項(xiàng)目能正常跑不就行了么？

為何要深扒 Bug？

其實(shí)深扒 Bug 不是真的因?yàn)榫?，而是有一定?必要性 和好處，我是這么想的：

1. 明確狀況

組件庫代碼是別人寫的，你不清楚作者為什么要去掉這段樣式代碼。也許是無意，但也許是有其他的原因呢？真的是 Bug 么？那如果你再把這段樣式手動加上，會不會和其他的樣式產(chǎn)生沖突呢？所以有必要搞清楚他們修改的原因。

2. 明確職責(zé)

組件庫是別人提供的，我們只是整體引入現(xiàn)成的，如果組件庫出了 Bug，本應(yīng)交由官方修復(fù)，而不應(yīng)該由用戶自己想當(dāng)然地去做補(bǔ)丁和適配。

舉個(gè)例子，我四年級的時(shí)候，阿姨給我買了個(gè) MP4，我很喜歡，天天拿來看動畫片兒。但后來它突然開不了機(jī)了，我就輕輕摔一下它，哎，竟然突然好了！以后，只要開不了機(jī)，我就摔它，最后越摔越高，直到終于摔得屏幕粉碎、賊稀巴爛。

有時(shí)，你自己確實(shí)可以解決問題，但通常不如官方專業(yè)，尤其是知名項(xiàng)目，所以還是交給專業(yè)人士來處理吧~

如果真的是很多人都遇到的 Bug，官方一般也會給出解決方案。當(dāng)然，如果項(xiàng)目十分緊急，自己本地改掉也未嘗不可，但還是建議先多去了解下項(xiàng)目。

3. 開源建設(shè)

如果真的是未被發(fā)現(xiàn)的 Bug，你的提出和分析可以幫助到更多用到這個(gè)項(xiàng)目的小伙伴，何樂而不為呢？能發(fā)現(xiàn)和解決一個(gè)知名項(xiàng)目的 Bug 也是一件了不起的事。

4. 個(gè)人成長

以刨根問底的心態(tài)來面對和解決問題，我們就會收獲很多學(xué)編程的樂趣和進(jìn)步的空間，每個(gè) Bug 的解決都是一項(xiàng)比增刪改查更有意義的工作。

綜上，我很早之前就養(yǎng)成了習(xí)慣：時(shí)間允許的情況下，我會把 Bug 翻個(gè)底朝天。

追溯

那接下來我們來追溯下這個(gè) Bug，因?yàn)?Ant Design 是一個(gè)非常龐大的項(xiàng)目，代碼多、版本多，所以我們要先明確兩個(gè)邊界，便于定位 Bug 來源。

這兩個(gè)邊界分別是：版本邊界 和 代碼邊界 。

版本邊界很好理解，假設(shè)我的代碼是從 v14.0.0 版本升級到 v14.16.3 版本，那么這兩個(gè)版本號就是版本邊界（更細(xì)一點(diǎn)的話可以把每次提交都看作一個(gè)版本），Bug 只可能在其中出現(xiàn)。代碼邊界又可以叫組件邊界、模塊邊界等等，我們發(fā)現(xiàn)導(dǎo)航菜單出了問題，那么只需要關(guān)心這個(gè)組件代碼的改動。

因此，在找 Bug 的起源時(shí)，我先登錄 GitHub，找到 Ant Design 官方倉庫，打開了版本（Releases）列表：

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

在這個(gè)列表中改動點(diǎn)還挺多，但我們只需要關(guān)心 Menu 菜單組件，所以很快找到了這一行：

如圖，該版本有一個(gè)改動是 “修復(fù) Menu 暗色模式下，部分樣式被亮色模式污染的問題”，很明顯是改了 Menu 組件的代碼！

其實(shí)當(dāng)時(shí)我看到這里，就覺得大概率是這次改動的問題了，但還不確定，所以還要點(diǎn)進(jìn)本次改動詳情看看。

一進(jìn)去看代碼，就發(fā)現(xiàn)驚喜了！果然，本次改動移除了導(dǎo)航條菜單的懸停樣式：

害，Bug 果然是解決不完的，不知道這是哪位小糊涂寫的，改了一個(gè) Bug，又引入了一個(gè)新的 Bug 哈哈。

至此，真相大白。

處理

最后，我們再看看怎么處理這個(gè) Bug，我的項(xiàng)目因?yàn)椴患敝?，所以就先回退到了上一個(gè)正常的版本，把這個(gè)問題交給官方。

那么首先得讓官方知道你的問題對吧。

一般我們遇到官方組件的問題，或者是希望有什么新的特性，都可以發(fā)起一個(gè) issues（問題）。大家看，Ant Design 不愧為知名項(xiàng)目，Bug 多問題多也很正常，都有 20724 個(gè)問題了！

咱也有樣學(xué)樣提一個(gè) issue，Ant Design 團(tuán)隊(duì)為了管理大家的問題，提供了一個(gè)問題表單頁面，并且給你定好了一些規(guī)矩，避免一些亂七八糟不經(jīng)搜索就直接提出的低質(zhì)量問題。

提交完畢，就能看到自己創(chuàng)建的 issue 了，可以再打個(gè)小勾，表示自己已經(jīng)確認(rèn)沒有其他同學(xué)問過重復(fù)的問題。

在問題描述中，記得把你剛剛的分析過程補(bǔ)充上去，盡量全面，可能會更快地被解答~

OK，接下來等著官方去處理吧?？汕f別告訴我這不是 Bug，這是 Feature（特性），畢竟這種以肉換肉的 Feature 我接受不了，肯定很多用戶會受到影響的。

復(fù)盤

最后再次提醒大家，組件庫、框架的升級可是大事，在升級前最好把它中間版本的發(fā)展過程和改動點(diǎn)詳細(xì)看一遍，并且在升級后仔細(xì)檢查，防止被各種 Bug 所傷， 嚴(yán)重時(shí)可能還要把已升級的版本再退回來，得不償失。

如果本文有幫助，還請朋友們給本文 點(diǎn)贊 + 在看 支持下啦 ??