1

I noticed what seems to be a pretty bizarre bug with the in-built Stack Snippets console in my answer here: https://stackoverflow.com/questions/77858025/how-to-negate-the-whole-regex/

When I run the sample, I get the following output in the in-built console, seemingly consistently in this order:

/^(?![\s\S]*^(?![\s\S]*(foo|bar))[\s\S]*$)[\s\S]*$/ doesn't match "... baz ..."
/\d{3}/ matches "123"
/\d{3}/ matches "123 ..."
/\d{3}/ matches "... 123"
/\d{3}/ matches "... 123 ..."
... truncated ...

That's not the order in which the tests are (synchronously) run.

The Chrome dev tools console, meanwhile, displays the correct order:

/(ma|(t){1})/ matches "ma"
/(ma|(t){1})/ matches "ma ..."
/(ma|(t){1})/ matches "... ma"
/(ma|(t){1})/ matches "... ma ..."
/^(?![\s\S]*(ma|(t){1}))[\s\S]*$/ doesn't match "ma"
... truncated ...
0

1 Answer 1

6

Problem (or feature)

The console in a Stack Snippet seems to only show the last 50 lines of output. The code you posted, has 145 lines of output. Therefore, you get the correct order, but not all lines:

for(let i = 1; i <= 145; i++) {
  console.log(i);
}

Considering the custom logging implemented in a Stack Snippet is based on adding more DOM elements, then it makes sense there is a cap. Otherwise too much logging will lead to an increasingly expensive to render snippet.

Alternatives

If you hit the logging limit in a snippet, you can try a few things:

Reduce the amount of logs

If you have too much that are extraneous, remove them to get just the important ones.

Split the snippets

In case there are no extra lines of logs but you may be able to separate them into logical groups. If so, it might be a good idea to tick the "Hide snippet by default" to reduce the visual noise of there being multiple snippets:

The "Hide snippet by default" option in a stack snippet is ticked

for(let i = 1; i <= 50; i++) {
  console.log(i);
}

for(let i = 51; i <= 100; i++) {
  console.log(i);
}

for(let i = 101; i <= 145; i++) {
  console.log(i);
}

Output to the DOM

Not as convenient, as you have to write more code just to display the output. But it is also more flexible. It could be as simple as just adding the output:

const output = document.querySelector("#output");

for(let i = 1; i <= 145; i++) {
  const resultContainer = document.createElement("span");
  resultContainer.textContent = i;
  output.appendChild(resultContainer);
  
  output.appendChild(document.createElement("br"));
}
<div id="output"></div>

Or you can also apply some styling to make it look better. And/or generate some more semantically meaningful HTML, if that would help.

Direct users to open the browser developer console

This is an option when the Stack Snippet console does not behave as you want. There are some edge cases where it happens. The capping of the output also one of them. In those cases it makes sense to just rely on the browser console.

It is helpful to untick the "Show console" option and also add a message so users know where to look for the output:

The "Show console" option in a stack snippet is unticked

for(let i = 1; i <= 145; i++) {
  console.log(i);
}
<h1>Press F12 to see the output in the console</h1>

7
  • D'oh! I didn't even think about it being truncated from the start. That's a really weird way of doing it though — I'd expect it to be truncated at the end if anything. And at the very least it should be showing [[95 hidden lines]] or something to show something's been omitted. Plus 50 seems like a really low cap if it's for performance reasons — modern web apps routinely render hundreds of elements without breaking a sweat. Commented Jun 4 at 8:04
  • @LionelRowe Stack Snippets are not modern, though. They are probably a decade old, if not more. And not updated.
    – VLAZ
    Commented Jun 4 at 8:08
  • any idea why it's not updated, given that it's still an extremely popular feature? And is it so feature frozen that they wouldn't consider adding a message saying [[n hidden lines]]? 🫤 Commented Jun 4 at 8:12
  • To clarify, SE have not updated the Stack Snippet used on the site. The feature itself has had updates. I'm not sure what has been changed but it's an open source product that exists outside SE. I'll try to dig up where it was.
    – VLAZ
    Commented Jun 4 at 8:14
  • 1
    OK, so there are actually two things here: 1. Runnable Stack Snippets released in 2014. Basically alternative to JSFiddle. And like JSFiddle of the time, this doesn't include any extra logging. You're supposed to open the browser console. 2. The Stack Snippet console (GH repo) is an open source console implementation for Stack Snippets developed by canon. This was added in 2016. It's 2. that needs to be updated on the site but hasn't.
    – VLAZ
    Commented Jun 4 at 8:23
  • 1
    Also not sure what the current state of the console is and whether it supports more logs. In theory, one can make a PR but I'm not sure if it's going to be seen soon. And even then, I don't know if SE even plan on updating the console.
    – VLAZ
    Commented Jun 4 at 8:24
  • yeah the repo and its maintainer both look to be inactive, I opened an issue and a PR though Commented Jun 4 at 9:49

You must log in to answer this question.

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