Javascript 如何从浏览器控制台启用禁用 console.log

发布于08月29日

我的代码中有大量的console.log，但我只需要看到它们/打开它们，如果我需要在站点上看到它们，所以我想要一种方法，能够通过设置几个片段在浏览器控制台中启用/取消它们，例如:adysis.debug(‘Enable’)，adysis.debug(‘Disable’)，但我如何才能让它们触发Console.Logs在代码中，我目前根本没有关于如何做的线索？

推荐答案

要禁用控制台的所有方法，请使用Proxy.

在浏览器控制台中使用console.enabled = true/false禁用/启用控制台. 禁用状态保留在本地存储中.因此，页面重新加载后情况是一样的.

(删除try/catch，因为这里不允许这样做).

{
  const key = 'console-enabled';
  
  let enabled;
  try{
  enabled = localStorage.getItem(key);
  }catch(_){}
  
  window.console = new Proxy(window.console, {
    get(console, prop){
      if(prop === 'enabled'){
        return disabled;
      }
      if(!enabled && typeof console[prop] === 'function' && Object.hasOwn(console, prop)){
        return function(){}
      }
      return Reflect.get(...arguments);
    },
    set(console, prop, val){
      if(prop === 'enabled'){
        enabled = val;
        try{
          enabled ? localStorage.setItem(key, val) : localStorage.removeItem(key);
        }catch(_){}
        return true;
      }
      return Reflect.set(...arguments);
    }
  });
}


console.log('disabled');
console.dir(document.body);

$pre.textContent = 'console.log is enumerable: ' + console.propertyIsEnumerable('log');

console.enabled = true;

console.log('enabled');
console.dir(document.body);