Form Data 在 Network 面板中查看需确保表单以原生 POST 方式提交且字段有 name 属性；若未显式设 method="post" 或 enctype，可能转为 GET 或无法上传文件；监听 submit 事件并用 Object.fromEntries(new FormData(form)) 可预览数据。
直接看 Network 面板里的 Form Data
表单提交时，浏览器会自动生成一个 HTTP 请求，数据就藏在请求的 Form Data 标签页里。打开开发者工具（F12 或 Cmd+Opt+I），切到 Network 标签，点一下表单提交按钮，找到刚发出的请求（通常是 POST，名称和 action 属性一致），点击它，在右侧选 Headers → 向下滚动到 Form Data 区域，就能看到所有已提交的字段名和值。
为什么看不到 Form Data？常见断点位置
不是所有提交都会显示 Form Data，关键看是否真发出了原生表单请求：
- 表单没写
method="post"，又没配enctype，但后端只认application/x-www-form-urlencoded—— 这时可能被浏览器静默转成 GET，数据跑到Query String Parameters里了 - 用了
event.preventDefault()却没手动发请求（比如漏了fetch或XMLHttpRequest）—— 网络面板根本不会出现新请求 -
或缺少name属性 —— 字段不会进提交体，自然不显示在Form Data中 - 按钮是
（没写type）—— 某些浏览器当submit，某些当button，行为不一致，请求可能压根没触发
用 JavaScript 拦截并打印原始数据
想在提交前确认数据长什么样，最稳的方式是监听 submit 事件并读取 FormData：
document.querySelector('form').addEventListener('submit', function(e) {
e.preventDefault();
const fd = new FormData(this);
console.log(Object.fromEntries(fd)); // 打印为普通对象，方便阅读
});
注意：FormData 对象本身不能直接 console.log 出结构，必须用 Object.fromEntries() 或遍历 fd.entries()；另外，checkbox 未勾选时不会出现在 FormData 中，radio 只有选中的那个才存在。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
文件上传时 Form Data 显示为空？
如果表单含 ，但 Form Data 里只显示文件名、没有二进制内容，大概率是因为漏写了 enctype="multipart/form-data"。原生表单默认用 application/x-www-form-urlencoded，这种编码方式无法传输文件流。补上这个属性后，Form Data 里会出现类似 ------WebKitFormBoundaryxxx 的分隔符，且文件字段会展开为带 filename 和 Content-Type 的块。
这个细节很容易被忽略，尤其当表单一开始没文件、后期加了上传功能却忘了改 enctype —— 结果就是后端收不到文件，前端 Network 面板也看不出异常，只看到空的 Form Data。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
