如何覆盖Chrome中的console.log函数？

Question

I'm working on a web application that uses many different frameworks and custom scripts (jQuery, Backbone, Bootstrap, Less just to name a few) and any of them might print console output at any time. Some output is from the frameworks I just mentioned, other output is from left over console.log calls left in the code from previous engineers working on the product.

It's a problem because all the dozens of lines of extra output mixes with valid output and it's hard to parse all those lines to check that my valid output is working correctly. I want a temporary solution to overwrite the console.log function in Chrome so that I can filter out certain messages and focus on the output I care about.

How do I overwrite the console.log function in Chrome with my own function?

I tried creating a Chrome extension already and it kind of worked - I was able to overwrite console.log as far as the extension was concerned, but all references to console.log in the original source were unchanged.

EDIT: For clarity, I'm not looking for yet another script to add to the site. I'm looking for a solution that is entirely implemented either in the web browser, or some other technique that does not involve changing the source code being downloaded in the web app.

Answer 1

Not exactly overwriting console.log , but if you right click on any of the lines in the console output you can select Filter > Hide messages from .js. It also lets you filter out error messages for 404s etc which you probably wouldn't be able to do even if you could overwrite console.log .

Answer 2

Firefox has a way to change the console logging level for specific extensions from about:config .

Chrome doesn't have this capability. Your options:

1. Filter out all messages from a particular source file by right-clicking the white (blank) part of console message line and choosing Filter > Hide Messages from foo.js .
2. Override one or more console methods (as you've already done). This approach only affects the current scripting context. Chrome extensions run in their own isolated worlds with their own window objects, global scopes, and console objects. You'll need to paste and run your console-altering scripts in each extension's execution context, and your modifications will only be in effect until the page is unloaded. You can change the console's effective execution context using the dropdown at the bottom of the console that says <page context> . Note that any frames or iframes in the page also have their own execution contexts, accessible using the frame dropdown (initially set to <top frame> ).

Answer 3

log is a function of the console object, you can overwrite it like this:

var logFn = console.log;  // save the original log function for later use
console.log = function(msg) {
    ...
    logFn.call(console, msg); // call original function if you want to
};

or, use closure to save the old log function:

console.log = (function(logFn) {
    return function(msg) {
        ...
        logFn.call(console, msg); // call original function if you want to
    };
})(console.log);

You need to do this as early as possible, since you want other frameworks/libraries to use the customized log function.