I have a script that I can't change that makes a lot of console.log calls. I want to add another layer and respond if the calls contain certain strings. This works in Firefox, but throws an "Illegal invocation" error in Chrome on the 4th line:
var oldConsole = {};
oldConsole.log = console.log;
console.log = function (arg) {
oldConsole.log('MY CONSOLE!!');
oldConsole.log(arg);
}
Any ideas how to get around that? I also tried cloning the console...
You need to call console.log in the context of console for chrome:
(function () {
var log = console.log;
console.log = function () {
log.call(this, 'My Console!!!');
log.apply(this, Array.prototype.slice.call(arguments));
};
}());
Modern language features can significantly simplify this snippet:
{
const log = console.log.bind(console)
console.log = (...args) => {
log('My Console!!!')
log(...args)
}
}
I know it's an old post but it can be useful anyway as others solution are not compatible with older browsers.
You can redefine the behavior of each function of the console (and for all browsers) like this:
// define a new console
var console = (function(oldCons){
return {
log: function(text){
oldCons.log(text);
// Your code
},
info: function (text) {
oldCons.info(text);
// Your code
},
warn: function (text) {
oldCons.warn(text);
// Your code
},
error: function (text) {
oldCons.error(text);
// Your code
}
};
}(window.console));
//Then redefine the old console
window.console = console;
You can also use the same logic, but call it off the console object so the context is the same.
if(window.console){
console.yo = console.log;
console.log = function(str){
console.yo('MY CONSOLE!!');
console.yo(str);
}
}
With ES6 new spread operator you can write it like this
(function () {
var log = console.log;
console.log = function () {
log.call(this, 'My Console!!!', ...arguments);
};
}());
Can be simply:
console.log = (m) => terminal.innerHTML = JSON.stringify(m)
#terminal {background: black; color:chartreuse}
$ > <span id="terminal"></span>
<hr>
<button onclick="console.log('Hello world!!')">3V3L</button>
<button onclick="console.log(document)">3V3L</button>
<button onclick="console.log(Math.PI)">3V3L</button>
To fully intercept the console, we can override every methods :
const bindConsole=function(onMessage){
Object.keys(console)
.filter(type=>typeof(console[type])==='function')// *1
.forEach(type=>{
let _old=console[type];
console[type] = function (...args) {
_old.apply(console,args);
onMessage(type,args);// *2
};
});
};
For old browsers :
var bindOldConsole=function(onMessage){
for(var k in console){// *1
if(typeof(console[k])=='function')(function(type){
var _old=console[type];
console[type] = function () {
_old.apply(console,arguments);
onMessage(type,arguments);
};
})(k);
}
};
*1 Looks like console has only methods but better be sure.
*2 You may block cyclic calls to console from onMessage by replacing this line with :
if(!isCyclic())onMessage(type,args);
// es6. Not sure concerning old browsers :(
const isCyclic=function (){
let erst=(new Error()).stack.split('\n');
return erst.includes(erst[1],2);
};
Since I cannot comment (yet) on #ludovic-feltz answer, here is his answer corrected to allow string interpolation in the console :
// define a new console
var console = (function(oldCons){
return {
log: function(...text){
oldCons.log(...text);
// Your code
},
info: function (...text) {
oldCons.info(...text);
// Your code
},
warn: function (...text) {
oldCons.warn(...text);
// Your code
},
error: function (...text) {
oldCons.error(...text);
// Your code
}
};
}(window.console));
//Then redefine the old console
window.console = console;
I want to write some log class that can be used like the following code.
// short-hand for logging.
log('log message', [other parameter]);
// full path for writing log.
log.write('log message', [other parameter]);
// print all log
log.print([optional parameter]);
Moreover, it must able to be written as fluent pattern.
log.write('log message').print();
Finally, it should be resetted by using the following code.
log = new log();
Thanks,
Let's implement it as a normal object first, then add some other syntaxes after:
var log = {};
log.write = function() {
// stuff...
return this;
};
log.print = function() {
// stuff...
return this;
};
log.reset = function() {
// stuff
return this;
};
As function is also an object, it can have properties, so you can replace var log = {};, with a function that redirects to log.write instead.
function log() {
return log.write.apply(log, arguments);
}
Finally, for the self-reset syntax, you can detect for a new instance, but instead of creating a new object, you reset the log and hand the same object back!
So now the log function will look like this:
function log() {
if (this instanceof log) {
return log.reset.apply(log, arguments);
}
return log.write.apply(log, arguments);
}
You can look at jsFiddle to see that it works. Warning: lot of alert()s on that page!
var Logger = function(msg,p){
this.msg = typeof msg != 'undefined' ? msg : '';
this.p = typeof p != 'undefined' ? p : '';
}
Logger.prototype = {
write : function(msg,p){
this.msg = typeof msg != 'undefined' ? msg : '';
this.p = typeof p != 'undefined' ? p : '';
},
print : function(p){
this.p = typeof p == 'undefined' ? this.p : p;
if(this.p)
alert(this.msg);
else
console.log(this.msg);
return this;
},
reset : function(){
return new Logger();
}
}
function log(msg,p){
return new Logger(msg,p).print();
}
And then you can use :
log("alert me",true);
log("log me in console!");
log().write("a msg",false).print();
var l = log();
l.write().print().reset();
Doesn't console.log in firebug serve the purpose of logging? Though, one can write their own logger implementation. But the question is when should the logger to be used? Implementation similar like you have proposed could be useful in javascript running in server side like Rhino
But i have written some code, pls try this
<html>
<head>
<script>
var log = function() {
var p_this = this;
this.write = function(p_msg){
p_this.msg = p_msg;
return this.write;
},
this.write.print = function(){
alert(p_this.msg);
}
};
var log1 = new log();
log1.write('test_message').print();
</script>
</head>
<body>
</body>
</html>
This may be helpful. This a conceptual code for the pattern u are looking for. You have to modify this or improve this. You may provide the logic for resetting and all.
You could try this glorious masterpiece:
var log = (function(out){
var msgs = [];
function log(msg){
if (typeof msg == 'string'){
msgs.push(msg);
return log;}
else{
msgs = [];
return log;}}
log.write = function(msg){
log(msg);
return log;};
log.print = function(){
for(var i=0, l=msgs.length; i<l; i++){
out(msgs[i]);}};
return log;})(function(s){console.log(s);});
The real output function is injected at the end. You should test for console.log to exist, and use an alternative otherwise (I do not know what you would prefer).
I tried the following things:
log('First message');
log.write('Second message')('Third message').write('Fourth message');
log.write('Fifth message').print();
log.print(); // Prints all messages again.
log = new log(); // Reset.
log('Lonely!').print(); // Prints only 'Lonely!'.
Beware: log(); or log(undefined); (with undefined undefined) will reset the thing as well, while new log('Foobar'); will add the message 'Foobar'. But this was not in your test cases, so I ignored it.
This is also possible:
(new log()).write('Message');
(new log())('Message');
(new log()).print(); // Prints empty log.
Try to look at JSLog javascript logging framework:
https://github.com/dingyonglaw/JSLog
It supports all browser, and also firebug-lite;
==============
Example Usage:
==============
Logging:
--------
// Register a module logger, p is now logger for 'App.Login'
var p = JSLog.Register('App.Login');
// Log something, and it will display "[App.Login] something" in your console;
p.log('something');
// You can do something as usual:
p.warn('warning!');
p.info('info msg');
Log Level:
----------
The Logger comes with 5 level of logging access: 1-5
which coresponding to: 'error', 'warn', 'info', 'debug', 'log'
// You can set your level like this, to display only info message in console
p.SetLevel(3);
// You can get your current logging level with:
p.GetLevel();
Logging History:
----------------
The logger records your logs and you can Dump it later!
// Dump by Module Name
JSLog.Dump('App.Login');
// Dump all modules in nested view
JSLog.Dump();
// Selective Dump by filtering module name:
JSLog.SetFilter('module-name');
JSLog.Dump(); // Will exclude 'module-name' module
// Clear filter by module name:
JSLog.UnsetFilter('module-name');
// Get assigned filters
JSLog.GetFilter();
Is there any way to turn off all console.log statements in my JavaScript code, for testing purposes?
Redefine the console.log function in your script.
console.log = function() {}
That's it, no more messages to console.
EDIT:
Expanding on Cide's idea. A custom logger which you can use to toggle logging on/off from your code.
From my Firefox console:
var logger = function()
{
var oldConsoleLog = null;
var pub = {};
pub.enableLogger = function enableLogger()
{
if(oldConsoleLog == null)
return;
window['console']['log'] = oldConsoleLog;
};
pub.disableLogger = function disableLogger()
{
oldConsoleLog = console.log;
window['console']['log'] = function() {};
};
return pub;
}();
$(document).ready(
function()
{
console.log('hello');
logger.disableLogger();
console.log('hi', 'hiya');
console.log('this wont show up in console');
logger.enableLogger();
console.log('This will show up!');
}
);
How to use the above 'logger'? In your ready event, call logger.disableLogger so that console messages are not logged. Add calls to logger.enableLogger and logger.disableLogger inside the method for which you want to log messages to the console.
The following is more thorough:
var DEBUG = false;
if(!DEBUG){
if(!window.console) window.console = {};
var methods = ["log", "debug", "warn", "info"];
for(var i=0;i<methods.length;i++){
console[methods[i]] = function(){};
}
}
This will zero out the common methods in the console if it exists, and they can be called without error and virtually no performance overhead. In the case of a browser like IE6 with no console, the dummy methods will be created to prevent errors. Of course there are many more functions in Firebug, like trace, profile, time, etc. They can be added to the list if you use them in your code.
You can also check if the debugger has those special methods or not (ie, IE) and zero out the ones it does not support:
if(window.console && !console.dir){
var methods = ["dir", "dirxml", "trace", "profile"]; //etc etc
for(var i=0;i<methods.length;i++){
console[methods[i]] = function(){};
}
}
As far as I can tell from the documentation, Firebug doesn't supply any variable to toggle debug state. Instead, wrap console.log() in a wrapper that conditionally calls it, i.e.:
DEBUG = true; // set to false to disable debugging
function debug_log() {
if ( DEBUG ) {
console.log.apply(this, arguments);
}
}
To not have to change all the existing calls, you can use this instead:
DEBUG = true; // set to false to disable debugging
old_console_log = console.log;
console.log = function() {
if ( DEBUG ) {
old_console_log.apply(this, arguments);
}
}
You should not!
It is not a good practice to overwrite built-in functions. There is also no guarantee that you will suppress all output, other libraries you use may conflict with your changes and there are other functions that may write to the console; .dir(), .warning(), .error(), .debug(), .assert() etc.
As some suggested, you could define a DEBUG_MODE variable and log conditionally. Depending on the complexity and nature of your code, it may be a good idea to write your own logger object/function that wraps around the console object and has this capability built-in. That would be the right place to do deal with instrumentation.
That said, for 'testing' purposes you can write tests instead of printing to the console. If you are not doing any testing, and those console.log() lines were just an aid to write your code, simply delete them.
I realize this is an old post but it still pops up at the top of Google results, so here is a more elegant non-jQuery solution that works in the latest Chrome, FF, and IE.
(function (original) {
console.enableLogging = function () {
console.log = original;
};
console.disableLogging = function () {
console.log = function () {};
};
})(console.log);
Just change the flag DEBUG to override the console.log function. This should do the trick.
var DEBUG = false;
// ENABLE/DISABLE Console Logs
if(!DEBUG){
console.log = function() {}
}
I know you asked how to disable console.log, but this might be what you're really after. This way you don't have to explicitly enable or disable the console. It simply prevents those pesky console errors for people who don't have it open or installed.
if(typeof(console) === 'undefined') {
var console = {};
console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}
I am surprised that of all those answers no one combines:
No jquery
Anonymous function to not pollute global namespace
Handle case where window.console not defined
Just modify the .log function of the console
I'd go for this:
(function () {
var debug = false
if (debug === false) {
if ( typeof(window.console) === 'undefined') { window.console = {}; }
window.console.log = function () {};
}
})()
After I searched for this issue aswell and tried it within my cordova app, I just want to warn every developer for windows phone to not overwrite
console.log
because the app will crash on startup.
It won't crash if you're developing local if you're lucky, but submitting in store it will result in crashing the app.
Just overwrite
window.console.log
if you need to.
This works in my app:
try {
if (typeof(window.console) != "undefined") {
window.console = {};
window.console.log = function () {
};
window.console.debug = function () {
};
window.console.info = function () {
};
window.console.warn = function () {
};
window.console.error = function () {
};
}
if (typeof(alert) !== "undefined") {
alert = function ()
{
}
}
} catch (ex) {
}
If you're using IE7, console won't be defined. So a more IE friendly version would be:
if (typeof console == "undefined" || typeof console.log == "undefined")
{
var console = { log: function() {} };
}
This a hybrid of answers from SolutionYogi and Chris S. It maintains the console.log line numbers and file name. Example jsFiddle.
// Avoid global functions via a self calling anonymous one (uses jQuery)
(function(MYAPP, $, undefined) {
// Prevent errors in browsers without console.log
if (!window.console) window.console = {};
if (!window.console.log) window.console.log = function(){};
//Private var
var console_log = console.log;
//Public methods
MYAPP.enableLog = function enableLogger() { console.log = console_log; };
MYAPP.disableLog = function disableLogger() { console.log = function() {}; };
}(window.MYAPP = window.MYAPP || {}, jQuery));
// Example Usage:
$(function() {
MYAPP.disableLog();
console.log('this should not show');
MYAPP.enableLog();
console.log('This will show');
});
If you use Webpack you could use the Terser plugin to completely exclude the console.log function calls.
This way you can have a clean production app package that will not expose unnecessary information but still have all this info in your debug build.
https://github.com/terser/terser#compress-options
drop_console (default: false) -- Pass true to discard calls to console.* functions. If you wish to drop a specific function call such as console.info and/or retain side effects from function arguments after dropping the function call then use pure_funcs instead.
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
pure_funcs: [ 'console.log' ]
}
}
}),
]
Alternatively you can use drop_console: true to exclude all console calls.
Here is a solution I just worked on that is fairly exhaustive. I covered all the fully supported console methods from https://developer.mozilla.org/en-US/docs/Web/API/console
1. Create js file "logger.js" and put in the following code in it
logger = {
assert: function() {
if(logger.active && logger.doAssert) {
console.assert.apply(null,arguments);
}
},
clear: function() {
if(logger.active && logger.doClear) {
console.clear();
}
},
count: function() {
if(logger.active && logger.doCount) {
console.count.apply(null,arguments);
}
},
countReset: function() {
if(logger.active && logger.doCountReset) {
console.countReset.apply(null,arguments);
}
},
debug: function() {
if(logger.active && logger.doDebug) {
console.debug.apply(null,arguments);
}
},
dir: function() {
if(logger.active && logger.doDir) {
console.dir.apply(null,arguments);
}
},
dirxml: function() {
if(logger.active && logger.doDirxml) {
console.dirxml.apply(null,arguments);
}
},
error: function() {
if(logger.active && logger.doError) {
console.error.apply(null,arguments);
}
},
group: function() {
if(logger.active && logger.doGroup) {
console.group.apply(null,arguments);
}
},
groupCollapsed: function() {
if(logger.active && logger.doGroup) {
console.groupCollapsed.apply(null,arguments);
}
},
groupEnd: function() {
if(logger.active && logger.doGroup) {
console.groupEnd.apply(null,arguments);
}
},
info: function() {
if(logger.active && logger.doInfo) {
console.info.apply(null,arguments);
}
},
log: function() {
if(logger.active && logger.doLog) {
console.log.apply(null,arguments);
}
},
table: function() {
if(logger.active && logger.doTable) {
console.table.apply(null,arguments);
}
},
time: function() {
if(logger.active && logger.doTime) {
console.time.apply(null,arguments);
}
},
timeEnd: function() {
if(logger.active && logger.doTime) {
console.timeEnd.apply(null,arguments);
}
},
timeLog: function() {
if(logger.active && logger.doTime) {
console.timeLog.apply(null,arguments);
}
},
trace: function() {
if(logger.active && logger.doTrace) {
console.trace.apply(null,arguments);
}
},
warn: function() {
if(logger.active && logger.doWarn) {
console.warn.apply(null,arguments);
}
},
active: true,
doAssert: true,
doClear: true,
doCount: true,
doCountReset: true,
doDebug: true,
doDir: true,
doDirxml: true,
doError: true,
doGroup: true,
doInfo: true,
doLog: true,
doTable: true,
doTime: true,
doTrace: true,
doWarn: true
};
2. Include before all your scripts with logs in all pages
3. Replace all "console." with "logger." in your scripts
4. Usage
Used just like "console." but with "logger."
logger.clear();
logger.log("abc");
Finally disable some or all logs
//disable/enable all logs
logger.active = false; //disable
logger.active = true; //enable
//disable some logs
logger.doLog = false; //disable
logger.doInfo = false; //disable
logger.doLog = true; //enable
logger.doInfo = true; //enable
logger.doClear = false; //log clearing code will no longer clear the console.
EDIT
After using my solution for sometime in my latest project I realized that it's difficult to remember that I'm supposed to use logger. instead of console.. So for this reason I decided to override console. This is my updated solution:
const consoleSubstitute = console;
console = {
assert: function() {
if(console.active && console.doAssert) {
consoleSubstitute.assert.apply(null,arguments);
}
},
clear: function() {
if(console.active && console.doClear) {
consoleSubstitute.clear();
}
},
count: function() {
if(console.active && console.doCount) {
consoleSubstitute.count.apply(null,arguments);
}
},
countReset: function() {
if(console.active && console.doCountReset) {
consoleSubstitute.countReset.apply(null,arguments);
}
},
debug: function() {
if(console.active && console.doDebug) {
consoleSubstitute.debug.apply(null,arguments);
}
},
dir: function() {
if(console.active && console.doDir) {
consoleSubstitute.dir.apply(null,arguments);
}
},
dirxml: function() {
if(console.active && console.doDirxml) {
consoleSubstitute.dirxml.apply(null,arguments);
}
},
error: function() {
if(console.active && console.doError) {
consoleSubstitute.error.apply(null,arguments);
}
},
group: function() {
if(console.active && console.doGroup) {
consoleSubstitute.group.apply(null,arguments);
}
},
groupCollapsed: function() {
if(console.active && console.doGroup) {
consoleSubstitute.groupCollapsed.apply(null,arguments);
}
},
groupEnd: function() {
if(console.active && console.doGroup) {
consoleSubstitute.groupEnd.apply(null,arguments);
}
},
info: function() {
if(console.active && console.doInfo) {
consoleSubstitute.info.apply(null,arguments);
}
},
log: function() {
if(console.active && console.doLog) {
if(console.doLogTrace) {
console.groupCollapsed(arguments);
consoleSubstitute.trace.apply(null,arguments);
console.groupEnd();
} else {
consoleSubstitute.log.apply(null,arguments);
}
}
},
table: function() {
if(console.active && console.doTable) {
consoleSubstitute.table.apply(null,arguments);
}
},
time: function() {
if(console.active && console.doTime) {
consoleSubstitute.time.apply(null,arguments);
}
},
timeEnd: function() {
if(console.active && console.doTime) {
consoleSubstitute.timeEnd.apply(null,arguments);
}
},
timeLog: function() {
if(console.active && console.doTime) {
consoleSubstitute.timeLog.apply(null,arguments);
}
},
trace: function() {
if(console.active && console.doTrace) {
consoleSubstitute.trace.apply(null,arguments);
}
},
warn: function() {
if(console.active && console.doWarn) {
consoleSubstitute.warn.apply(null,arguments);
}
},
active: true,
doAssert: true,
doClear: true,
doCount: true,
doCountReset: true,
doDebug: true,
doDir: true,
doDirxml: true,
doError: true,
doGroup: true,
doInfo: true,
doLog: true,
doLogTrace: false,
doTable: true,
doTime: true,
doTrace: true,
doWarn: true
};
Now you can just use console. as usual.
If you use Grunt you can add a task in order to remove/comment the console.log statements. Therefore the console.log are no longer called.
https://www.npmjs.org/package/grunt-remove-logging-calls
To disable console.log only:
console.log = function() {};
To disable all functions that write to the console:
for (let func in console) {
console[func] = function() {};
}
Ive been using the following to deal with he problem:-
var debug = 1;
var logger = function(a,b){ if ( debug == 1 ) console.log(a, b || "");};
Set debug to 1 to enable debugging. Then use the logger function when outputting debug text. It's also set up to accept two parameters.
So, instead of
console.log("my","log");
use
logger("my","log");
My comprehensive solution to disable/override all console.* functions is here.
Of course, please make sure you are including it after checking necessary context. For example, only including in production release, it's not bombing any other crucial components etc.
Quoting it here:
"use strict";
(() => {
var console = (window.console = window.console || {});
[
"assert", "clear", "count", "debug", "dir", "dirxml",
"error", "exception", "group", "groupCollapsed", "groupEnd",
"info", "log", "markTimeline", "profile", "profileEnd", "table",
"time", "timeEnd", "timeStamp", "trace", "warn"
].forEach(method => {
console[method] = () => {};
});
console.log("This message shouldn't be visible in console log");
})();
I have used winston logger earlier.
Nowadays I am using below simpler code from experience:
Set the environment variable from cmd/ command line (on Windows):
cmd
setx LOG_LEVEL info
Or, you could have a variable in your code if you like, but above is better.
Restart cmd/ command line, or, IDE/ editor like Netbeans
Have below like code:
console.debug = console.log; // define debug function
console.silly = console.log; // define silly function
switch (process.env.LOG_LEVEL) {
case 'debug':
case 'silly':
// print everything
break;
case 'dir':
case 'log':
console.debug = function () {};
console.silly = function () {};
break;
case 'info':
console.debug = function () {};
console.silly = function () {};
console.dir = function () {};
console.log = function () {};
break;
case 'trace': // similar to error, both may print stack trace/ frames
case 'warn': // since warn() function is an alias for error()
case 'error':
console.debug = function () {};
console.silly = function () {};
console.dir = function () {};
console.log = function () {};
console.info = function () {};
break;
}
Now use all console.* as below:
console.error(' this is a error message '); // will print
console.warn(' this is a warn message '); // will print
console.trace(' this is a trace message '); // will print
console.info(' this is a info message '); // will print, LOG_LEVEL is set to this
console.log(' this is a log message '); // will NOT print
console.dir(' this is a dir message '); // will NOT print
console.silly(' this is a silly message '); // will NOT print
console.debug(' this is a debug message '); // will NOT print
Now, based on your LOG_LEVEL settings made in the point 1 (like, setx LOG_LEVEL log and restart command line), some of the above will print, others won't print
Hope that helped.
Warning: Shameless plug!
You could also use something like my JsTrace object to have modular tracing with module-level "switching" capability to only turn on what you want to see at the time.
http://jstrace.codeplex.com
(Also has a NuGet package, for those who care)
All levels default to "error", though you can shut them "off".
Though, I can't think of why you would NOT want to see errors
You can change them like this:
Trace.traceLevel('ModuleName1', Trace.Levels.log);
Trace.traceLevel('ModuleName2', Trace.Levels.info);
Fore more docs, check out the Documentation
T
I found a little more advanced piece of code in this url JavaScript Tip: Bust and Disable console.log:
var DEBUG_MODE = true; // Set this value to false for production
if(typeof(console) === 'undefined') {
console = {}
}
if(!DEBUG_MODE || typeof(console.log) === 'undefined') {
// FYI: Firebug might get cranky...
console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {};
}
I developed a library for this usecase: https://github.com/sunnykgupta/jsLogger
Features:
It safely overrides the console.log.
Takes care if the console is not available (oh yes, you need to factor that too.)
Stores all logs (even if they are suppressed) for later retrieval.
Handles major console functions like log, warn, error, info.
Is open for modifications and will be updated whenever new suggestions come up.
This should override all methods of window.console. You can put it on the very top of your scripts section, and if you are on a PHP framework you can only print this code when your app environment is production, or if some kind of debug flag is disabled. Then you would have all your logs in your code working on development environments or in debug mode.
window.console = (function(originalConsole){
var api = {};
var props = Object.keys(originalConsole);
for (var i=0; i<props.length; i++) {
api[props[i]] = function(){};
}
return api;
})(window.console);
A simplification of https://stackoverflow.com/a/46189791/871166
switch (process.env.LOG_LEVEL) {
case 'ERROR':
console.warn = function() {};
case 'WARN':
console.info = function() {};
case 'INFO':
console.log = function() {};
case 'LOG':
console.debug = function() {};
console.dir = function() {};
}
globalThis was introduced in JS 2020. On browsers globalThis same as window, on nodejs - same as global etc. On any environement it will point directly to the global object, so this code will work on any env which supports JS2020 Learn more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
With any modern browser & nodejs v12 or newer you should use this:
globalThis.console.log = () => null;
globalThis.console.warn = () => null;
globalThis.console.info = () => null;
globalThis.console.error = () => null;
I wrote this:
//Make a copy of the old console.
var oldConsole = Object.assign({}, console);
//This function redefine the caller with the original one. (well, at least i expect this to work in chrome, not tested in others)
function setEnabled(bool) {
if (bool) {
//Rewrites the disable function with the original one.
console[this.name] = oldConsole[this.name];
//Make sure the setEnable will be callable from original one.
console[this.name].setEnabled = setEnabled;
} else {
//Rewrites the original.
var fn = function () {/*function disabled, to enable call console.fn.setEnabled(true)*/};
//Defines the name, to remember.
Object.defineProperty(fn, "name", {value: this.name});
//replace the original with the empty one.
console[this.name] = fn;
//set the enable function
console[this.name].setEnabled = setEnabled
}
}
Unfortunately it doesn't work on use strict mode.
So using console.fn.setEnabled = setEnabled and then console.fn.setEnabled(false) where fn could be almost any console function.
For your case would be:
console.log.setEnabled = setEnabled;
console.log.setEnabled(false);
I wrote this too:
var FLAGS = {};
FLAGS.DEBUG = true;
FLAGS.INFO = false;
FLAGS.LOG = false;
//Adding dir, table, or other would put the setEnabled on the respective console functions.
function makeThemSwitchable(opt) {
var keysArr = Object.keys(opt);
//its better use this type of for.
for (var x = 0; x < keysArr.length; x++) {
var key = keysArr[x];
var lowerKey = key.toLowerCase();
//Only if the key exists
if (console[lowerKey]) {
//define the function
console[lowerKey].setEnabled = setEnabled;
//Make it enabled/disabled by key.
console[lowerKey].setEnabled(opt[key]);
}
}
}
//Put the set enabled function on the original console using the defined flags and set them.
makeThemSwitchable(FLAGS);
so then you just need to put in the FLAGS the default value (before execute the above code), like FLAGS.LOG = false and the log function would be disabled by default, and still you could enabled it calling console.log.setEnabled(true)
If you're using gulp, then you can use this plugin:
Install this plugin with the command:
npm install gulp-remove-logging
Next, add this line to your gulpfile:
var gulp_remove_logging = require("gulp-remove-logging");
Lastly, add the configuration settings (see below) to your gulpfile.
Task Configuration
gulp.task("remove_logging", function() {
return gulp.src("src/javascripts/**/*.js")
.pipe(
gulp_remove_logging()
)
.pipe(
gulp.dest(
"build/javascripts/"
)
); });
One liner just set devMode true/false;
console.log = devMode ? console.log : () => { };
To add a bit on top of the other answers, I personally wanted to turn off only specific parts of my code (ES6 modules, but simple separate scripts should work as well).
// old console to restore functionality
const consoleHolder = window.console;
// arbitrary strings, for which the console stays on (files which you aim to debug)
const debuggedHandlers = ["someScript", "anotherScript"];
// get console methods and create a dummy with all of them empty
const consoleMethodKeys = Object.getOwnPropertyNames(window.console).filter(item => typeof window.console[item] === 'function');
const consoleDummy = {};
consoleMethodKeys.forEach(method => consoleDummy[method] = () => {});
export function enableConsoleRedirect(handler) {
if (!debuggedHandlers.includes(handler)) {
window.console = consoleDummy;
}
}
export function disableConsoleRedirect() {
window.console = consoleHolder;
}
Then, just import this module into any file where you want to be able to switch debug mode, call the enable function at the top of the file, and the disable function at the bottom.
If you want to use it in simple scripts, you may want to wrap the top in anonymous functions and/or reorganize it a bit to minimize the namespace pollution.
Additionally, you may want to use just true/false instead of string handler and switch the debug mode in file which you're currently working with.
You could use javascript AOP (e.g. jquery-aop) to intercept all calls to console.debug/log (around) and do not proceed with the actual invocation if some global variable is set to false.
You could even do an ajax call (now and then) so you can change the log enabled/disabled behavior on the server which can be very interesting to enable debugging when facing an issue in a staging environment or such.
After doing some research and development for this problem, I came across this solution which will hide warnings/Errors/Logs as per your choice.
(function () {
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function () {
console.warn = function () { };
window['console']['warn'] = function () { };
this.addEventListener('load', function () {
console.warn('Something bad happened.');
window['console']['warn'] = function () { };
});
};
})();
Add this code before JQuery plugin (e.g /../jquery.min.js) even as this is JavaScript code that does not require JQuery. Because some warnings are in JQuery itself.
Thanks!!
According to this post it was in the beta, but it's not in the release?
console.log is only available after you have opened the Developer Tools (F12 to toggle it open and closed).
Funny thing is that after you've opened it, you can close it, then still post to it via console.log calls, and those will be seen when you reopen it.
I'm thinking that is a bug of sorts, and may be fixed, but we shall see.
I'll probably just use something like this:
function trace(s) {
if ('console' in self && 'log' in console) console.log(s)
// the line below you might want to comment out, so it dies silent
// but nice for seeing when the console is available or not.
else alert(s)
}
and even simpler:
function trace(s) {
try { console.log(s) } catch (e) { alert(s) }
}
Even better for fallback is this:
var alertFallback = true;
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
if (alertFallback) {
console.log = function(msg) {
alert(msg);
};
} else {
console.log = function() {};
}
}
This is my take on the various answers. I wanted to actually see the logged messages, even if I did not have the IE console open when they were fired, so I push them into a console.messages array that I create. I also added a function console.dump() to facilitate viewing the whole log. console.clear() will empty the message queue.
This solutions also "handles" the other Console methods (which I believe all originate from the Firebug Console API)
Finally, this solution is in the form of an IIFE, so it does not pollute the global scope. The fallback function argument is defined at the bottom of the code.
I just drop it in my master JS file which is included on every page, and forget about it.
(function (fallback) {
fallback = fallback || function () { };
// function to trap most of the console functions from the FireBug Console API.
var trap = function () {
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.push(args);
var message = args.join(' ');
console.messages.push(message);
fallback(message);
};
// redefine console
if (typeof console === 'undefined') {
console = {
messages: [],
raw: [],
dump: function() { return console.messages.join('\n'); },
log: trap,
debug: trap,
info: trap,
warn: trap,
error: trap,
assert: trap,
clear: function() {
console.messages.length = 0;
console.raw.length = 0 ;
},
dir: trap,
dirxml: trap,
trace: trap,
group: trap,
groupCollapsed: trap,
groupEnd: trap,
time: trap,
timeEnd: trap,
timeStamp: trap,
profile: trap,
profileEnd: trap,
count: trap,
exception: trap,
table: trap
};
}
})(null); // to define a fallback function, replace null with the name of the function (ex: alert)
Some extra info
The line var args = Array.prototype.slice.call(arguments); creates an Array from the arguments Object. This is required because arguments is not really an Array.
trap() is a default handler for any of the API functions. I pass the arguments to message so that you get a log of the arguments that were passed to any API call (not just console.log).
Edit
I added an extra array console.raw that captures the arguments exactly as passed to trap(). I realized that args.join(' ') was converting objects to the string "[object Object]" which may sometimes be undesirable. Thanks bfontaine for the suggestion.
It's worth noting that console.log in IE8 isn't a true Javascript function. It doesn't support the apply or call methods.
Assuming you don't care about a fallback to alert, here's an even more concise way to workaround Internet Explorer's shortcomings:
var console=console||{"log":function(){}};
I really like the approach posted by "orange80". It's elegant because you can set it once and forget it.
The other approaches require you to do something different (call something other than plain console.log() every time), which is just asking for trouble… I know that I'd eventually forget.
I've taken it a step further, by wrapping the code in a utility function that you can call once at the beginning of your javascript, anywhere as long as it's before any logging. (I'm installing this in my company's event data router product. It will help simplify the cross-browser design of its new admin interface.)
/**
* Call once at beginning to ensure your app can safely call console.log() and
* console.dir(), even on browsers that don't support it. You may not get useful
* logging on those browers, but at least you won't generate errors.
*
* #param alertFallback - if 'true', all logs become alerts, if necessary.
* (not usually suitable for production)
*/
function fixConsole(alertFallback)
{
if (typeof console === "undefined")
{
console = {}; // define it if it doesn't exist already
}
if (typeof console.log === "undefined")
{
if (alertFallback) { console.log = function(msg) { alert(msg); }; }
else { console.log = function() {}; }
}
if (typeof console.dir === "undefined")
{
if (alertFallback)
{
// THIS COULD BE IMPROVED… maybe list all the object properties?
console.dir = function(obj) { alert("DIR: "+obj); };
}
else { console.dir = function() {}; }
}
}
If you get "undefined" to all of your console.log calls, that probably means you still have an old firebuglite loaded (firebug.js). It will override all the valid functions of IE8's console.log even though they do exist. This is what happened to me anyway.
Check for other code overriding the console object.
The best solution for any browser that lack a console is:
// Avoid `console` errors in browsers that lack a console.
(function() {
var method;
var noop = function () {};
var methods = [
'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
'timeStamp', 'trace', 'warn'
];
var length = methods.length;
var console = (window.console = window.console || {});
while (length--) {
method = methods[length];
// Only stub undefined methods.
if (!console[method]) {
console[method] = noop;
}
}
}());
There are so many Answers. My solution for this was:
globalNamespace.globalArray = new Array();
if (typeof console === "undefined" || typeof console.log === "undefined") {
console = {};
console.log = function(message) {globalNamespace.globalArray.push(message)};
}
In short, if console.log doesn't exists (or in this case, isn't opened) then store the log in a global namespace Array. This way, you're not pestered with millions of alerts and you can still view your logs with the developer console opened or closed.
Here is my "IE please don't crash"
typeof console=="undefined"&&(console={});typeof console.log=="undefined"&&(console.log=function(){});
if (window.console && 'function' === typeof window.console.log) {
window.console.log(o);
}
I found this on github:
// usage: log('inside coolFunc', this, arguments);
// paulirish.com/2009/log-a-lightweight-wrapper-for-consolelog/
window.log = function f() {
log.history = log.history || [];
log.history.push(arguments);
if (this.console) {
var args = arguments,
newarr;
args.callee = args.callee.caller;
newarr = [].slice.call(args);
if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
else console.log.apply(console, newarr);
}
};
// make it safe to use console.log always
(function(a) {
function b() {}
for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
a[d] = a[d] || b;
}
})(function() {
try {
console.log();
return window.console;
} catch(a) {
return (window.console = {});
}
} ());
I'm using Walter's approach from above (see: https://stackoverflow.com/a/14246240/3076102)
I mix in a solution I found here https://stackoverflow.com/a/7967670 to properly show Objects.
This means the trap function becomes:
function trap(){
if(debugging){
// create an Array from the arguments Object
var args = Array.prototype.slice.call(arguments);
// console.raw captures the raw args, without converting toString
console.raw.push(args);
var index;
for (index = 0; index < args.length; ++index) {
//fix for objects
if(typeof args[index] === 'object'){
args[index] = JSON.stringify(args[index],null,'\t').replace(/\n/g,'<br>').replace(/\t/g,' ');
}
}
var message = args.join(' ');
console.messages.push(message);
// instead of a fallback function we use the next few lines to output logs
// at the bottom of the page with jQuery
if($){
if($('#_console_log').length == 0) $('body').append($('<div />').attr('id', '_console_log'));
$('#_console_log').append(message).append($('<br />'));
}
}
}
I hope this is helpful:-)
I like this method (using jquery's doc ready)... it lets you use console even in ie... only catch is that you need to reload the page if you open ie's dev tools after the page loads...
it could be slicker by accounting for all the functions, but I only use log so this is what I do.
//one last double check against stray console.logs
$(document).ready(function (){
try {
console.log('testing for console in itcutils');
} catch (e) {
window.console = new (function (){ this.log = function (val) {
//do nothing
}})();
}
});
Here is a version that will log to the console when the developer tools are open and not when they are closed.
(function(window) {
var console = {};
console.log = function() {
if (window.console && (typeof window.console.log === 'function' || typeof window.console.log === 'object')) {
window.console.log.apply(window, arguments);
}
}
// Rest of your application here
})(window)
Make your own console in html .... ;-)
This can be imprved but you can start with :
if (typeof console == "undefined" || typeof console.log === "undefined") {
var oDiv=document.createElement("div");
var attr = document.createAttribute('id'); attr.value = 'html-console';
oDiv.setAttributeNode(attr);
var style= document.createAttribute('style');
style.value = "overflow: auto; color: red; position: fixed; bottom:0; background-color: black; height: 200px; width: 100%; filter: alpha(opacity=80);";
oDiv.setAttributeNode(style);
var t = document.createElement("h3");
var tcontent = document.createTextNode('console');
t.appendChild(tcontent);
oDiv.appendChild(t);
document.body.appendChild(oDiv);
var htmlConsole = document.getElementById('html-console');
window.console = {
log: function(message) {
var p = document.createElement("p");
var content = document.createTextNode(message.toString());
p.appendChild(content);
htmlConsole.appendChild(p);
}
};
}
It works in IE8. Open IE8's Developer Tools by hitting F12.
>>console.log('test')
LOG: test