7

I found a "bug" which causes content to get hidden behind the console log messages.

enter image description here

enter image description here

Take a look at this answer. Run the code example and enter some values in the input field to trigger the change event (you have to click outside of the field or hit enter, to trigger change).

The more you enter, the more the console log is blocking the view to the content area, until to the point where you can't see the input anymore.

3
  • 1
    It does have a maximum height of 150px, so if you put the input as the first line instead of the text, you'd still be able to see the input. A workaround, to be sure, but how is the snippet to know where the "important" parts of the UI are? You can click the checkbox to not show the console at all as well. Oct 13, 2020 at 13:26
  • 2
    The workaround is to use the "full page", then there is plenty of space. It'd be better if the inline version of the messages console is only tall enough to show like a maximum of three messages or something, it really is too cramped.
    – Gimby
    Oct 13, 2020 at 13:30
  • 1
    You can also change the max-height of the console using the same technique as this answer uses to make it 100% height. Oct 13, 2020 at 13:30

2 Answers 2

9

It's up to each poster to decide how much of the height one wants to make available for the console. It's customizable, but the approach admittedly isn't entirely intuitive. To elaborate on what's been said in the comments:

  • If the snippet you're creating has a reasonable amount of stuff displayed in the HTML, you may wish to disable the console completely.:

    enter image description here

    Most snippets do not have the console disabled, so feel free to tell readers in your answer to open their browser console to see logs.

  • If the snippet doesn't have any HTML, you may wish to let the console take up to 100% of the height, which can be done with the CSS rule of .as-console-wrapper { max-height: 100% !important; }:

for (let i = 0; i < 20; i++) {
  console.log(i);
}
.as-console-wrapper { max-height: 100% !important; }

  • The console is, by default, up to 150px tall. If this is too tall for your snippet, but you still want the console to be displayed, you can reduce it to, say, 100px, or whatever works. Using your snippet, you could do:

myGlobalVar = "Foo";
function AppViewModel() {
    this.myVar = ko.observable(myGlobalVar);
}

// Activates knockout.js (you see i´m assigning var vm)
var vm = new AppViewModel();
ko.applyBindings(vm);

setTimeout(function() {
    // edit the observable to update view
    vm.myVar("Bar") ;
    console.log("myVar set to 'Bar'. Proof:");
    console.log(vm.myVar());
}, 1000);



$("#globalVarField").change(function() {
    myGlobalVar = $(this).val();
    console.log("globalVarField changed to '"+ myGlobalVar + "'");
    
    vm.myVar(myGlobalVar);
});
.as-console-wrapper { max-height: 100px !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>

<script>myGlobalVar = "Foo";</script>

<p>Test: <strong data-bind="text: myVar"></strong></p>

Enter a value for myGlobalVar: <input type="text" id="globalVarField">

1
  • Nice, they can improve it by adding a field where we can change the max-height without having to remember / lookup the proper CSS selector and w/o writing code.
    – Black
    Oct 15, 2020 at 8:26
2

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.

1
  • 1
    Yes, that much extra CSS could be a distraction. OTOH, you could write all of that CSS as a single line which starts with a comment like /*A line of CSS to make the snippet console less intrusive:*/. That would make the console CSS not all that intrusive on its own, other than it causes the CSS code block to horizontally scroll. Although, if other people use the code you've provided, they would then need to add appropriate attribution, which would add yet more characters, but could also be done in the single line of comment + CSS.
    – Makyen Mod
    Oct 14, 2020 at 0:10

You must log in to answer this question.

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