大家好，我是若川。持續組織了6個月源碼共讀活動，感興趣的可以點此加我微信 ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列

導言

開發環境 debug 是每個程序員上崗的必備技能。生產環境呢？雖然生產環境 debug 是一件非常不優雅的行為，但是由于種種原因，我們又不得不這么干。

那我們今天講一講如何使用 chrome 在生產環境進行 debug 。

生產環境 debug 步驟

生產環境 debug 需要幾步？這問題和“把大象裝進冰箱攏共分幾步”一樣簡單。

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

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

第三步，關閉冰箱門。解決問題。

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

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

首先我們需要判斷，錯誤是前端還是后端報的，那么如何快速判斷？

方案一：根據對代碼的實現的了解，判斷報錯屬于前端還是后端。

這個方案前提是需要你對代碼實現很熟悉，也是最簡單的方式。

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

對應工程 gitlab 或者 vscode 或者 devTools global search 里去進行全局搜索。

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

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

方案四：使用 network search 進行搜索。

但是很多情況，接口業務錯誤會以 http status ?200 的狀態碼返回，如果此時請求了大量的接口（舉個例子：進入頁面調用了大量的接口，其中有一個接口返回了錯誤信息），那么除了逐個翻閱 network 這種低效的方式，chrome devTools 還提供了 network search 面板這種更便捷的方式，可以搜索接口詳細信息（包括詳細的返回信息），返回匹配結果。

如何打開 network search 面板？

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

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

如何快速定位到問題相關的代碼

global search ，全局搜素關鍵字，再定位到關鍵的代碼

chrome devTools 的 global search 是一個非常實用的一個功能，當你不知道需要調試的代碼在哪個文件時，當你是一個非常大的系統，引用了很多的資源文件，你可以使用 global search 進行搜索關鍵字，這個操作會搜索所有加載進來的資源，點擊搜索結果，就可以使用 source 面板打開對應的資源文件，然后格式化代碼，再然后在當前的文件內 再次搜索關鍵字，打斷點。

打開 global search 快捷鍵：

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

看下圖例子，我們隨便找個頁面根據提示搜索代碼：

可以嘗試使用哪些關鍵字進行搜索：

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

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

如何 debug 混淆后的 js ？

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

我們用一個最簡單的 demo ，對比一下代碼生產環境構建編譯前后的差距。

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

源代碼：

構建編譯后的代碼（此處關閉了 sourceMap ）：

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

那么有沒有方式使用本地的 sourceMap 調試生產環境的代碼？答案當然是有的。

如何在生產環境使用本地 sourceMap 調試？

第一步：打開混淆代碼

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

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

關聯上 sourceMap 后，我們就可以看到 sources -> page 面板上的變化了

如何在 chrome 中修改代碼并調試？

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

當然，你想要的 chrome devTools 都有。chrome devTools 提供了 local overrides 能力。

local overrides 如何工作的？

指定修改后的文件的本地保存目錄，當修改完代碼保存的時候，就會將修改后的文件保存到你指定的目錄目錄下，當再次加載頁面的時候，對應的文件不再讀取網絡上的文件，而是讀取存儲在本地修改過的文件。

local overrides 如何使用？

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

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

再然后，點擊頂部的授權，確認同意；

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

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

總結

chrome 調試技巧遠遠當然不只這些，以上只是生產環境 debug 的小技巧，祝愿大家用不到，最好的 bug 處理方式當然是事前，在上線前得到就解決；如果真的發生問題，如果做好監控和日志，在問題發生的第一時間發現并解決。

參考文獻

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

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經堅持寫了8年，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助3000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

掃碼加我微信 ruochuan02、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持~