瀏覽器開發者工具 (DevTools) 指南

💡 核心作用

瀏覽器開發者工具（DevTools）是前端開發的「X 光機」和「手術台」。它能讓你看穿網頁的骨架（HTML）、皮膚（CSS）和神經系統（JavaScript），並且允許你即時地修改和除錯它們。

1. 什麼是 DevTools？

DevTools 是現代瀏覽器（Chrome、Edge、Firefox、Safari 等）內建的一套 Web 開發和除錯工具。對於開發者來說，它比程式碼編輯器更接近「真相」，因為它展示的是程式碼在瀏覽器中實際執行的樣子。

如何開啟 DevTools？

• 快捷鍵：F12 或 Ctrl + Shift + I（Mac: Cmd + Option + I）
• 滑鼠：在網頁任意元素上右鍵點擊，選擇 「檢查 (Inspect)」。
• 選單：瀏覽器右上角選單 -> 更多工具 -> 開發者工具。

---

2. 互動式演示：DevTools 模擬器

為了讓你快速上手，我們製作了一個模擬的 DevTools 面板，複刻了 Chrome 瀏覽器的除錯介面。 請嘗試點擊下方的「▶ 開始自動導覽」按鈕，跟隨游標了解各個區域的功能。

2.1 進階演示：即時修改網頁 (Live Edit)

DevTools 最強大的功能之一就是即時修改。下方的演示包含了一個「虛擬網頁」（上方）和一個「DevTools」（下方）。

請嘗試：

1. 在下方的 Elements 面板中，點擊 DOM 樹中的 h1 或 button 元素。
2. 在右側的 Styles 面板中，修改 element.style 中的屬性值（例如將 color 改為 red）。
3. 觀察上方的虛擬網頁如何即時發生變化。

2.2 實戰挑戰：修改真實網頁文字

既然你已經掌握了修改樣式的技巧，現在讓我們來點更刺激的——直接修改你目前看到的網頁！

1. 開啟真實的 DevTools：按下 F12（或右鍵點擊本行文字 -> 選擇「檢查」）。
2. 定位元素：在 Elements 面板中，你會看到一行被高亮選中的程式碼，那正是你剛剛點擊的文字。
3. 修改內容：雙擊 這行程式碼中的黑色文字部分，將其修改為「我是駭客！」，然後按下 Enter。
4. 見證奇蹟：看！網頁上的文字是不是變了？

🤔 為什麼重新整理後就沒了？

你可能會發現，當你重新整理頁面後，所有的修改都消失了，網頁又變回了原來的樣子。

這是因為 DevTools 的修改僅僅發生在你的瀏覽器本地記憶體中。

• 當你造訪網頁時，瀏覽器從遠端伺服器下載了 HTML 程式碼並在本地渲染出來。
• 你修改的只是本地的副本，並沒有權限去修改伺服器上的原始碼。
• 所以每次重新整理，瀏覽器都會重新去伺服器拉取最新的（未被修改的）程式碼，一切就復原了。

---

3. 核心面板詳解

3.1 Elements (元素面板)

作用：檢視和即時編輯頁面的 HTML 和 CSS。

• 左側 (DOM 樹)：顯示網頁的 HTML 結構。你可以雙擊標籤或文字進行修改，甚至拖曳節點改變位置。
• 右側 (Styles)：顯示選中元素的 CSS 樣式。你可以勾選/取消樣式檢視變化，或者直接修改數值（如顏色、邊距）。
• 應用場景：
  • 「為什麼這個按鈕沒有對齊？」-> 檢查 CSS 樣式。
  • 「我想試試這個標題變成紅色好看嗎？」-> 直接在 Styles 裡修改 color: red。

3.2 Console (主控台面板)

作用：檢視日誌資訊，執行 JavaScript 程式碼。

• 日誌輸出：網頁執行時的 console.log() 資訊、警告（黃色）和報錯（紅色）都會顯示在這裡。
• 互動環境：你可以在這裡輸入任意 JS 程式碼並立即執行。例如輸入 alert('Hello') 會彈出視窗，輸入 document.body.style.background = 'red' 會把背景變紅。
• 應用場景：
  • 「為什麼點擊按鈕沒反應？」-> 檢視是否有紅色報錯資訊。
  • 「驗證一個 JS 函式的回傳值。」-> 直接在主控台執行測試。

3.3 Network (網路面板)

作用：監控所有網路請求。

• 列表檢視：顯示載入的所有資源（HTML、CSS、JS、圖片、介面請求）。
• 互動詳情：點擊任意請求行，右側會滑出詳情面板：
  • Headers (標頭)：檢視請求標頭、回應標頭（如 Content-Type）。
  • Response (回應)：檢視伺服器返回的原始資料（JSON、HTML 程式碼等）。
  • Preview (預覽)：以更易讀的格式預覽回應內容。
• 關鍵指標：
  • Status：狀態碼（200 成功，404 找不到，500 伺服器錯誤）。
  • Type：資源類型（fetch/xhr 代表介面請求）。
  • Time：載入耗時。
• 應用場景：
  • 「介面是不是掛了？」-> 看介面請求是不是紅色的 500。
  • 「頁面載入為什麼這麼慢？」-> 找哪個圖片或檔案載入時間最長。

3.4 Sources (原始碼面板)

作用：檢視原始碼，除錯 JavaScript。

• 中斷點除錯：點擊行號可以設定「中斷點 (Breakpoint)」。當程式碼執行到這一行時會暫停，讓你有機會檢視目前的變數值，並逐步執行程式碼。
• 應用場景：
  • 「程式碼邏輯哪裡出錯了？」-> 設定中斷點，一步步看著程式碼跑，檢視變數值是否符合預期。

3.5 Application (應用面板)

作用：檢視和管理瀏覽器儲存。

• Storage：
  • Local Storage：持久化儲存的資料。
  • Session Storage：會話級儲存（關閉分頁消失）。
  • Cookies：用於身分驗證等的小型文字資料。
• 應用場景：
  • 「清除登入狀態」-> 刪除 Cookies 或 Local Storage 中的 token。
  • 「檢視快取的資料」-> 檢查 Local Storage 裡存了什麼。

---

4. 實戰小技巧

1. 手機模式除錯：點擊 DevTools 左上角的「手機圖示」📱，可以模擬不同型號的手機（iPhone、Pixel 等）螢幕尺寸，測試網頁的響應式效果。
2. 強制狀態：在 Elements 面板，右鍵點擊一個元素，選擇 Force state -> :hover，可以強制讓元素保持懸停狀態，方便除錯滑鼠懸停時的樣式。
3. 截圖節點：在 Elements 面板選中一個節點，按下 Ctrl + Shift + P（Mac: Cmd + Shift + P）開啟命令選單，輸入 screenshot，選擇 Capture node screenshot，可以直接把這個 DOM 節點截圖儲存為圖片。

⚠️ 注意

DevTools 中的所有修改（修改 HTML、CSS、JS）都是臨時的，僅在目前瀏覽器頁面生效。一旦重新整理頁面，所有修改都會消失。如果想永久生效，必須修改你的原始碼檔案。