52

console.log(new Map([["a", 1], ["b", 2]]));
// console:    Map(2) {"a" => 1, "b" => 2}
// SO console: {}

console.log(new Set([1, 2, 3]));
// console:    Set(3) {1, 2, 3}
// SO console: {}

console.log(new WeakMap([[{}, 1], [{}, 2]]));
// console:    WeakMap {{…} => 2, {…} => 1}
// SO console: {}

console.log(new WeakSet([{}, {}, {}]));
// console:    {{…}, {…}, {…}}
// SO console: {}

console.log(Symbol("foo"))
// console:    Symbol(foo)
// SO console: [blank line]

It's not a high priority, as I don't think there are a huge number of questions where these types are printed.

11
  • I have run your snippets on my browser(Chrome & Firefox) console and it's working perfect. i believe stackoverflow.com/questions/45571101/… this link will help you. Commented Oct 29, 2018 at 12:51
  • 19
    @KanonChowdhury: Browser console is working perfectly. Stack Overflow Snippet console (the little window with yellow-then-grey background that you get when you click "Run code snippet") is not.
    – Amadan
    Commented Oct 29, 2018 at 12:52
  • 10
    "Browser console is working perfectly.", Except for edge.. Commented Oct 29, 2018 at 13:08
  • 2
    Regarding the link: it shows how to patch the Map object so that 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 patch console with a gist; there was a giant cheer when SO Snippets included the console functionality natively, so I really don't think userside patching of Map 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).
    – Amadan
    Commented Oct 29, 2018 at 13:10
  • 19
    @DragandDrop: Wouldn't know, don't touch the stuff :D My mother used to tell me "Don't touch the edge, it can hurt you" - never knew how right she was. Even though she was talking about a kitchen knife...
    – Amadan
    Commented Oct 29, 2018 at 13:11
  • 2
    It'd be nice if they updated the libraries they allow you to include as well. Feels like stack snippets was abandoned awhile ago.
    – j08691
    Commented Oct 29, 2018 at 13:37
  • 1
    Similar request, meta.stackoverflow.com/questions/370046/… and same cause: StackConsole.log() uses 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?)
    – Kaiido
    Commented Oct 29, 2018 at 14:23
  • 1
    @j08691 The list of libraries are just a convenience for adding <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).
    – Makyen Mod
    Commented Oct 29, 2018 at 17:01
  • @Kaiido: Sorry, but if I ever mistakenly log a mousewheel event, I'm killing the tab, whether or not these are being tested for :D
    – Amadan
    Commented Oct 29, 2018 at 17:28
  • 3
    Btw, WeakSet and WeakMap contents cannot be output by code. Only a debugger-attached inspector can do that. Similar to closure scopes...
    – Bergi
    Commented Oct 29, 2018 at 20:47
  • 3
    @Bergi: That's fair; but they are also not just empty objects. jsbin.com says [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 for Map...)
    – Amadan
    Commented Oct 29, 2018 at 22:43

1 Answer 1

22

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):

integration with a simple editor

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...

5
  • 2
    You can't get at values in Weak structures, so WeakMap {…} is perfect. It is possible to get at values for Map, Set and Symbol and likely others I might have forgotten (Error for one), so it would be nice if it got in. But - awesome. "At any rate... time." As a dev myself, I completely understand, and I did say it's a low prio thing - I couldn't ask for anything else. Thanks <3
    – Amadan
    Commented Oct 30, 2018 at 14:10
  • 4
    Wait, what? It's based on your Twitter following? I thought it was based on the level of outrage resulting from your misinterpretation of something as demonstrating mild disrespect toward a favored social group.
    – jpmc26
    Commented Oct 31, 2018 at 23:34
  • 1
    OMG you crazy person this is absolutely gorgeous :D When can someone corner someone in some meeting again?
    – Amadan
    Commented Dec 20, 2018 at 0:42
  • @amadan lol, which part? Point C?
    – canon
    Commented Dec 20, 2018 at 0:46
  • 1
    Yeah. (Or rather I noticed the edit because of the quick-deleted new answer that I can still see with my magic powers - mwahaha - that I saw before point C)
    – Amadan
    Commented Dec 20, 2018 at 0:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .