创建自定义“控制台”对象以在浏览器中与Web控制台交互以进行自定义调试

时间:2012-12-01 00:02:09

标签: javascript debugging firebug google-chrome-devtools

浏览器提供的Javascript console对象上的Mozilla开发者网络page说:“Note: At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.”。有没有办法覆盖这个对象,但仍然与浏览器的Web Console

进行交互

用例是截取console.log()个调用并执行额外操作或使用不同的参数(例如日志分类),同时保留通过Firebug或Google Chrome等工具登录到控制台时提供的行号/文件信息检查元素。我能找到的最接近的匹配答案是:Intercepting web browser console messages,但它不会涉及通过自定义控制台对象与Web控制台交互,并使用自定义的调试服务,如

debug.log = function(string, logLevel) {
    checkLogLevel(logLevel); // return false if environment log setting is below logLevel 
    var changedString = manipulate(string); 
    console.log(changedString); 
}

不保留调用debug.log()的函数的行号/文件源。一个选项是使用console.trace()执行某些操作并在跟踪堆栈上爬一级,但我很好奇首先扩展console.log()。我还想找到一个与现有的Web控制台/工具(如Firebug)配合使用的解决方案,而不是创建自定义浏览器扩展或Firebug插件,但如果有人知道现有的解决方案,我会对它们感兴趣。

显然是这样的:

    console = {
        log: function (string) {
            console.log('hey!');
        }
    }
    console.log('hey!');

将无法正常工作并导致无限递归。

2 个答案:

答案 0 :(得分:3)

这很简单,只需在覆盖它之前保存对(原始)控制台的引用:

var originalConsole = window.console;
console = {
    log: function(message) {
        originalConsole.log(message);
        // do whatever custom thing you want
    }
}

答案 1 :(得分:0)

你可以这样做:

var colors = {
  DEFAULT: '\033[m',
  RED: '\033[31m',
  GREEN: '\033[32m',
  BLUE: '\033[34m'
};
var print = {
  out: function(message) {
    console.log(message);
  },
  read: function(message) {
    prompt(message + ' ');
  },
  color: function(message, color) {
    if (color == 'RED') {
      console.log(`${colors.RED}${message}${colors.DEFAULT}`);
    }
    else if (color == 'GREEN') {
      console.log(`${colors.GREEN}${message}${colors.DEFAULT}`);
    }
    else if (color == 'BLUE') {
      console.log(`${colors.BLUE}${message}${colors.DEFAULT}`);
    }
    else {
      console.log(`${colors.RED}ValueError: \"${color}\" is not in the colors set.`);
    }
  }
};

您可以使用以下方法进行测试:

print.out('Hello World!');
print.read('Hello World!');
print.color('Hello World!', 'RED');
print.color('Hello World!', 'GREEN');
print.color('Hello World!', 'BLUE');