你在浏览器里看到的网页，其实只是"前台表演"。幕后的结构、样式、代码、请求、数据……全都藏在一件神器里：浏览器开发者工具（DevTools）。因为它最经典的打开键是 F12，大家也习惯叫它"F12"。

把它想象成侦探的X 光机 + 放大镜：任何网页（包括本站！）你都能当场透视、当场实验。

📸 先看一眼它长什么样

按 F12 后，浏览器窗口会分成两半——左边还是网页，右边（或下边）就是 DevTools：

🔑 三种打开方式

💡 Mac 用户把 Ctrl 换成 Cmd 即可。关闭 DevTools：再按一次 F12，或点右上角 ✕。

🆚 Chrome 和 Edge 有区别吗？

现在（Edge 已改用 Chromium 内核后）两家的 DevTools 来自同一套开源代码，界面、面板、快捷键几乎一模一样。少数差异：

• Edge 多的：3D View（立体查看页面层级）、与 Copilot 的 AI 集成（如让 AI 解释报错）、对 IE 模式页面的调试、更深的 VS Code 集成。
• Chrome 常领先：最新实验功能通常先在 Chrome 出现，Edge 随后跟进。
• 结论：学哪个都一样，本站内容两边通用，个别差异会单独标注。

⚠️ 侦探守则（安全须知）

每个网页都由 HTML 搭骨架、CSS 化妆。Elements 面板就是同时看到这两样东西的地方——而且当场改、当场见效。

🌳 看懂 DOM 树

Elements 里那棵层层嵌套的"树"叫 DOM（文档对象模型）。你可以把它理解成网页的家谱：<html> 是祖宗，<body> 是父辈，标题、段落、按钮都是子孙。

🛠️ 四个最常用的操作

1. 精准选中元素：点 DevTools 左上角的箭头图标（或按 Ctrl+Shift+C），再去点网页上的任何东西，DOM 树会自动跳到它。
2. 改文字：在 DOM 树里双击文字，直接编辑，回车生效。给老板页面改个"祝老板早日发财"试试 🤭（刷新即恢复）。
3. 改样式：右侧 Styles 面板里，可以改属性值、新增属性、用复选框开关某条 CSS；点 :hov 还能强制触发 :hover 等悬停效果。
4. 定位与复制：右键元素 → Scroll into view 让网页滚到它；Copy → Copy selector 复制它的"地址"，写爬虫/自动化脚本时超好用。

Console 是 DevTools 里的对话框：网页会把日志、警告、报错"说"给你听，你也可以输入 JavaScript 让浏览器现场执行。它是排查问题第一现场。

📖 先学会"听"

• 白字是普通日志，黄字是警告，红字是报错——红字末尾通常有 文件:行号，点它直达案发现场。
• 点 🚫 图标或按 Ctrl+L 清屏；点漏斗图标可按严重程度过滤。

⌨️ 再学会"说"（执行代码）

光标停在 > 后面时，输入任何 JavaScript 表达式，按 Enter 立即执行（Shift+Enter 换行写多行）：

• 1 + 1 → 回车看结果，恭喜你会 JS 了（bushi）
• document.title → 看看当前网页的标题
• 2 ** 10 → 1024，控制台是个免费计算器

🧰 侦探的顺手小工具

网页出了 Bug，日志看不懂？Sources 面板能让你在代码的任意一行按"暂停键"，然后像看慢动作回放一样，逐行观察每个变量发生了什么。这就是专业程序员说的"打断点调试"。

🅿️ 打断点：只需一次点击

1. Sources 面板 → 左侧找到网页的 JS 文件（Ctrl+P 可以按文件名快速搜索）。
2. 代码被压缩成一坨时，点左下角 { }（Pretty-print）美化它。
3. 点击行号，出现蓝色标记 = 断点已埋下。
4. 刷新页面或触发对应操作，代码执行到这一行就会暂停！

🎮 暂停之后的遥控器

💾 彩蛋功能：本地替换 Local Overrides

第 2 关说过 Elements 的修改刷新就没。如果你想让修改刷新后依然生效（只对你自己的浏览器）：Sources → Overrides → 点 "Select folder for overrides" 选一个本地文件夹并授权，之后在 Sources 里改文件就会自动保存，刷新、重新打开都生效。调试线上样式、做演示改稿的神器。

顺带一提：Sources → Snippets 可以存放你自己的小脚本，随写随跑，比每次粘贴到控制台方便。

你每打开一个网页，浏览器都在背后疯狂"购物"：HTML 文档、图片、字体、接口数据……Network 面板就是完整的小票：谁、什么时候、买了什么、花了多久。想看"网页背后调用了什么接口"，靠的就是它。

🧾 看懂请求列表

• 状态码：200 成功；304 用了缓存；404 找不到资源；500 服务器出事了。红色行 = 失败请求。
• 过滤器：点 Fetch/XHR 只看接口请求——找"数据从哪来"时第一动作。
• 点任意请求 → 右侧/下方出现详情：Headers（请求头、地址）、Payload（发了什么参数）、Preview / Response（返回了什么内容）、Timing（时间都花在哪）。
• Preserve log：勾选后跳转到新页面记录不丢失；Disable cache：每次都拿最新资源。
• 限速模拟：把 "No throttling" 换成 Slow 3G，体验手机弱网用户的痛苦。

网站会往你的浏览器里"存东西"：登录状态、购物车、主题偏好、你迈过多少关卡……这些数据的藏身处和钥匙柜，就是 Application 面板（Safari 里叫 Storage）。

🧭 四大储物柜

🔦 现场实验：本站的进度就藏在这里！

没错——你在 F12 侦探学院的学习进度，就存在 localStorage 里。让我们用它当教材：

⚠️ 顺便理解了安全知识：任何 JS 脚本（包括恶意网页）都能读同源 localStorage，所以别在 localStorage 里存密码这类敏感信息——Cookie 更适合由服务器加 HttpOnly 保护。

页面卡、加载慢，谁的责任？Performance 面板负责"行车记录仪"式回放，Lighthouse 负责一键体检打分。

🎬 Performance：把卡顿录下来慢放

1. 点面板里的齿轮/圆点开始录制 → 在页面上复现卡顿操作 → 点 Stop 停止。
2. 看三样东西：顶部时间线（哪里最忙）、主线程火焰图（哪个函数占了最长条）、底部 Network 行（是不是网太慢）。
3. 记住一个魔法数字：任务超过 50ms 就是"长任务 (Long Task)"，用户就会感觉卡（浏览器理想帧间隔约 16.7ms）。

（这张图只是示意图——第 7 关的小游戏会让你亲手"点击揪凶"。）

🚦 Lighthouse：一键体检报告

Lighthouse 面板 → 选设备 → 点 Analyze page load，几十秒后出一份五维报告：

分数颜色：🟢 90+ 优秀 / 🟠 50-89 及格线上 / 🔴 <50 该抢救了。每一条扣分项都附带改进建议，照着改就行。

超过一半的人用手机上网，但你的电脑屏幕比手机宽得多——怎么测试手机效果？DevTools 的设备工具栏（Device Toolbar）就是一台"万能手机模拟器"。开关在 DevTools 左上角的 📱 图标，快捷键 Ctrl+Shift+M。

🖥️ 它能模拟什么

一路走来到这里，你已经掌握了侦探的全部基础装备。最后一张 8 题混合卷，答对 6 题即可毕业，解锁你的专属毕业证书！