I don't know that we can really expand those weak structures.
That said, a newer version of the console visualizer was mentioned back in January. That particular version replaced our JSON-flavored object dumps with lazy tree expansion, added some highlighting, type names, console.table()
, and now handles a few specialized types (try expanding Map
and Set
).
/*<ignore>*/console.config({maximize:true,timeStamps:false,autoScroll:false});/*</ignore>*/
console.log(new Map([["a", 1], ["b", 2]]));
console.log(new Set([1, 2, 3]));
console.log(new WeakMap([[{}, 1], [{}, 2]]));
console.log(new WeakSet([{}, {}, {}]));
console.log(Symbol("foo"));
console.log(TypeError("foo"));
console.log(new Uint8Array(10));
let values = ["a", "b", "c", 1, 2, 3, null, undefined, new Date(), /(?:)/, window];
console.log("test: %o, date: %o", window, new Date());
console.log(values);
console.log({values});
console.log(...values);
console.log(function derpopotamus(a, b, c) {});
console.table([
{name: "John", age:23, gender: "male"},
{name: "Zoe", age:22, gender: "female"},
{name: "Cthulhu", age: Infinity, gender:undefined},
]);
<script src="https://gh-canon.github.io/stack-snippet-console/console.min.js"></script>
I never pushed SO to adopt the updated version because...
A: Lazy expansion may break questions and answers that rely upon the previous "dump the state of this object as it exists right now" behavior. That said, we could add an option, defaulted to true
for old snippets, which automatically expands objects in simple log(arg1)
calls until we hit a cyclic reference.
B: I didn't have the time to test it thoroughly
C: This particular version still pollutes the snippet's DOM
There's a separate, unfinished fork which focuses on segregating the console DOM from the demo rendering. The idea is to intercept console commands in the iframe and rebroadcast them to the parent window via messaging... reducing any object value to a minimal stub containing a lookup identifier for later expansion, e.g.:
{
id: "1540908076493-12",
type: "object",
subType: "Array"
}
On expansion, the parent window makes a request to the iframe (via messaging) for additional information about that object id.
The page structure looks something like this (or it will):
- Editor window/frame (your domain)
- Console frame (snippet domain)
- Render frame (sandbox snippet subdomain)
Note: This demo has been decommissioned.
Here's a sample integration with a bare-bones editor (click to play, don't mind the dark theme):
Note: This is still in development. It's missing a few methods, nothing's been transpiled yet, and you may see some weirdness here and there. That said, it actually has a few more features than the current version: grouping, line-headers, input/eval, etc.
D: SO hasn't updated the snippet UI very much at all... much less to account for the console configuration options added way back in 2016.
E: It took a few years to get SO to adopt an integrated console in the first place. We pretty much had to corner Haney in a town hall meeting, solution in hand.
Don't get me wrong, I'm grateful they gave us anything. Still, I'm not going to burn energy lobbying for a change unless I can make a strong case. I certainly don't have the twitter following to effect change outright...
repl.it
will display it. First of all, it does not work for SO Snippets. And furthermore, there used to be a time when we used to patchconsole
with a gist; there was a giant cheer when SO Snippets included the console functionality natively, so I really don't think userside patching ofMap
in each post is a good answer. It is a missing feature that should be implemented (I personally don't particularly need to rush it, but it should be documented, and I haven't seen it mentioned before).JSON.stringify()
, so yes, many objects won't get a nice output, like TypedArrays are currently exposed as literal objects. But I'm afraid that adding a special parser for all these cases would make the console way more slow than it already is (ever made the mistake of letting the StackConsole on while logging a mousewheel event?)<script src="foo"></script>
elements to the HTML section. You can add any others you want manually. Although, I do agree that it would be convenient to add/update those, it's not something that actually prevents you from using whatever libraries you need (within the other constraints on Stack Snippets).WeakSet
andWeakMap
contents cannot be output by code. Only a debugger-attached inspector can do that. Similar to closure scopes...[object WeakMap] { ... }
; codepen.io says[object WeakMap] {}
, without listing contents, but letting you know there's more to the object than{}
. (To be fair, they also have equivalent output forMap
...)