Skip to main content
Visually separate screenshots from answer.
Source Link
Cerbrus
  • 72.6k
  • 65
  • 370
  • 513

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

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

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>

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>

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>

added 1 character in body
Source Link
user17726418
  • 2.4k
  • 1
  • 6
  • 9

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

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>

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>

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>

New and improved screenshots with 100% more freehand circles; Also, the screenshots are uniform;
Source Link
VLAZ
  • 28.8k
  • 3
  • 91
  • 147

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 tickedThe "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 untickedThe "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>

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>

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>

Source Link
VLAZ
  • 28.8k
  • 3
  • 91
  • 147
Loading