Stack Snippets Upgrade: Virtual Console

Question

It's been a long time since we worked on Stack Snippets. I'm sorry. It's mostly because I created it, then I got promoted to management, and now I don't code much anymore and nobody else has time to work on it. So you can blame me.

But before you do blame me, read on for good news!

Thanks in large part to the efforts of canon and his MIT licensed virtual console library for Stack Snippets, we now have a virtual console!

Normally I'd do screenshots, but with Stack Snippets I can just give you a live demo instead. Check it out!

console.log("virtual!");
console.log("console!");

<b>Here's some HTML</b>

The system now offers a new "include console" checkbox in the editor window, which is selected by default. If you hate this new virtual console, you can either unselect it there, or set console: false in the Stack Snippet markdown. So everybody wins!

Special thanks again to canon who did most of the work on this upgrade!

Answer 1

status-completed The console script has been moved to the head and now it waits until DOMContentLoaded, so console elements are inserted at the end of the body.

---

The console element should be inserted at the end of the body, just like the script one.

For example, the following code should log Hello! instead of <div class="as-console"></div>.

console.log(document.querySelector('div').innerHTML);

<div>Hello!</div>

It seems the problem is in content/Js/snippet-javascript.en.js

'writeResult': function () {
  var t = this,
  n = t._state.css,
  i = t._state.js,
  a = t._state.html,
  r = t._state.console;
  if ('' != n || '' != i || '' != a) {
    var o = '';
    null != p && (o = '//' + p),
    r === !0 && (a = '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>' + a);

The last assignment should be

a += '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>'

Answer 2

You cannot XSS using this method, however, the console breaks on HTML style formatting inside a log statement:

console.log("<script>alert('omg');</script>");

Answer 3

status-completed The console now grows and shrinks with the available width. The box doesn't overflow any more.

---

The Stack Snippets console overflows on mobile devices if the viewport isn't wide enough.

This is actually just a small layout bug with a wonderful feature. (Thanks Haney!)

The post in the screenshot is this one.

Answer 4

Is the date in the log really necessary ?

It doubles the height of a console line and we rarely wait more than 24 hours to see how our snippet behaves (when we do, we lose the fastest gun race and nobody sees our answer so the snippet doesn't really matter).

console.log("virtual!");
console.log("console!");

<b>Here's some HTML</b>

Answer 5

status-completed (this is now implemented and live)

---

The virtual console currently implements log, info, warn, error, and clear, but many other console methods don't write to the virtual console (just the real one):

console.log("This uses the virtual console");
console.dir({o:"testing"}); // This doesn't
console.time("timed");      // This doesn't
console.timeEnd("timed");   // This doesn't

Aggregating data from several DSE queries (because of timeouts; links below), here are the number of questions and answers (combined) in which various console methods occur (roughly), looking only at the javascript and jquery tags:

console.log    287,489
console.error    4,291
console.dir      2,025
console.info     1,940
console.warn       979
console.time       431
console.timeEnd    407
console.clear      277
console.assert     155
console.dirxml      20
console.count       17

Based on that and level of difficulty, I suggest implementing:

• dir as an alias for log initially, more can be done if appropriate but the distinction is more for interactive consoles.
• time and timeEnd, as they're quite easy

It's clearly not feasible to expect that the virtual console will have a union of all of the features offered by Chrome, Firefox, IE, and others! But if it's going to be called console, I think to minimize surprise we need to ensure it implements the more commonly-used methods.

DSE query links:

• Occurrence in questions
• Occurrence in answers through 2011
• Occurrence in answers 2012 & 2013
• Occurrence in answers 2014 onward

Answer 6

Move the console outside the document.

Placing the console inside the document can produce lots of interferences. For example:

• CSS selectors like div will select console elements
• JS collections like document.querySelectorAll('div') will include console elements

I think the proper way would be:

• Move the HTML, CSS and JS entered by the user inside an inner content iframe which occupies all the snippet iframe.
• Place the console in the snippet iframe, outside the content iframe

This is how the console behaves in a browser. The content of a page can't interfere with the console.

Here's a simple example of how the console being in the same document is a problem:

console.log("This is...");
setTimeout(function() {
  var d = document.createElement('div');
  d.appendChild(document.createTextNode("...a problem"));
  document.body.appendChild(d);
}, 0);

div {
  position: relative !important;
}

<div>Hmmm</div>

Here's another example:

// Demonstration that `length` on the jQuery instance will be 0
// if there are no matching elements. There are no `div` elements
// in this snippet.
$(function() {
  console.log($("div").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

That demonstration should be logging 0, not 2. Moving the console out of the document entirely is the only way to prevent this kind of cross-talk between the console and the various different snippets people use to demonstrate things.

Answer 7

THIS IS NOW IMPLEMENTED IN THE SCRIPT (demo). Just waiting for SE to add a UI for it.

---

Could we add a flag saying that the console is the entire output? This would do two things:

1. Let the console fill the result area

2. Default to not scrolling to the end on ouput (leaving the scrolling up to the user)

In the javascript tag, I post a lot of answers where the console output is the only output of the snippet. In those snippets, all of the Result area other than the virtual console is just wasted space. So how 'bout a "console is result" or similar checkbox:

The default would be off, of course.

Here's an example from this answer — here's the snippet currently in that answer, using my rubbish workaround snippets.js script:

var str = "j and j and j x";
snippet.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
  test(str, n);
}
function test(s, start) {
  var index = s.indexOf("j", start);
  snippet.log("Starting at " + start + ": " + index);
}

<!-- Script provides the `snippet` object, see https://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

And here it is with the lovely virtual console canon wrote for us:

var str = "j and j and j x";
console.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
  test(str, n);
}
function test(s, start) {
  var index = s.indexOf("j", start);
  console.log("Starting at " + start + ": " + index);
}

As you can see, it shows the end of the output rather than the beginning, a lot more scrolling is required, and clicking the "Full page" link doesn't help.

Answer 8

"Show console" (the label on the checkbox for enabling the feature as of the current UI; previously "include console") doesn't say much of anything. I suggest "Use in-snippet console" or similar, with one of those little (i) icons next to it with a fuller sentence.

Answer 9

When throwing errors, it would be helpful to actually print the line that the error occurred on, especially as the line mentioned doesn't match up with the source code. Of course, it's good that it shows anything for errors.

console.log('console!!')
console.log([1,2,3])
console.log({i: 'think', this: 'is', cool: '!'})
console.log(console.log)
throw new Error('test')

Answer 10

Do not include the console by default, at least until it has been stabilized.

Including the console has collateral effects like Bug in stack snippet?.

People which creates snippets may not realize that this is a bug which (hopefully) will be fixed. So they might rely on the buggy behavior.

Then, once the fix lands, these snippets will break.

Not including the console by default would alleviate this possibility. Moreover, even if the console will be useful to lots of snippets, I think they are still a minority.

Only once the console has been stabilized, it might be considered to enable it by default.

Answer 11

I can't put a bounty on this answer, so I've raised a formal feature-request instead. If you want this done, please go upvote and or bounty as appropriate.

@canon has implemented several useful options in the script (there's a demo here). Please add a UI for them so people don't start using console.config directly.

I'd suggest making it a Console Options button or some such that shows options driven by the script itself, so that when an option is added to the script, the UI for it can be added at the same time. The options would be serialized to JSON and inserted in the stack snippet's introductory comment node.

For instance, where a snippet might currently start with this:

<!-- begin snippet: js hide: false console: true -->

If the user uses the dialog to set options, it might look like this:

<!-- begin snippet: js hide: false console: true console-options: {"maximize":true,"autoScroll":false} -->

Those options get converted into a hidden call to console.config at the beginning of the snippet script.

Answer 12

Logging events directly to the console causes the browser to whirrr for a couple of seconds (probably trying to stringify the whole subtree), and throw some errors (in the same console).

Also, it takes a lot longer than necessary to execute the console.log statement (due to the entire stringification process I guess.)

It currently takes roughly 2-3 seconds for me in Chrome 61. Here's how it looks in the browser console:

function clicked(event) {
  var startTime = new Date();
  console.log(event);
  var endTime = new Date();
  
  console.log("Total time (ms): " + (endTime - startTime));
}

<button onclick="clicked(event)">Click me</button>