如何查看Flex JavaScript Object的结构与可用键值

针对flex.Actions.addListener绑定回调接收的事件对象出现console.log返回[object Object]、JSON.stringify报循环引用错误的问题，可通过以下4种可靠方法梳理对象结构：

• 使用console.dir打印可交互对象结构
  浏览器开发者工具自带的console.dir()方法不会将对象强转为字符串，也不会主动序列化触发循环引用报错，会直接输出可逐层展开的树形结构，你可以在控制台直接点击展开查看每一层的键、值、值类型，也能看到原型链上的挂载属性。注意控制台默认保存的是对象实时引用，如果回调执行后对象会被修改，建议搭配断点使用，避免看到的是被篡改后的值。
• 自定义去循环引用的安全序列化方法
  原生JSON.stringify没有做循环引用检测，你可以传入自定义替换函数，用WeakSet记录已经遍历过的对象，遇到循环引用时直接替换为标记文本即可正常序列化，示例代码：

  const safeStringify = (target, indent = 2) => {
    const visited = new WeakSet();
    return JSON.stringify(target, (key, value) => {
      if (typeof value === 'object' && value !== null) {
        if (visited.has(value)) return '[Circular Reference]';
        visited.add(value);
      }
      return value;
    }, indent);
  };
  
  // 回调中使用
  flex.Actions.addListener('afterAcceptTask', (payload) => {
    console.log(safeStringify(payload));
  });
  

• 用Object内置API遍历自有属性
  如果只需要对象本身挂载的业务字段，不需要原型链内容，可以直接用Object.entries()遍历对象所有可枚举自有属性，逐个打印键名、值类型和值内容，快速过滤掉函数、内部引用类的无用字段：

  flex.Actions.addListener('afterAcceptTask', (payload) => {
    Object.entries(payload).forEach(([key, val]) => {
      console.log(`[Field] ${key} | Type: ${typeof val}`, val);
    });
  });
  

• 断点调试实时查看对象结构
  这是准确率最高的方法：在回调函数内部打浏览器断点，事件触发时代码执行会暂停在断点位置，你可以直接在开发者工具的作用域（Scope）面板看到当前传入对象的完整静态结构，逐层展开不会受引用实时更新的影响，还可以直接在控制台调用对象属性、验证字段值是否符合预期。

注意：不同Action事件传入的对象字段存在差异，梳理字段时优先取业务相关的普通值属性，不要随意修改对象内部的原生保留字段，避免导致Flex UI运行异常。

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