控制 console.log 客户端

Question

我在一个需要很长时间才能构建/部署的网站上工作。 有时我需要仅在服务器端可用的信息以进行调试。 使用console.log很烦人，因为在代码中添加console.log并且构建需要很长时间。 但我也不希望站点总是将该信息记录到控制台。

我的计划是为 console.log 设置一个包装器 function，它检查 localStorage 中是否设置了dev_config 。

例如，激活某些详细级别，然后显示相应的日志，或仅在某些部分记录。

这会对网站的性能产生重大影响吗？

例如这样的事情：

const devLog = (message) => {
  devConfig = JSON.parse(localStorage.getItem('dev_config'))
  
  if (devConfig != null) {
    // ...
    // other checks (set devMode to true)
    // ...
      
    if (devMode === true) {
      const now = new Date()
      const hours = now.getHours()
      const min = (now.getMinutes() + '').padStart(2, '0')
      const sec = (now.getSeconds() + '').padStart(2, '0')
      console.log(`[${hours}:${min}:${sec}] `, message)
    }
  }
}

PS：我知道内置的浏览器开发工具，并且在大多数情况下我都在使用它们。 但是由于我当前问题中的信息是服务器端的，我认为我无法使用开发工具获得我需要的信息。

Answer 1

您可以覆盖 console.log 但这可能会在以后惹恼您。 我更喜欢拥有自己的记录器，例如您的 devLog function。它更明确。

正如@Barmar 在评论中建议的那样，您可以在加载时而不是在每次调用时检查 localStorage。 在我的几个项目中，我有类似下面的内容：

{
    let devConfig = JSON.parse(localStorage.getItem('dev_config'));

    devLog = (...args) => {
        if (devConfig) {
            const time = new Date().toLocaleTimeString()
            console.log(`[${time}] `, ...args)
        }
    };
    
    devLog.activate = () => {
        devConfig = true;
        localStorage.setItem('dev_config', true)
    }
    
    devLog.deactivate = () => {
        devConfig = false;
        localStorage.setItem('dev_config', false)
    }
    
    devLog.toggle = () => {
        if ( devConfig ) {
            devLog.deactivate()
        } else {
            devLog.activate()
        }
    }
}

因为当你第一次从 localStorage 读取 dev_config 时，你会得到 null 它将开始停用 - 这对我来说似乎是一个很好的默认值。