【總結(jié)】1194- 前端工程師生產(chǎn)環(huán)境 debugger 技巧

開發(fā)環(huán)境 debug 是每個(gè)程序員上崗的必備技能。生產(chǎn)環(huán)境呢？雖然生產(chǎn)環(huán)境 debug 是一件非常不優(yōu)雅的行為，但是由于種種原因，我們又不得不這么干。

那我們今天講一講如何使用 chrome 在生產(chǎn)環(huán)境進(jìn)行 debug 。

生產(chǎn)環(huán)境 debug 步驟

生產(chǎn)環(huán)境 debug 需要幾步？這問題和“把大象裝進(jìn)冰箱攏共分幾步”一樣簡單。

第一步，把冰箱門打開。F12 打開 devTools；

第二步，把大象裝進(jìn)冰箱。找到需要 debug 的前端文件，格式化，打斷點(diǎn)，調(diào)試上下文，定位問題；

第三步，關(guān)閉冰箱門。解決問題。

如何快速定位錯(cuò)誤是前端還是后端接口返回的？

在把大象裝進(jìn)冰箱之前，先初步判斷下，是否真的需要由你將大象裝進(jìn)冰箱。

首先我們需要判斷，錯(cuò)誤是前端還是后端報(bào)的，那么如何快速判斷？

方案一：根據(jù)對代碼的實(shí)現(xiàn)的了解，判斷報(bào)錯(cuò)屬于前端還是后端。

這個(gè)方案前提是需要你對代碼實(shí)現(xiàn)很熟悉，也是最簡單的方式。

方案二：前端代碼全局搜索關(guān)鍵字，工程代碼里搜索/控制臺打開搜索。

對應(yīng)工程 gitlab 或者 vscode 或者 devTools global search 里去進(jìn)行全局搜索。

方案三：翻閱 network 面板中的請求。

翻閱 network 面板中的請求，看下返回的 response 是否攜帶錯(cuò)誤提示，有則表示后端返回的；如果報(bào)錯(cuò)的接口剛好是以非200 的狀態(tài)返回，或者是由新的操作觸發(fā)調(diào)用接口，我們很快就能查找到對應(yīng)的接口，如下：

方案四：使用 network search 進(jìn)行搜索。

但是很多情況，接口業(yè)務(wù)錯(cuò)誤會以 http status ?200 的狀態(tài)碼返回，如果此時(shí)請求了大量的接口（舉個(gè)例子：進(jìn)入頁面調(diào)用了大量的接口，其中有一個(gè)接口返回了錯(cuò)誤信息），那么除了逐個(gè)翻閱 network 這種低效的方式，chrome devTools 還提供了 network search 面板這種更便捷的方式，可以搜索接口詳細(xì)信息（包括詳細(xì)的返回信息），返回匹配結(jié)果。

如何打開 network search 面板？

在 network 面板中，按快捷鍵 ?? + F（Mac）、 CTRL + F（Windows）可呼出 network search 面板。

如果確定需要你把大象裝進(jìn)冰箱，那把大象裝進(jìn)冰箱的技巧有哪些？

如何快速定位到問題相關(guān)的代碼

global search ，全局搜素關(guān)鍵字，再定位到關(guān)鍵的代碼

chrome devTools 的 global search 是一個(gè)非常實(shí)用的一個(gè)功能，當(dāng)你不知道需要調(diào)試的代碼在哪個(gè)文件時(shí)，當(dāng)你是一個(gè)非常大的系統(tǒng)，引用了很多的資源文件，你可以使用 global search 進(jìn)行搜索關(guān)鍵字，這個(gè)操作會搜索所有加載進(jìn)來的資源，點(diǎn)擊搜索結(jié)果，就可以使用 source 面板打開對應(yīng)的資源文件，然后格式化代碼，再然后在當(dāng)前的文件內(nèi) 再次搜索關(guān)鍵字，打斷點(diǎn)。

打開 global search 快捷鍵：

? + ? + F （Mac），CTRL + SHIFT + F （Windows）

看下圖例子，我們隨便找個(gè)頁面根據(jù)提示搜索代碼：

可以嘗試使用哪些關(guān)鍵字進(jìn)行搜索：

(1) 頁面存在明確的報(bào)錯(cuò)信息，且已經(jīng)明確該錯(cuò)誤文案是寫在前端代碼中錯(cuò)誤信息文案。提示信息在 coding 過程中一般是使用 字符串，壓縮混淆過程中一般是不會進(jìn)行處理的，會保留原文，當(dāng)然代碼打包構(gòu)建過程中，對代碼壓縮混淆也可以選擇對中文進(jìn)行 unicode 轉(zhuǎn)碼，此時(shí)如果關(guān)鍵字是中文，就需要先轉(zhuǎn)碼再搜索了。

(2) 已知相關(guān)代碼中存在的編譯混淆后依然還保留的的關(guān)鍵代碼，會向外暴露的方法名；

如何 debug 混淆后的 js ？

生產(chǎn)環(huán)境的 js 基本上都是混淆過的（點(diǎn)擊了解前端代碼的壓縮混淆 (https://todo.com/)），壓縮混淆的優(yōu)點(diǎn)就不贅述了，壓縮混淆后隨之來的是生產(chǎn)環(huán)境調(diào)試的難度，雖然通過打斷點(diǎn)，勉強(qiáng)還能看的懂，但是已經(jīng)很反人類了。

我們用一個(gè)最簡單的 demo ，對比一下代碼生產(chǎn)環(huán)境構(gòu)建編譯前后的差距。

這里選擇用 vue-cli 創(chuàng)建了一個(gè)最簡單的 demo ，看下源代碼和編譯后的代碼。

源代碼：

構(gòu)建編譯后的代碼（此處關(guān)閉了 sourceMap ）：

這里我們看到構(gòu)建編譯后的代碼做了壓縮混淆，出現(xiàn)了出現(xiàn)了大量大的 a 、b 、 c 、 d 替換了原有的函數(shù)方法名、變量名，編譯后的代碼已經(jīng)不是能通過單純的讀代碼碼能讀懂的了。但是我們通過 debug ，大概還是能看得懂。

那么有沒有方式使用本地的 sourceMap 調(diào)試生產(chǎn)環(huán)境的代碼？答案當(dāng)然是有的。

如何在生產(chǎn)環(huán)境使用本地 sourceMap 調(diào)試？

第一步：打開混淆代碼

第二步：右鍵 -> 選擇【Add source map】

第三步：輸入本地 sourceMap 的地址（此處需要啟用一個(gè)靜態(tài)資源服務(wù)，可以使用 http-server (https://www.npmjs.com/package/http-server)），完成。本地代碼執(zhí)行構(gòu)建命令，注意需要打開 sourceMap 配置，編譯產(chǎn)生出構(gòu)建后的代碼，此時(shí)構(gòu)建后的結(jié)果會包含 sourceMap 文件。

關(guān)聯(lián)上 sourceMap 后，我們就可以看到 sources -> page 面板上的變化了

如何在 chrome 中修改代碼并調(diào)試？

開發(fā)環(huán)境中，我們可以直接在 IDE 中修改代碼，代碼的變更就直接更新到了瀏覽器中了。那么生產(chǎn)環(huán)境，我們可以直接在 chrome ?中修改代碼，然后立馬看代碼修改后的效果嗎？

當(dāng)然，你想要的 chrome devTools 都有。chrome devTools 提供了 local overrides 能力。

local overrides 如何工作的？

指定修改后的文件的本地保存目錄，當(dāng)修改完代碼保存的時(shí)候，就會將修改后的文件保存到你指定的目錄目錄下，當(dāng)再次加載頁面的時(shí)候，對應(yīng)的文件不再讀取網(wǎng)絡(luò)上的文件，而是讀取存儲在本地修改過的文件。

local overrides 如何使用？

首先，打開 sources 下的 overrides 面板；

然后，點(diǎn)擊【select folder overrides】選擇修改后的文件存儲地址；

再然后，點(diǎn)擊頂部的授權(quán)，確認(rèn)同意；

最后，我們就可以打開文件修改，修改完成后保存，重新刷新頁面后，修改后的代碼就被執(zhí)行到了。

??注意，原js文件直接 format 是無法修改的；在代碼 format 之前先添加無效代碼進(jìn)行代碼變更進(jìn)行保存，然后再 format 就可以修改；

總結(jié)

chrome 調(diào)試技巧遠(yuǎn)遠(yuǎn)當(dāng)然不只這些，以上只是生產(chǎn)環(huán)境 debug 的小技巧，祝愿大家用不到，最好的 bug 處理方式當(dāng)然是事前，在上線前得到就解決；如果真的發(fā)生問題，如果做好監(jiān)控和日志，在問題發(fā)生的第一時(shí)間發(fā)現(xiàn)并解決。

參考文獻(xiàn)

• https://developer.chrome.com/docs/devtools/

回復(fù)“加群”與大佬們一起交流學(xué)習(xí)~

點(diǎn)擊“閱讀原文”查看 130+ 篇原創(chuàng)文章