Chrome Dev Tool 的好用功能 - overrides

Chrome Dev tool 隨著開發演進也增加了很多方便的功能
overrides 是最近發現好用的功能之一
官方說明 https://developers.google.com/web/updates/2018/01/devtools#overrides

有時候會一些網頁錯誤的原因可能是網路因素
如果這錯誤是網頁一載進來就會發生
而且又不好在 local 重現，那麼在過去還真是不好處理

過去的常見做法可能是我們撰寫用 setTimeout 模擬延遲的程式
只是缺點是：
1. 用猜測的參數撰寫的模擬並不能完全表示出實際狀況，所以不一定能解決實際問題
2. 撰寫模擬的 code 有可能會很多且複雜

Chrome 在 65 版後加入這個功能
讓我們可以在實際的線上環境中套用自己的修改測試問題
直接面對實際狀況比過去的方式好用多了
啟用步驟可以直接看Google文章的說明
在 Google dev tool 的 source 頁籤裡的子頁籤的 Page / FileSystem 那邊多了一個子頁籤 overrides
選擇並給予 Chrome 權限能存取並建立修改紀錄在指定的 local 檔案
記得把 Enable Local Overrides 打勾後就能正式啟用
source 裡能修改，完成後按 ctrl + s 儲存變更
之後即使頁面重新整理，Chrome也會使用編輯後的 code 替代原始內容
如此就能用來驗證錯誤的原因跟找出合適的處理方法了