開發者工具是所有主流瀏覽器內建的功能，不需要安裝任何外掛，按下 F12 或是右鍵點擊頁面選擇檢查，就可以開啟。它原本是為網頁開發者設計的工具，但對於任何想要了解網頁背後在做什麼的人來說，它提供了相當直接的觀察視角。
Elements 面板：看清楚頁面的真實結構
開發者工具打開後，預設顯示的通常是 Elements 面板，也就是頁面的 HTML 結構。 你看到的頁面上的每一個元素，文字、圖片、按鈕、表單，在這裡都對應一段 HTML 程式碼。點擊面板左上角的游標圖示，再移動到頁面上的任何元素，開發者工具就會自動跳到對應的 HTML 位置。 這個功能有幾個實際的使用情境： 查看隱藏的頁面元素 部分網站會把某些內容設定為隱藏，例如折疊的說明文字、隱藏的表單欄位，或是在特定條件下才顯示的提示。這些內容在 Elements 面板中仍然可以看到，即使它們在頁面上不可見。 確認連結的真實目標 在 Elements 面板中找到一個按鈕或連結對應的 HTML，可以看到它實際指向的網址，確認和顯示的文字是否一致。這在判斷可疑連結時非常實用。
Network 面板：監控頁面向哪些伺服器傳送了資料
Network 面板是開發者工具中對資安分析最有價值的部分之一。 打開 Network 面板後，重新載入頁面，面板會顯示這個頁面在載入過程中發出的所有網路請求，包括請求的目標網址、傳送的資料內容、伺服器的回應，以及每個請求花費的時間。 可以用來做什麼： 查看一個網站向哪些第三方域名發送了請求，確認是否有你不預期的資料傳輸目標。一個普通的新聞網站，可能同時向幾十個廣告和追蹤服務的伺服器發送請求，這些在正常瀏覽時完全不可見。 確認表單提交的目標。當你在一個頁面填寫表單並送出，Network 面板會顯示這筆資料實際傳送到了哪個網址，這可以用來驗證一個聲稱是官方的網站，它的表單資料是否真的傳送到官方的伺服器。
Console 面板：觀察頁面的錯誤與執行訊息
Console 面板顯示頁面的 JavaScript 執行紀錄，包括錯誤訊息、警告，以及開發者在程式碼中寫入的除錯輸出。 對一般使用者來說，Console 最直接的用途是觀察頁面是否有異常的錯誤，以及是否有不明的外部腳本在執行。 在 Console 面板的輸入列中，可以輸入 JavaScript 指令直接在當前頁面執行，這個功能讓開發者可以快速測試程式碼，但同時也是社交工程攻擊的一個切入點。部分詐騙手法會要求使用者把一段程式碼複製貼上到 Console 中執行，聲稱這樣可以完成某個操作，實際上是在利用使用者的操作執行惡意指令。在任何情況下，都不應該把不明來源提供的程式碼貼入 Console 執行。
Application 面板：查看網站儲存在你裝置上的資料
Application 面板顯示網站在你的瀏覽器中儲存的資料，包括 Cookie、LocalStorage 和 SessionStorage。 Cookie 查看 在 Application 面板的左側選單中，找到 Cookies，選擇目前的網站域名，可以看到這個網站在你的瀏覽器中設定的所有 Cookie，包括 Cookie 的名稱、內容、有效期限，以及是否設定了 HttpOnly 或 Secure 標記。 這讓你可以直接看到哪些 Cookie 是用於追蹤目的，哪些是功能性的登入憑證，以及這些 Cookie 的有效期限設定了多長。
用開發者工具判斷一個網站是否可疑
F12 開發者工具可以作為判斷網站可信度的輔助工具。以下幾個觀察點可以作為參考： 確認表單的提交目標 在可疑的登入頁面輸入測試資料，在 Network 面板中觀察表單提交的目標網址。如果一個聲稱是 Google 或 Facebook 登入頁面的網站，它的表單提交目標不是 accounts.google.com 或 facebook.com，就是一個明確的釣魚頁面指標。 查看頁面載入的外部資源來源 在 Network 面板中，確認頁面載入的主要資源是否都來自聲稱的官方域名，或是來自大量不相關的第三方域名。 確認 SSL 憑證的資訊 點擊網址列旁邊的鎖頭圖示，可以查看這個網站的 SSL 憑證是由哪個機構簽發的，以及憑證的有效期限和域名資訊。真正的官方網站通常有對應官方組織名稱的 EV 憑證，或是至少能確認憑證的域名與網址列一致。 延伸閱讀：假 Google 廣告與假搜尋結果：點進去之前，你確定自己找到的是真的官網嗎
關於 F12 開發者工具，使用者最常問的幾個問題
用 F12 查看網站的原始碼，這樣做合法嗎？
查看網頁的前端原始碼，也就是瀏覽器已經下載到你裝置上並用來呈現頁面的 HTML、CSS 和 JavaScript，是完全合法的。瀏覽器為了顯示頁面，必須把這些程式碼下載到你的裝置，F12 讓你查看的是已經在你裝置上的內容。 需要注意邊界的情況，是嘗試透過開發者工具繞過網站的存取限制、修改請求來取得未授權的資料，或是利用工具對網站進行測試，這些操作在沒有授權的情況下可能涉及法律問題。單純的查看和觀察，不構成任何法律問題。
在 Console 裡面執行指令會影響到網站的伺服器嗎？
不會直接影響。Console 裡執行的 JavaScript 指令，運作在你自己的瀏覽器環境中，對網站的伺服器沒有直接影響，它改變的是你的瀏覽器中這個頁面的本地呈現狀態，在你重新載入頁面後就會恢復原狀。但如果執行的指令包含向伺服器發送請求的操作，例如提交表單或觸發 API 呼叫，那就不只是本地端的改變了。無論如何，不要執行任何不明來源提供的 Console 指令。
Network 面板顯示的資料太多，怎麼快速找到有用的資訊？
Network 面板提供了幾個過濾功能可以幫助縮小範圍。面板頂部的過濾列可以輸入關鍵字篩選特定的請求，例如輸入你感興趣的域名部分，只顯示相關的請求。 類型過濾器可以讓你只看 XHR 或 Fetch 類型的請求，這類請求通常是頁面在背景傳送資料的動作，過濾掉圖片和樣式表後，有意義的資料請求更容易識別。對於想確認表單提交目標的情況，在提交表單的瞬間觀察 Network 面板中出現的新請求，通常可以快速找到目標。
One Key Takeaway： F12 開發者工具讓任何人都可以看到網頁表面之下的技術細節，從確認表單的提交目標到觀察頁面的追蹤行為，它是一個不需要任何技術背景就能開始使用的網站分析工具，也是判斷可疑網站最直接的輔助手段之一。