浏览器开发者模式Headers打开FormData

### 如何在浏览器开发者工具中查看和编辑 FormData 请求头

#### 使用网络面板 (Network Panel)

当发送带有 `FormData` 对象的 POST 请求时，在浏览器开发者工具中的 **Network** 面板下可以找到对应的请求条目。点击该条目展开详情，能够看到多个标签页用于展示不同方面的信息。

对于表单数据提交的情况：

- 在 **Headers** 标签内可查看到完整的 HTTP 头部字段及其值，这包含了由浏览器自动生成的标准头部以及可能被 JavaScript 显式设置过的额外头部。

这里显示的信息包括但不限于 Content-Type、Referer 和 User-Agent 等标准头部项[^2]。

- 而具体的键值对形式的数据则会在 **Form Data** 或者 **Payload** 标签下呈现出来，取决于浏览器的具体实现方式[^3]。

然而需要注意的是，默认情况下不允许直接通过图形界面修改已发出请求的实际 Headers；这是因为这些 Header 往往是由底层协议栈负责构建并随同消息一同传输给目标服务器的。

如果想要测试不同的 Headers 设置效果，则可以通过编写脚本利用 Fetch API 或 XMLHttpRequest 来手动指定 Headers 属性来覆盖默认行为。下面是一个简单的例子说明如何使用 Fetch API 发送带自定义 Headers 的 POST 请求:

const formData = new FormData();
formData.append('username', 'example');
formData.append('password', 'secret');

fetch('/submit-form', {
    method: 'POST',
    headers: { 
        'X-Custom-Header': 'CustomValue' // 添加自定义header
    },
    body: formData,
});

另外一种方法是在发起请求之前借助浏览器插件如 Postman 或 Advanced REST client 实现更灵活的操作体验。