如何调试Safari 10.13.4中Symfony 2.8表单的FormData问题？

嘿，我完全理解你的头疼——Safari特定版本的兼容性问题总是让人挠头。别担心，下面给你一步步讲清楚怎么在这个版本的Safari里调试FormData的内容：

首先，得先把Safari的开发者工具开起来，默认它是藏着的：

• 打开Safari，点击顶部菜单栏的「Safari > 偏好设置」
• 切到「高级」标签，勾选最底部的「在菜单栏中显示“开发”菜单」

接下来分几种实用的调试方式：

1. 控制台直接遍历FormData内容 #

FormData不能直接用console.log()看全内容（Safari只会输出FormData {}），得手动遍历它的键值对：

1. 打开页面后，按Option + Command + I调出开发工具，切到「控制台」标签
2. 找到你创建FormData的代码（比如var formData = new FormData(form[0]);），要么在这行之后加遍历代码，要么直接在控制台输入：

// ES6写法，更简洁
for (const [key, value] of formData.entries()) {
  console.log(`${key}:`, value);
}

如果你的JS环境不支持ES6，就用兼容写法：

var iterator = formData.entries();
var result;
while (!(result = iterator.next()).done) {
  console.log(result.value[0] + ":", result.value[1]);
}

这样就能在控制台看到FormData里所有字段的名称和对应值了——如果是文件，会显示File对象，展开就能看到文件名、大小这些细节。

2. 断点调试实时查看FormData #

要是想在代码执行过程中盯着FormData的状态，用断点更直观：

1. 打开开发工具的「调试器」标签（就是那个小虫子图标）
2. 在左侧文件列表里找到处理Ajax的JS文件，定位到创建FormData和发送请求的代码行
3. 点击代码行号左边的空白处加断点（会出现蓝色箭头）
4. 触发表单提交，代码会在断点处暂停
5. 在调试器右侧的「变量」面板里找到formData，右键选「查看对象属性」，或者直接在控制台输入上面的遍历代码，就能实时查看里面的内容了

3. 检查Ajax请求里的FormData是否正确发送 #

最后，你还可以确认FormData有没有正确传给服务器：

1. 切到开发工具的「网络」标签
2. 触发表单提交，找到对应的POST请求（看URL和请求方法）
3. 点击这个请求，切换到「请求体」标签，就能看到Safari解析后的FormData内容——每个字段的名称、值，文件的话会显示文件名和类型

另外，结合你的Symfony 2.8应用，还要注意几个Safari的小坑：比如字段名有没有特殊字符，文件上传时的Content-Type是否正确，不过先通过上面的方法确认FormData内容没问题，再一步步排查就好啦~

内容的提问来源于stack exchange，提问作者Andrei Herford