Consider:
var o = { a: 1, b: 2, toString: function() { return "foo"; } };
In Chrome dev tools:
Is there anything I could do to the object such that o is displayed in the debug console as "foo" instead of the full object?
1 Answer
Here's my attempt:
(function() {
var cl = console.log;
console.log = function() {
cl.apply(console, [].slice.call(arguments).map(function(el) {
return {}.toString.call(el) === '[object Object]' && typeof el.toString === 'function' && el.toString !== Object.prototype.toString ? el.toString() : el;
}));
};
}());
^ Just throw this script before any console.log call.
Test case:
console.log('str', 42, /rege?x/, { a: 1 }, [1, 2], {
toString: function() { return "foo"; }
}, new function() {
this.toString = function() {
return 'bar';
};
}
);
This just maps plain/constructed objects which have a toString method different from Object.prototype.toString to their .toString() value. I chose this way over hasOwnProperty as constructors may also have a toString method in their prototype.
As you can see, all objects and even primitives inherit a toString method from the native constructors, so you may need tweaking for specific use cases. The snippet above does not stringify function objects with custom toString properties, for example.
8 Comments
Fabrício Matté
This should suffice for all common use cases that I can think of. Feel free to comment if you manage to find any bugs with it.
Matt Johnson-Pint
Nice attempt, this is pretty close - except you still have to call
console.log(o) instead of just o. I guess the debug window doesn't go through console.log directly?Matt Johnson-Pint
Also, I was really hoping for something I could put inside the object so it was wired up but wouldn't affect everything globally. Perhaps that is just not possible in JS?
Fabrício Matté
@MattJohnson Oh I see, thought you were referring to
console.log which is often used from inside the code, as for entering it directly on Dev Tools it can't be solved with plain JS I believe. Maybe it is possible to extend or override certain parts of the Dev Tools (I've seen extensions that extend the Firebug console but not sure if there's an API to extend the Dev Tools console).Fabrício Matté
This may be possible with
chrome.experimental.devtools.console, I'll check whether I can get something useful out of it. =] |
.toString()is not good enough? I mean, if you want the return value ofo.toStringthe easiest and cleanest way is calling it as you've done.ToString()will use it implicitly when debugging, even when you don't call.ToString(). I want to know if the same effect is possible in JavaScript somehow.console.log, but I'm thinking about the side-effects.''+o