如何在React Native中调试对象？Chrome调试无法查看values数组数据

我之前调试React Native的时候也碰到过一模一样的情况——明明控制台打印了数组，但Chrome调试器就是没法正常预览里面的具体数据。针对你给出的values数组，分享几个亲测有效的解决办法：

• 用JSON序列化强制输出完整结构
  Chrome远程调试React Native时，有时候对复杂对象的引用预览会出问题，直接把数组转成格式化的JSON字符串就能彻底解决这个问题。把你的打印代码改成这样：

  console.log('完整Values数据:', JSON.stringify(values, null, 2));
  

  第二个参数null用来保留所有属性（不需要过滤），第三个参数2设置缩进空格数，输出的结果会是排版整齐的JSON，你能直接在控制台看到每一个对象的shadowH、shadowL等属性值。

• 用表格形式直观展示结构化数据
  如果你的数据是这种对象数组，console.table()会是更友好的选择，它会把每个对象的属性作为列，每一条数据作为行展示：

  console.table(values);
  

  这样你能快速对比每一组数据的各个属性，比看纯JSON更清晰。

• 临时变量锁定数据引用
  要是你想在调试器的Scope面板里查看数据，可以在代码里加一个临时变量：

  const debugValues = [...values]; // 浅拷贝一份，避免引用变化导致调试器无法追踪
  console.log('调试用Values:', debugValues);
  

  然后在Chrome调试器的Scope里找debugValues，有时候直接引用原数组会因为React的状态更新或者调试器的延迟导致无法解析，浅拷贝后的临时变量能帮你锁定当前的数据状态。

• 重启调试会话排除缓存问题
  有时候旧的调试会话会有缓存异常，你可以通过React Native的调试菜单（iOS按Cmd+D，Android按Cmd+M）关闭"Debug JS Remotely"，然后重新打开，再刷新Chrome调试窗口，很多时候这种小问题就能解决。

内容的提问来源于stack exchange，提问作者Miguel Gonçalves