如何 debug 混淆后的 js ？
生產環境的代碼都是被混淆，因為發布環境下不會保存或關聯 sourcemap(否則混淆沒有任何意義了)，所以日志與報錯的堆棧都指向混淆后的代碼。開發人員持有 sourcemap 文件，除了有本地解析映射的需求外，有時也存在直接調試外網混淆代碼的需求，構建編譯后的代碼做了壓縮混淆，出現了出現了大量大的 a 、b 、 c 、 d 替換了原有的函數方法名、變量名，編譯后的代碼已經不是能通過單純的讀代碼碼能讀懂的了。但是我們通過 debug ，大概還是能看得懂。
那么有沒有方式使用本地的 sourceMap 調試生產環境的代碼？答案當然是有的。
如何在生產環境使用本地 sourceMap 調試？
第一步：打開混淆代碼
第二步：右鍵 -> 選擇【Add source map】
第三步：輸入本地 sourceMap 的地址（此處需要啟用一個靜態資源服務，可以使用 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 就可以修改；