React useMemo钩子中部分console.log语句丢失问题求助

现象解释 #

Chrome 105.0.5195.102里，自定义useMemo钩子内console.log的虚线分隔部分未输出，但Firefox 104.0.1能正常显示，这种现象是浏览器控制台输出优化策略差异导致的：

• Chrome控制台会自动过滤或合并它判定为无意义的重复固定文本输出（比如纯虚线这类无动态变化的内容），尤其当useMemo依赖项未触发重计算时，重复的相同分隔符输出会被跳过。
• Firefox控制台没有针对这类固定文本做类似优化，所以会完整展示所有console.log内容。

解决办法 #

• 给分隔符添加动态标识：在虚线前后加入和计算相关的动态值（比如当前计算的面板尺寸、时间戳），让Chrome认为输出是有变化的有效内容，示例：

  console.log(`--- 面板计算结果 ${Date.now()} ---`);
  console.log('面板宽:', panelWidth, '面板高:', panelHeight);
  console.log(`---------------------------`);
  

• 改用console.group分组输出：用分组替代纯分隔符，Chrome会完整展示分组内容，同时让日志结构更清晰：

  console.group('面板计算结果');
  console.log('面板宽:', panelWidth);
  console.log('面板高:', panelHeight);
  console.groupEnd();
  

• 调整Chrome控制台过滤设置：打开Chrome控制台右上角齿轮图标，进入「Console」选项，取消勾选各类日志过滤选项（如「Hide verbose messages」），不过这种方法会显示更多无关日志，实用性不如前两种。

额外说明 #

你已排除React严格模式影响，且计算值能正常打印，说明useMemo的核心计算逻辑是正常的，无需修改钩子的业务代码，仅需调整日志输出方式适配不同浏览器的控制台策略即可。

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