如何在Metro的console.log中高亮显示大对象的指定属性？

当然有可行的办法啦！在Metro（React Native的调试控制台）里，你可以通过两种实用方式来实现高亮特定对象属性的需求，下面给你详细拆解：

这是最直接的方式——先打印完整的大对象，再单独用带样式的日志突出你关心的属性c。Metro的控制台支持%c占位符，能给指定文本添加CSS样式：

let bigObject = {a:1,b:2,c:3,d:4};
// 先输出完整对象，方便查看整体结构
console.log('完整对象:', bigObject);
// 用%c给属性c的内容添加高亮样式
console.log('重点属性：c = %c3', 'color: #e74c3c; font-weight: bold; font-size: 1.1em;');

你可以自定义%c后面的样式字符串，比如调整颜色、字体粗细、字号，让高亮效果更醒目。

如果想在打印整个对象的同时直接高亮属性c，可以写一个简单的格式化函数，给目标属性的值加上样式标记：

function logObjectWithHighlight(targetObj, highlightKey) {
  const styledObj = {...targetObj};
  // 给目标属性的值包裹样式占位符
  if (styledObj.hasOwnProperty(highlightKey)) {
    styledObj[highlightKey] = `%c${styledObj[highlightKey]}%c`;
  }
  // 准备样式参数：第一个是高亮样式，第二个是重置回默认样式
  const highlightStyle = 'color: #27ae60; font-weight: bold;';
  const resetStyle = '';
  console.log('带高亮的对象：', styledObj, highlightStyle, resetStyle);
}

let bigObject = {a:1,b:2,c:3,d:4};
logObjectWithHighlight(bigObject, 'c');

这个方法会让属性c的数值在控制台里显示为绿色加粗样式，其他属性保持默认输出。如果你的大对象有嵌套结构，可以把函数改成递归形式，遍历深层属性来实现高亮。

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