为何无法从Chrome浏览器控制台复制文件或表单数据？

问题背景 #

你尝试通过Chrome控制台复制文件或表单数据时，先后试过以下方法均失败，仅得到空对象{}：

• 右键点击对象→复制对象
• 存储为全局变量后使用copy(temp1)
• 执行copy(JSON.stringify(temp1))
• 从网络面板复制API调用的payload

核心原因 #

1. 特殊对象的序列化限制
   File、Blob、FormData这类浏览器原生对象属于特殊封装类型，它们的核心数据或部分属性并非可枚举的自有属性。JSON.stringify()和控制台的copy()方法仅能序列化对象自身的可枚举属性，导致控制台展示的“丰富信息”无法被常规复制方法捕获，最终返回空对象。

2. 控制台展示与实际对象的差异
   Chrome控制台会对对象做美化展示，包括显示原型链上的属性、不可枚举属性甚至实时计算的值，但这些内容不会被copy()或JSON.stringify()处理，所以你看到的和复制到的内容不一致。

3. FormData的特殊性
   FormData本身是键值对集合，但它没有实现可枚举属性的遍历接口，直接转JSON或复制会被识别为空对象。必须手动遍历其键值对才能提取数据。

4. 并非安全特性
   这不属于浏览器的安全拦截，而是对象封装机制导致的。浏览器确实会限制文件的跨域访问，但你遇到的空对象问题本质是序列化机制不兼容，而非安全限制。

可行解决方法 #

1. 提取File/Blob的基础属性 #

如果只需要文件名、大小、类型等基础信息，手动提取后再复制：

copy({ name: temp1.name, size: temp1.size, type: temp1.type })

2. 解析FormData数据 #

遍历FormData的键值对，将其转换为普通对象后复制：

const formDataObj = {};
temp1.forEach((value, key) => {
  // 若值是File对象，同样提取基础属性
  formDataObj[key] = value instanceof File ? { name: value.name, size: value.size, type: value.type } : value;
});
copy(formDataObj);

3. 获取文件实际内容（如需） #

使用FileReader读取文件内容后复制：

const reader = new FileReader();
reader.onload = function(e) {
  const fileData = {
    name: temp1.name,
    size: temp1.size,
    content: e.target.result // Base64格式，可根据需求用readAsText改为文本
  };
  copy(fileData);
};
reader.readAsDataURL(temp1);

4. 网络面板复制FormData的正确方式 #

在网络面板找到目标请求：

• 点击「Payload」标签，右键FormData区域选择「Copy as cURL」，从cURL命令中解析表单数据；
• 或在控制台中通过request.postData获取FormData对象，再用上述FormData解析方法处理。

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