React Native WebView中Ace Editor仅显示最后一条Console Log的问题

核心问题定位 #

问题本质是每次执行Ace Editor中的代码时，日志内容被覆盖而非追加，通常由以下两种原因导致：

• 日志容器的内容被innerHTML = 新日志直接替换，未保留历史内容
• 重定义console.log时，未维护累计的日志存储，每次执行都重置了输出

具体修复步骤 #

1. 维护累计的日志存储 #

在HTML全局作用域声明变量保存所有日志，每次调用重写的console.log时，先将新日志推入数组，再渲染整个数组内容到日志容器：

<!-- 日志展示容器 -->
<div id="log-container"></div>

<script>
// 初始化全局日志存储
let logHistory = [];
const logContainer = document.getElementById('log-container');

// 重写console.log，追加而非覆盖日志
console.log = function(...args) {
  // 将多参数日志转为统一字符串
  const logStr = args.map(item => 
    typeof item === 'object' ? JSON.stringify(item) : String(item)
  ).join(' ');
  
  // 推入历史日志数组
  logHistory.push(logStr);
  
  // 渲染全部历史日志（用换行分隔）
  logContainer.innerHTML = logHistory.join('<br>');
  
  // 可选：保留原生console.log输出
  // window.originalConsoleLog?.(...args);
};

// 清除日志函数
function clearLogs() {
  logHistory = [];
  logContainer.innerHTML = '';
}
</script>

2. 避免执行代码时重置日志逻辑 #

确保日志存储变量和console.log的重写逻辑放在WebView的初始HTML中，而非每次执行Ace Editor代码时重复定义。执行用户编写的代码时，仅运行代码内容，不覆盖全局的日志相关变量和函数。

3. 直接追加日志元素的替代方案 #

如果不想维护日志数组，可通过创建DOM元素的方式直接追加日志，避免innerHTML覆盖：

console.log = function(...args) {
  const logStr = args.map(item => 
    typeof item === 'object' ? JSON.stringify(item) : String(item)
  ).join(' ');
  
  const logElement = document.createElement('div');
  logElement.textContent = logStr;
  logContainer.appendChild(logElement);
};

验证效果 #

修改后，每次在Ace Editor中修改代码并执行，新的console.log内容会追加到日志容器底部，历史日志不会被清空，即可查看全部日志记录。

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