Creating a custom "console" object to interact with Web Console in browser for custom debugger

Question

The Mozilla Developer Network page on the browser-provided Javascript console object says: "Note: At least in Firefox, if a page defines a console object, that object overrides the one built into Firefox.". Is there any way to overwrite this object, but still interact with the browser's Web Console?

A use case is to intercept console.log() calls and do something extra or take different parameters, such as a log classification, while retaining the line number/file information provided when logging to console by tools like Firebug or Google Chrome Inspect Element. The closest matching answer I could find is: Intercepting web browser console messages, but it doesn't dive into interacting with the web console through a custom console object, and using a custom defined debug service like

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

doesn't retain the line number/file source of the function calling debug.log(). An option is to do something with console.trace() and crawl one level up the trace stack, but I was curious about extending console.log() first. I'd also like to find a solution that works with existing Web Consoles/tools like Firebug rather than creating a custom browser extension or Firebug plugin, but if anybody knows of existing solutions for this I'd be interested in them.

Obviously something like:

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

won't work and results in infinite recursion.

tobyho.com/2012/07/27/taking-over-console-log

Alfonso Rubalcava
– Alfonso Rubalcava

2014-12-04 19:12:21 +00:00
Commented Dec 4, 2014 at 19:12 — Alfonso Rubalcava
– Alfonso Rubalcava, Commented Dec 4, 2014 at 19:12

machineghost · Accepted Answer · 2012-12-01 00:30:52Z

3

It's easy, just save a reference to the (original) console before overwriting it:

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

answered Dec 1, 2012 at 0:30

machineghost

36k33 gold badges174 silver badges271 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Ross Over a year ago

Of course! That is nifty. Unfortunately it's ultimately the same as defining a custom debug service, as the line number/file reported is still that of the single root originalConsole.log(message); call, rather than the line number of the caller like console.log();. I'm looking for some way to interact with the Web Console as console.log() does, although it's possible it doesn't exist.

machineghost Over a year ago

Check out getfirebug.com/wiki/index.php/Console_API. That link is specifically for Firebug, but it should give you a decent idea of what is/isn't possible when working with the console object.

user14945188 · Accepted Answer · 2021-02-14 22:54:57Z

You can do:

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.`);
    }
  }
};

You can test it using:

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

Collectives™ on Stack Overflow

Creating a custom "console" object to interact with Web Console in browser for custom debugger

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related