兩個實用的調試技巧
- 2020 年 3 月 9 日
- 筆記
逆向找腳本
平常我們開發的時候，想調試功能流程或者定位某個狀態下的一些值的變化，我們可以使用debugger關鍵字，或者直接在瀏覽器控制台里打斷點，像這樣：
不過，如果我們遇到傳說級別的，動則幾萬、幾十萬行的代碼，並且分佈非常混亂上面的方法或許不是很方便。
對於這類業務代碼，其實更多是更新迭代小功能，那麼有沒有辦法能夠幫助我們快速定位到我們要想修改的地方呢？
谷歌為我們提供了dom上的斷點，可以檢測三種情況:
- Subtree modifications: 在移除或添加當前所選節點的子級，或更改子級內容的時候觸發該斷點。
- Attributes modifications：在當前所選節點上添加或移除屬性的時候會觸發
- Node Removal： 在移除當前節點的時候觸發
‘偷’資源
這裡說的’偷’是閱讀別人的代碼，下載一些圖片、視頻資源等操作，不用做商業用途自己用用還是沒問題的。
這個會面對的問題學名叫做：前端反調試。
為什麼會有這個東西呢？因為瀏覽器環境太不安全了，以至於我們的代碼無時無刻都有可能被別人竊取、篡改，我們的辛辛苦苦創作的資源也很容易被別人利用，所以我們有代碼混淆、壓縮，反調試等等方法，來過濾部分人，反與被反的鬥爭持續至今。
這裡我們是’被反’者。
有段時間很喜歡看熱血動漫，但是資源或不好找或付費，很是煩惱，所以就去某網站去爬取資源並下載下來，但是當我打開控制台的時候，我發現我無法使用dom選擇器選中dom，因為有個斷點在不斷地循環：
通過查看源代碼，發現它是一段亂糟糟的代碼：
雖然我們看到很多_xxxxx的代碼，但是不難發現一個規律，這些是由下劃線 加 16進制數字組成的js合法變量名，這就是第一步混淆、壓縮(圖片已解壓)。然後我們還看到了幾個明顯的debugger，這就是阻止我選中dom的主要根源，一個死循環斷點，我們可以換一個清晰地代碼進行演示：
function loop() { setTimeout(function() { loop(); }, 100); debugger; } loop();這段代碼有兩個壞處：
- 一個空的無任何作用的死循環斷點。再打開控制台後會一直執行
- 會產生無數個定時器計數器，並且沒有被回收，會造成內存泄漏(內存泄漏詳見 >>>)
第二點會很快造成你的瀏覽器卡頓，讓你想操作都操作都操作不了。
對於這種比較常見的反調試我們有兩種選擇：
- 可以直接禁止掉瀏覽器的斷點功能
- 用同樣的函數名去覆蓋他的反前端函數
當然方法不只這兩種，如果你有更好的方法，歡迎下面評論。
這就是這次的全部內容了，最近會比較忙，所以更新內容不會很長，請諒解。
如果你能看到這裡，不妨點個關注、評個論支持一下，大家的熱情就是我的動力。
