Network 面板

浏览器打开一个网页，绝不是只发一条请求就完事了。拿到主 HTML 文档后，浏览器看到里面的 <link>、<img>、<script> 标签，还会继续发请求去拉样式表、图片和脚本。开发者工具里的 Network（网络） 面板就是专门抓这些请求的。

抓下页面加载的所有请求

1. 打开笔趣城首页，按 F12 切到 Network 面板。
2. 勾选工具栏上的 Disable cache（禁用缓存）（免得浏览器直接读本地缓存不发请求），过滤栏选 All。
3. 按 F5 刷新页面，下面就会按时间顺序刷出这次加载发出的所有请求：

列表里重点看这几列：

• Name：请求的路径或文件名。第一条通常是页面主文档（/），后面跟着 style.css、bookshelf.js 等。
• Status：HTTP 状态码，比如 200 是正常返回，304 是复用缓存。
• Type 与顶部过滤栏：资源类型。请求多的时候可以点顶部的分类过滤：Doc 只看主 HTML 文档，Fetch/XHR 只看前端 JS 发出的 API 请求，JS 和 CSS 分别看脚本和样式。
• Initiator：是谁发起的这条请求（是解析 HTML 时自动拉的，还是某行 JS 代码调的）。

点开看单条请求详情

在列表里点第一行主文档（document），右边会展开详情面板：

• Headers（标头）：分三块——General（请求 URL、请求方法 GET、状态码 200 OK）、Request Headers（浏览器发给服务器的请求头，如 Host、User-Agent、Cookie）和 Response Headers（服务器回的响应头）。 看一眼笔趣城的响应头，除了 Content-Type: text/html; charset=utf-8，服务器还自报了家门：Server: biqu-web 和版本号 X-App-Version: 3.2.1。实战收集信息时，这种响应头经常会暴露后端框架和具体版本。
• Response / Preview：切到 Response 能看服务器返回的原始 HTML 源码或 JSON 文本；Preview 则会渲染成方便阅读的预览视图。