是否存在替代console.log()的方法，可实现控制台单行打印与更新？

这问题我之前调试代码时也纠结过！想要在控制台里只显示一行内容，随着迭代动态更新变量值，而不是每次都输出新行把控制台撑得乱糟糟的，确实有几个实用的办法，分环境给你说说：

浏览器环境 #

浏览器的控制台API没有直接提供修改已打印日志的功能，但我们可以用两种方式实现类似效果：

方法1：清屏后重新打印 #

每次迭代时先清空控制台，再打印最新的内容。这种方式简单直接，缺点是会清空之前的所有日志，如果不需要保留历史日志的话非常好用：

async function updateCounter() {
  for (let i = 0; i < 100; i++) {
    console.clear();
    console.log(`i = ${i}`);
    // 加个延迟方便看到更新效果，实际场景可以去掉
    await new Promise(resolve => setTimeout(resolve, 100));
  }
}
updateCounter();

方法2：利用回车符\r #

部分浏览器支持用回车符将光标移到行首，再覆盖内容。不过要注意，浏览器的console.log默认会添加换行，所以可以用console.debug来尝试：

async function updateCounter() {
  for (let i = 0; i < 100; i++) {
    // \r 让光标回到行首，后面的内容会覆盖当前行
    console.debug(`\ri = ${i}`);
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  // 最后补个换行，避免后续输出和当前行重叠
  console.log('');
}
updateCounter();

Node.js环境 #

Node.js里实现起来更灵活，直接用process.stdout.write()方法，它默认不会添加换行，配合\r就能完美覆盖当前行：

async function updateCounter() {
  for (let i = 0; i < 100; i++) {
    // \r 让光标回到行首，新内容覆盖旧内容
    process.stdout.write(`\ri = ${i}`);
    await new Promise(resolve => setTimeout(resolve, 100));
  }
  // 循环结束后加个换行，让后续输出正常显示
  process.stdout.write('\n');
}
updateCounter();

额外小提示 #

• 如果更新的内容长度变化较大（比如从i=9变成i=100），可以用空格填充字符串，避免残留字符：process.stdout.write(\ri = ${i.toString().padStart(3, ' ')})
• 如果你需要保留其他日志同时更新单行内容，浏览器里没有完美的原生方案，这时候可能需要借助第三方调试工具或者自己实现一个简单的前端面板，但纯控制台场景下，上面的方法已经足够满足需求啦。

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