本系列文章所討論的 JavaScript 資安與逆向工程技術，旨在分享知識、探討防禦之道，並促進技術交流。
所有內容僅供學術研究與學習，請勿用於任何非法或不道德的行為。
讀者應對自己的行為負完全責任。尊重法律與道德規範是所有技術人員應共同遵守的準則。

本文同步發佈：https://nicklabs.cc/chrome-devtools-network

Chrome DevTools 不僅僅是開發者的工具更是資安研究員手中的強大武器。

MAC系統如何開啟DevTools ?

瀏覽器選單

點擊瀏覽器右上角的三個點 (⋮) > 選擇「更多工具」> 選擇「開發人員工具」。

右鍵選單

在網頁的任何地方按下滑鼠右鍵，然後選擇「檢查」。

此方法會自動打開 DevTools 並定位到你點選的那個元素上，非常適合用來分析特定的 UI 介面。

快捷鍵

• 打開上次使用的 DevTools。 Command + Option + I
• 直接打開Console。 Command + Option + J
• 直接打開Elements，並進入「檢查元素」模式。 Command + Shift + C

Windows系統如何開啟DevTools ?

瀏覽器選單

點擊瀏覽器右上角的三個點 (⋮) > 選擇「更多工具」> 選擇「開發人員工具」。

右鍵選單

在網頁的任何地方按下滑鼠右鍵，然後選擇「檢查」。

此方法會自動打開 DevTools 並定位到你點選的那個元素上，非常適合用來分析特定的 UI 介面。

快捷鍵

• 按 F12 鍵：這通常是打開 DevTools 最快的方法。
• 打開上次使用的 DevTools。 Ctrl + Shift + I
• 直接打開Console。 Ctrl + Shift + J
• 直接打開Elements，並進入「檢查元素」模式。 Ctrl + Shift + C

Network - 偵測網路行為

當我們載入一個網頁時，背後發生了許多事情。所有的資料傳輸、API 請求都可以在 Network 中一覽無遺。

打開 DevTools，切換到 Network，重新整理頁面。你會看到一連串的請求列表。

請求清單

紅框「 1 」的部分為載入這個網頁包含的所有請求。

欄位說明如下：

• Name: 請求的路徑名稱。
• Status: 請求的 HTTP 狀態碼（例如：200 OK、404 Not Found）。
• Protocol: 傳輸請求所使用的協定 （例如 http/1.1、h2、h3）。
• Type: 資源類型（例如：document、script、fetch/xhr）。
• Initator: 發起這個請求的來源。這是個非常重要且實用的欄位，它會告訴你請求是由哪個 JavaScript 檔案、哪一行程式碼觸發的。
• Size: 資源大小。
• Time: 請求花費的時間。

篩選請求類型

紅框「 2 」的部分是篩選請求，預設為 All 顯示所有請求，若當要分析的網頁請求眾多可以善用篩選功能過濾雜訊。

Fetch/XHR 篩選器顯示兩種主要的非同步請求：

• XHR: 這是比較早期的技術，讓網頁可以在不重新載入整個頁面的情況下，向伺服器發送請求並接收資料。
• Fetch: 這是較新、更現代的 Web API，提供了更強大且彈性的方式來發送網路請求。

搜尋請求路應名稱

紅框「 3 」的部分是搜尋請求路徑名稱，若已清楚需要觀察的路徑名稱，可直接輸入路徑名稱避免其他請求干擾。

Network - 詳細請求資訊

在 Network 請求列表中點擊一個請求後，Headers 會顯示該請求與回應的所有標頭資訊。

這部分主要分為三個區塊：General、Response Headers 和 Request Headers。理解這三者對於分析網路流量至關重要。

General

• Request URL: 請求的完整 URL。
• Request Method: 請求方法，如 GET, POST, PUT, DELETE 等。
• Status Code: 伺服器對該請求的回應狀態碼，例如 200, 404, 301。

以上三種資訊是最常需要瞭解的。

Response Headers

• Set-Cookie: 伺服器用來設定或更新瀏覽器 Cookie 的標頭。

需要特別注意這個資訊，因為它可能包含 Session ID 或其他敏感資訊。

Request Headers

通常身份驗證及請求校驗的資訊都會在Headers中。

Initiator

用於顯示這個請求是如何被觸發的。

已下圖範例來說，Request call stack 由下到上是從觸發事件到實際發出請求所歷經的所有過程也叫做呼叫堆疊（Call Stack）。

如果我們想知道實際上送出請求的程式在哪時可以點擊最上方「Send jquery.min.js:4」。

此時將會跳轉到「Sources」打開相對應的JavaScript檔並跳轉到目標行且反白標示。