test-repo/docs/zh-cn/appendix/2-development-tools/debugging-art/index.md

# 浏览器调试器 (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.  **修改内容**：**双击** 这行代码中的黑色文字部分，将其修改为“**我是黑客！**”，然后按下回车。
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）都是**临时的**，仅在当前浏览器页面生效。一旦刷新页面，所有修改都会丢失。如果想永久生效，必须修改你的源代码文件。
:::