Want to throw in a couple solutions I've run into posted elsewhere that allow the console to be out of the way but still accessible. These two tricks are specifically by user @Grundy from this answer from a few years back.
With only one more CSS class, you can reduce the console to a short and transparent header, showing it fully when you hover over it:
console.log('This\nis\nas\nexample\noutput\nthat\ntakes\nup\na\nlot\nof\nspace\n');
.as-console-wrapper {
height: 25px;
opacity: 0.2;
}
.as-console-wrapper:hover {
height: auto;
opacity: 1;
}
<p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p>
There's also this solution, which is even fancier, though less practical because of the added CSS bloat. This reduces the console to a small box in the bottom right corner of the snippet output panel, and also expands on hover:
console.log('This\nis\nas\nexample\noutput\nthat\ntakes\nup\na\nlot\nof\nspace\n');
.as-console-wrapper {
transform: translateX(90%);
}
.as-console-wrapper .as-console {
display: none;
}
.as-console-wrapper::before {
content: "Console";
display: block;
background-color: #e9e9e9;
border: 1px solid #ccc;
}
.as-console-wrapper:hover {
transform: translateX(0);
}
.as-console-wrapper:hover::before {
display: none;
}
.as-console-wrapper:hover .as-console {
display: table;
}
<p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p><p>Testy test is for testing.</p>
I think this second one should be more for show than practical use, because that much extra code could very well distract from whatever the real intent of the snippet is.