為什么我的代碼在測試環(huán)境跑得好好的,一到用戶電腦就崩?原來兇手躲在地址欄旁邊
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
引言 “Bug 無法復(fù)現(xiàn),建議關(guān)閉。” 這是我上周在一個(gè) issue 下面看到的回復(fù)。發(fā) issue 的用戶是個(gè)忠實(shí)用戶,他說我們網(wǎng)站的某個(gè)按鈕點(diǎn)完后頁面就白屏了,但我們在測試環(huán)境、預(yù)發(fā)環(huán)境、甚至他的電腦上用無痕模式都試了一遍,愣是沒復(fù)現(xiàn)。 就在我準(zhǔn)備把這個(gè) issue 標(biāo)記為“無法復(fù)現(xiàn),關(guān)閉”的時(shí)候,產(chǎn)品經(jīng)理幽幽地說了一句:“要不你試試裝幾個(gè)瀏覽器插件?” 我當(dāng)時(shí)心想:插件能影響我們代碼?那不至于吧。 結(jié)果我裝了 AdBlock、裝了油猴腳本、裝了某個(gè)購物比價(jià)插件,刷新頁面,點(diǎn)擊按鈕——白屏了。 那一刻我恍然大悟:原來我們的代碼一直生活在“無菌實(shí)驗(yàn)室”里,而用戶的瀏覽器,是一個(gè)充滿了各種“妖魔鬼怪”的叢林。 今天,我們就來聊聊那些躲在地址欄旁邊的“兇手”——瀏覽器擴(kuò)展(Extensions),以及它們?nèi)绾吻那牡仄茐哪愕木W(wǎng)頁。 一、瀏覽器擴(kuò)展:用戶的朋友,開發(fā)者的噩夢瀏覽器擴(kuò)展(Chrome/Firefox/Edge 插件)本質(zhì)上是在用戶瀏覽器里運(yùn)行的第三方代碼。它們擁有各種權(quán)限:
這些權(quán)限對用戶來說是“增強(qiáng)功能”,但對我們開發(fā)者來說,就是一顆不知道什么時(shí)候會(huì)炸的雷。 1.1 最常見的“作案手法”手法一:往 DOM 里塞私貨 很多廣告攔截插件會(huì)掃描頁面里的廣告位,然后移除或隱藏它們。但如果你的代碼恰好依賴某個(gè)被移除的 DOM 節(jié)點(diǎn),就會(huì)報(bào)錯(cuò)。 手法二:修改全局變量 有些插件會(huì)往 手法三:攔截并修改網(wǎng)絡(luò)請求 某些比價(jià)插件會(huì)在頁面加載時(shí)修改 fetch 或 XMLHttpRequest,往請求里加參數(shù)、改返回值。如果你的代碼對返回?cái)?shù)據(jù)格式有嚴(yán)格校驗(yàn),就可能崩。 手法四:注入大量 CSS 導(dǎo)致樣式錯(cuò)亂 很多暗黑模式插件會(huì)強(qiáng)制給頁面添加 二、真實(shí)案例:一次被插件坑到懷疑人生的經(jīng)歷去年有個(gè)用戶反饋:我們網(wǎng)站的一個(gè)下拉菜單點(diǎn)不開。我們團(tuán)隊(duì)三臺(tái)電腦都試了,沒問題。后來讓用戶錄屏,發(fā)現(xiàn)他的瀏覽器右上角有一排插件圖標(biāo),大概七八個(gè)。 我讓用戶把插件一個(gè)個(gè)關(guān)掉試試。關(guān)到第三個(gè)——廣告攔截器——菜單能點(diǎn)了。 后來排查發(fā)現(xiàn),那個(gè)廣告攔截器有一條規(guī)則,把我們的菜單按鈕識(shí)別成了廣告彈窗,給它加上了 解決方案?我們在 CSS 里給菜單按鈕加了一個(gè)更高優(yōu)先級的規(guī)則,并且改了 HTML 結(jié)構(gòu),避開了那個(gè)插件的檢測規(guī)則。 從那以后,我養(yǎng)成了一個(gè)習(xí)慣:在調(diào)試“用戶反饋但本地?zé)o法復(fù)現(xiàn)”的 bug 時(shí),先問一句:“你裝了哪些插件?” 三、常見的“兇手插件”類型
四、如何檢測和防范“插件污染”?4.1 開發(fā)階段:用插件測試自己在開發(fā)時(shí),建議裝幾個(gè)常見的“破壞性”插件,時(shí)不時(shí)開著它們測試一下自己的頁面。你會(huì)發(fā)現(xiàn)很多之前沒想過的問題。 4.2 代碼層面:防御性編程
4.3 異常捕獲與上報(bào)在代碼里加上 代碼高亮:
window.addEventListener('error', (event) => { // 上報(bào)錯(cuò)誤,附帶上用戶安裝了哪些插件(如果能檢測到的話) reportError({ message: event.message, filename: event.filename, // 可以嘗試讀取用戶安裝的插件,雖然不能完全讀取,但部分插件會(huì)在 DOM 上留下痕跡 extensions: detectExtensions() }); }); 4.4 教用戶“排除法”當(dāng)用戶反饋 bug 時(shí),可以提供一個(gè)標(biāo)準(zhǔn)操作:
這比你在本地猜來猜去要高效得多。 五、檢測用戶裝了哪些插件(有限但有用)雖然你不能直接讀取用戶安裝的所有插件(隱私原因),但你可以通過一些“痕跡”來推測: 六、總結(jié):擁抱不確定性瀏覽器插件是用戶自主安裝的,我們無法禁止,也不應(yīng)該禁止。但我們可以通過防御性編程 + 異常監(jiān)控 + 用戶溝通,讓頁面在面對這些“不速之客”時(shí)更加健壯。 下次當(dāng)你遇到“測試環(huán)境正常,用戶環(huán)境報(bào)錯(cuò)”的 bug 時(shí),別急著懷疑自己的代碼,先看看用戶的地址欄旁邊——可能有個(gè)小小的圖標(biāo),正在悄悄給你的頁面使絆子。 參考文章:原文鏈接? 該文章在 2026/4/2 15:39:07 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... |