Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to safely wrap `console.log`?

Suppose I want to include some calls to console.log for some legitimate production reason, say for something like a unit test harness. Obviously I would not want this to throw a premature exception if the browser doesn't have a console, or if no console is present.

What's the best way to create a simple log function to log stuff to the console, or silently fail without error if no console is present?

The accepted answer to the question linked above:

var log = Function.prototype.bind.call(console.log, console); log.apply(console, ["this", "is", "a", "test"]); 

Can this log function be called normally on IE, and the use of apply here is just to show it's possible? And, I assume from the linked question that this will fail if IE's console is closed when it runs, so log won't work even after the console opens, correct? If that's wrong, can someone explain how it works?

This ycombinator article seems relevant. Are they are talking about the same IE behavior as the question linked above?

Function.prototype.apply.apply(console.log, [console, arguments]); 

Works both on IE9 broken console.log, and regular console.log from other vendors. Same hack as using Array.prototype.slice to convert arguments into a real array.

This works nicely in my chrome console.

function echo(){   Function.prototype.apply.apply(console.log, [console, arguments]); } 

Simplified:

function echo(){   Function.apply.call(console.log, console, arguments); } 

Add a check and return:

function echo(){   return window.console && console.log &&          Function.apply.call(console.log, console, arguments); } 

The example above looks adequate to me. I don't have IE on hand to test it, though. Is this a reasonable approach for safely wrapping console.log?


More questions

Following the link in nav's answer below, we see the code:

Function.prototype.call.call(console.log, console,     Array.prototype.slice.call(arguments)); 

What is the purpose of converting arguments to an array in this case? I guess it must fail in some browser if you don't do this? And, opera weird behavior and console-less browsers aside, shouldn't something like this pretty much work for every other browser as well? And does prototype serve a purpose in the above examples, or are we just being pedantic... Function.call.call or Object.call.call or for that matter isNaN.call.call seem to work just as well as Function.prototype.call.call.

like image 841
Dagg Nabbit Avatar asked Jan 09 '12 08:01

Dagg Nabbit


People also ask

How do you wrap a console log?

Type it and press Ctrl+Alt+W + W . Another way to console. log your variables is to simply place your mouse cursor on them and then wrap them on the line below with Ctrl+Alt+W + Down or the line above with Ctrl+Alt+W + Up .

Does console log reduce performance?

Of course, console. log() will reduce your program's performance since it takes computational time.

How do I clean my console log?

Use the short cut Ctrl + L to clear the console. Use the clear log button on the top left corner of the chrome dev tools console to clear the console.

How do you save a console log in a variable?

If you want to do this to an object that has been already logged (one time thing), chrome console offers a good solution. Hover over the printed object in the console, right click, then click on "Store as Global Variable". Chrome will assign it to a temporary var name for you which you can use in the console.


2 Answers

The problem with wrappers is that they will obfuscate file name and line number of the source of the log message.

Simple IE7 and below shim that preserves Line Numbering for other browsers:

/* console shim*/ (function () {     var f = function () {};     if (!window.console) {         window.console = {             log:f, info:f, warn:f, debug:f, error:f         };     } }()); 
like image 83
dbrin Avatar answered Sep 20 '22 00:09

dbrin


Sorry, there was a bug in my post. Don't know how I missed it.

The PROPER way to create a global console object, if it does not exist:

if (typeof console === "undefined"){     console={};     console.log = function(){         return;     } } 
like image 41
ChrisN Avatar answered Sep 20 '22 00:09

ChrisN