第 4 章：开发者工具 — 给网页装一扇观察窗¶

📋 本章概览¶

开发者工具不是“黑客工具”，而是浏览器提供的观察窗口。先记住三个入口：Elements 看页面结构，Console 看脚本信息，Network 看资源请求。你只需要观察公开页面，不修改网页、不执行陌生代码，也不把它当成绕过权限的工具。

第一次打开开发者工具时，只完成一个任务：在公开网页中找到一张图片的请求。页面上看不懂的按钮可以暂时不碰，先把“资源名称、状态码、类型”这三个字段找出来。

为什么需要一扇观察窗¶

网页界面只展示“最后结果”，很多关键过程藏在后台：某个按钮是否真的发出了请求、哪张图片加载失败、脚本是否报错、页面是否从缓存取到了旧内容。开发者工具把这些过程摊开，但它不是用来随意修改别人网页的工具；在学习中，我们只观察公开页面，尽量不触碰真实账号和敏感数据。

第一次打开工具时信息会很多，这是正常的。不要试图一次看懂所有标签页，先围绕一个具体问题观察一条线：Elements 看页面结构，Console 看脚本提示，Network 看资源请求。每次只关注一个面板，记录时间、资源名称和状态，复杂画面就会变成可读的证据。

4.1 打开开发者工具¶

在一个公开网页中点击浏览器菜单，找到“更多工具 → 开发者工具”，或使用浏览器显示的快捷键。第一次打开时窗口可能停在右侧或底部，不要担心；它仍然属于当前浏览器标签页。

4.2 Elements：页面由什么组成¶

点击 Elements 面板中的选择箭头，再点击网页上的标题。你会看到一段类似标签的结构。先只阅读，不要修改；刷新页面后临时修改通常会消失。

4.3 Console：脚本有没有报错¶

Console 可能显示警告或错误。红色文字不一定意味着你做错了，也可能是网站本身的问题。不要把带有账号、Token 或完整网址参数的 Console 内容公开分享。

4.4 Network：资源怎样被加载¶

1. 打开 Network 面板。
2. 点击清空按钮，让观察更容易。
3. 刷新公开网页。
4. 在筛选框输入 img 或选择图片类型。
5. 点击一项资源，记录 Request URL 的域名、状态码、类型和大小。
6. 不要复制 Cookie、Authorization 或完整个人化查询参数。

4.5 保留安全证据¶

如果要向别人求助，截图时只保留页面结构、状态码和错误文字；裁掉地址栏中的敏感参数、用户头像、邮箱和请求头。能用文字描述就不要上传完整网络日志。

✅ 验证步骤¶

完成三件事：用 Elements 找到一个标题；用 Console 观察是否有错误；用 Network 筛选图片并记录一项资源的状态码。重新加载页面后，确认你能找到同类请求。

❌ 常见情况¶

📝 本章总结¶

• Elements 观察结构，Console 观察脚本信息，Network 观察请求。
• 开发者工具提供证据，不提供绕过权限的理由。
• 截图和日志必须先去除隐私。

✏️ 课后练习¶

找一个公开网页，记录它加载的一张图片和一个脚本：分别写下类型、状态码、大小和大致来源。

🔮 下一章预告¶

下一章解释登录状态、Cookie、缓存和下载文件为什么会互相影响。