鐵人賽 Day 3 Chrome DevTools 善用斷點 讓程式執行無所遁形
本系列文章所討論的 JavaScript 資安與逆向工程技術，旨在分享知識、探討防禦之道，並促進技術交流。
所有內容僅供學術研究與學習，請勿用於任何非法或不道德的行為。
讀者應對自己的行為負完全責任。尊重法律與道德規範是所有技術人員應共同遵守的準則。
在進行 JavaScript 資安逆向工程時，我們常遇到經過混淆或壓縮的程式碼。光靠靜態閱讀往往難以理解邏輯，這時斷點功能就派上用場。斷點能暫停程式執行，讓你像「現場解剖」一樣，逐步觀察程式如何運作。
Sources 功能概述
由左至右分別為「檔案瀏覽器、程式碼檢視區、偵錯工具區」，左側仍有更多功能，本篇僅介紹Page的功能
檔案瀏覽器
這個區域類似於「檔案總管」，主要功能是列出目前載入在瀏覽器中的所有資源，方便我們挑選與定位程式碼。
程式碼檢視區
這是本系列文章花最多時間停留的地方，負責顯示完整程式碼，並且可以設置斷點。
偵錯工具區
偵錯工具在進行斷點調適時可以實時的觀察變數以及針對不同的情況下斷點。
斷點 Breakpoints
如何下斷點
在檔案瀏覽器中選一個感興趣的JavaScript檔案，並在想停止程式運行的行號上按下這就是下斷點。
如下圖中「1」所標示
下完斷點後重新整理頁面待下一次程式執行到這時就會停止並跳出 Paused in debugger 的畫面。
美化程式碼
大多數經過編譯的JavaScript檔案會最小化，但是最小化的程式碼不方便閱讀，可以按下圖中「2」的按鈕美化程式碼
有了排版後可以更順利的閱讀最小化的程式碼。
斷點調適工具
當程式停止在斷點時，DevTools提供了五個功能按鈕可以更順利的調適，下圖「3」的位置
這五個按鈕的功能分別為
Resume script execution
當點擊時會繼續執行程式直到下一個可中斷的地方，若沒有可中斷的地方就直接離開斷點。
Step over next function call
單步執行，但不會進入函式內部，而是直接執行整個函式後，停在下一行。
通常如果知道這個函式執行的結果會選擇此功能。
Step into next function call
單步執行，會進入函式內部，讓你能觀察函式裡的細節。
通常如果不知道這個函式執行的結果而且這個函式輸出的內容會是我們需要的化就會選擇此功能。
Step out of current function
如果你已經在某個函式內，這個按鈕會直接跑完剩下的程式，並回到呼叫該函式的地方。
Step/Next execution line
逐行執行程式碼，一次只跑一行。
偵錯工具區 Scope
Scope 區域能看到目前可用的變數。如下圖所示
通常會在進入函式後步步調適進而觀察到變數的變化，可以更了解程式運作邏輯。
其他常用下斷點的方式
除了手動下斷點以外還能根據不同的事件進行不同程度的斷點調適
XHR/Fetch Breakpoints
當網頁程式碼呼叫 XMLHttpRequest 或 fetch 發送請求時，會在發起請求的那一行自動暫停。
Event Listener Breakpoints
針對事件中斷，有眾多事件可選擇如下圖所示。
其中常用的是在「Script > Script First Statement」功能是當JavaScript程式載入執行前進行斷點，這時可以做更多的操作。
偵錯工具區 Call Stack
每當一個函式被呼叫，JavaScript 引擎就會把它「壓入堆疊」，等函式執行完畢再把它「彈出」。
Call Stack 中顯示目前暫停位置是被哪一層層函式呼叫過來的。透過Call Stack幫你追蹤程式碼從哪裡開始跑到這裡。
下圖就是一個下斷點在 XHR send 的地方，你在Call Stack可以看到「堆疊清單」。
堆疊清單的最上方是目前程式暫停的行。
接著往下每一層就是呼叫它的函式來源。
堆疊清單最底層是事件觸發的位置，通常是滑鼠按下或計時器呼叫。
全域搜尋關鍵字
有些時候你好奇某一個變數是如何生成的，想快速找到他生成的位置可以透過全域搜尋關鍵字，來找到變數生成的位置。
MAC快捷鍵
Command + Option + F
Windows快捷鍵
Ctrl + Shift + F
也可以透過下圖的位置開啟
比如想搜尋 send 就可以快速在全部的檔案中搜尋到你想要的資訊。
