# 瀏覽器除錯器（DevTools）基礎

::: tip 💡 核心作用
瀏覽器開發者工具（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 瀏覽器的除錯介面。
**請嘗試點擊下方的「▶ 開始自動導覽」按鈕，跟隨游標了解各個區域的功能。**

<ClientOnly>
  <BrowserDevToolsDemo />
</ClientOnly>

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

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

**請嘗試：**

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

<ClientOnly>
  <BrowserDevToolsLiveDemo />
</ClientOnly>

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

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

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

::: info 🤔 為什麼重新整理後就沒了？
你可能會發現，當你重新整理頁面後，所有的修改都消失了，網頁又變回了原來的樣子。

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

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

---

## 3. 核心面板詳解

### 3.1 Elements (元素面板)

<ClientOnly>
  <DevToolsElementsDemo />
</ClientOnly>

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

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

### 3.2 Console (主控台面板)

<ClientOnly>
  <DevToolsConsoleDemo />
</ClientOnly>

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

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

### 3.3 Network (網路面板)

<ClientOnly>
  <DevToolsNetworkDemo />
</ClientOnly>

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

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

### 3.4 Sources (原始碼面板)

<ClientOnly>
  <DevToolsSourcesDemo />
</ClientOnly>

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

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

### 3.5 Application (應用面板)

<ClientOnly>
  <DevToolsApplicationDemo />
</ClientOnly>

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

- **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 節點截圖儲存為圖片。

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