什么是浏览器开发者工具

前端开发者的"X光机"

浏览器开发者工具（DevTools） 是内置在浏览器中的调试工具，按 F12 即可打开。它能让你看到网页的"内部结构"，是前端开发中最重要的调试工具。

💡 类比：DevTools 就像医院的X光机。网页表面看起来正常，但打开 DevTools，所有 HTML 结构、CSS 样式、网络请求、JS 报错都一览无余。

如何打开 DevTools

Elements 面板：查看页面结构

Elements 面板显示页面的 HTML 结构和 CSS 样式，你可以实时修改并立即看到效果：

能做什么？

提示：在 Elements 中的修改只是临时的，刷新页面后就会恢复。

Console 面板：日志和调试

Console 是前端开发最常用的面板，用来查看日志、测试代码、排查错误。

常见用法

// 输出日志
console.log("普通信息");
console.warn("警告信息");    // 黄色
console.error("错误信息");   // 红色

// 输出对象（可展开查看）
console.log({ name: "张三", age: 25 });

// 输出表格
console.table([
  { name: "张三", score: 90 },
  { name: "李四", score: 85 },
]);

// 计时
console.time("请求耗时");
await fetch("/api/data");
console.timeEnd("请求耗时");  // 请求耗时: 123ms

错误信息怎么看？

Network 面板：查看网络请求

Network 面板记录了页面加载的所有HTTP请求，是调试 API 问题的利器。

Network 面板中的关键信息

调试 API 请求的步骤

1. 打开 Network 面板
2. 操作页面（如点击按钮）触发请求
3. 点击对应的请求查看详情
4. 检查 Headers 看请求参数是否正确
5. 检查 Response 看返回数据是否符合预期
6. 如果有错误，看 Status Code 判断是前端还是后端的问题

Application 面板：存储数据

查看浏览器中存储的数据：

实用技巧

1. 快速定位元素

右键页面上的任何元素 → 检查，直接跳到 Elements 面板中对应的位置。

2. 模拟手机屏幕

点击 DevTools 左上角的手机图标（或按 Ctrl+Shift+M），可以模拟不同尺寸的手机屏幕。

3. 禁用缓存

在 Network 面板勾选 Disable cache，确保每次加载都是最新的资源。

4. 截长图

Ctrl+Shift+P → 输入 "screenshot" → 选择 Capture full size screenshot。

5. Console 中直接测试代码

在 Console 中直接输入 JavaScript 代码并按回车执行：

// 测试 API
await fetch("/api/articles").then(r => r.json())

// 查看当前页面的所有链接
document.querySelectorAll("a").forEach(a => console.log(a.href))

🎯 AI编程小贴士：遇到页面显示异常或 API 报错时，打开 DevTools 截图（包括 Console 的错误和 Network 的请求详情），发给 AI，它能快速帮你定位问题。这比文字描述高效10倍。

小结

• F12 打开开发者工具，前端开发必备
• Elements：查看和实时修改 HTML/CSS
• Console：查看日志、报错信息和调试代码
• Network：查看所有 HTTP 请求，调试 API 问题的利器
• Application：查看 localStorage、Cookie 等存储数据
• 善用右键检查、模拟手机、禁用缓存等技巧提升效率