有時候我們在爬取
某個用 js 渲染的網站
需要去分析一下
別人網站的數據展示規則
這個時候就不得不用 Chrome 的 DevTools 進行分析了
對於一般的網站
我們在具體的位置打個斷點就可以進行調試了
不過有一些網站
當你打開 DevTools 的時候你都還沒打斷點他媽的直接就這樣了
一直 debug
只要一按 F2 就一直 debug
就算你運行過去
還是一直 debug一直調用卡死你卡死你卡死你
就是不讓你進行調試
你奈我何
哇靠啊
怎麼解決呢
接下來就是學習反反 debug 的正確姿勢
來來來
莫慌
小帥b先跟你說說
在 Chrome 的開發者工具中怎麼樣在代碼裏面打斷點
我們最常用的操作就是在想要打斷點的代碼行左側用鼠標輕輕點一下
就可以生成一個圖標
然後就可以對這行代碼開始進行調試了
這樣的操作也可以直接在代碼中操作使用 debugger 這個關鍵字就可以了
比如這樣的 js
console.log('a');
console.log('b');
debugger;
console.log('c');
當 Chrome 在運行的時候發現了 debugger
就會停下來
進入調試模式
其實在代碼中聲明 debugger
就和我們點擊代碼行左側進行調試是一樣的
也正是因爲這個關鍵字
所以就可以從它入手
只要在首頁的 js 中
寫一個方法不斷的循環執行 debugger
比如
while true{ debugger;}那麼當我們打開這個網頁 的調試面板的時候
就會不停的處於 debug 模式
即使你瘋狂的點擊運行按鈕
也無濟於事
其實 Chrome 有一個 忽略斷點 的功能
只要在代碼行左側
點擊右鍵 選擇 Never pause here 即可 然後就會有個黃色的標識
當下次運行到這裏的時候 就會忽略這個斷點
這對於一些簡單的很有效
但是 有些比較 變態 的就沒那麼容易了
比如這個
就算我忽略了 它還是會瘋狂進入 debug 模式
看看右邊的 Call stack
一直瘋狂的調用 _0xa3e3cc喫你的內存
把你搞的不要不要的
那怎麼辦好呢？
只能看看它的源碼了
可以看到
2949 行
一直在遞歸調用_0xa3e3cc 函數
所以我們纔會一直處於 debug 模式
既然已經問題出現在哪裏了
那就想辦法把這個給搞掉
還記不記得我們之前說的 mitmproxy
沒錯
這次走它的代理然後攔截這個網頁把 js 中的 debugger 代碼去掉
然後我們不用受這個罪了呀
快點開啓我們的 mitmweb
設置地址攔截
瀏覽器設置好代理
打開代理之後訪問一波
這時候被我們攔截下來了
請求我們直接讓它過去
因爲我們只要攔截返回的數據
然後對它進行修改
ok現在我們就攔截到返回的數據了
修改一下代碼
點擊這支筆
可以看到現在的代碼難看
複製出來用編輯器打開吧
把調用遞歸的代碼去掉
把 debugger 關鍵字換成 return
複製到 mitmweb 替換
右上角的勾給打上然後運行
此時此刻瀏覽器得到的就是修改過的文件
打開 F12
可以看到
不會在一直 debug 噁心我們了
可能不同的網站
反 debug 的實現不同
思路就是這麼個思路
以不變應萬變
下回見了哦peace