sanbuphy
133 lines
6.7 KiB
Markdown
133 lines
6.7 KiB
Markdown
# 浏览器调试器 (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 (元素面板)
|
||
|
||
**作用**：查看和实时编辑页面的 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 节点截图保存为图片。
|
||
|
||
::: warning ⚠️ 注意
|
||
DevTools 中的所有修改（修改 HTML、CSS、JS）都是**临时的**，仅在当前浏览器页面生效。一旦刷新页面，所有修改都会丢失。如果想永久生效，必须修改你的源代码文件。
|
||
:::
|