91

TL;DR: see UPDATE#3

I recently answered a Stack Overflow question and inserted a stack snippet for a quick demo of my solution.
However, it was a simple JavaScript-only related problem and I didn't use any other panels (HTML/CSS) and the result was the classic console.log(result).
I was wondering if there should be some kind of API to present the console output in the snippet results panel (where only HTML is viewable now).

Let's say you have a solution for a sum function and you write it in a stack snippet like this one:

function sum(a, b) {
  return a + b;
}

console.log('1 + 2 = ' + sum(1, 2));

The code is working, but the snippet isn't useful at all because the result is not shown on the result panel (it acts like a static code block).

Sure one could've written the snippet as this:

function sum(a, b) {
  return a + b;
}

showResult('1 + 2 = ' + sum(1, 2));


// helper function
function showResult(result) {
  document.querySelector('#result').innerHTML = result;
}
<div id="result"></div>

But I think that it defeats the purpose of the snippet: to make it easier for the users to insert and see the results of the solution.

So what do you think? Should I just open my console in order to see all the complete stack snippet outputs or is there a need of some kind of console API for the stack snippets too?

Update:

After several months after I recently added this question, while I really wanted to see the the reaction of SO's community on this topic, it became clear that there isn't going to be a fast decision taken by the SO team.
Therefore, in my opinion, currently, the best solution is the one described in Sam's answer. With this approach you are able to show both dom and console outputs in separate panels without having to alter your code to implement this kind of separation. Of course there is the downside of that you have to include and rely on a 3rd party tool (such as firebug lite), but it seems to be a minor cost if you consider the result.

To explain my decision, I would have been OK with having the user to just check the browser's native console if he had the opportunity to only open the console for the targeted stack snippet. But since you can't and opening the console can show multiple different things that do not have anything to do with the stack snippets (it can show logs, errors or any other kind of messages from the parent window and from other sibling frames), I consider that this approach would actually make the user more confused about the result of the code.

I will keep my eyes opened and will post updates and possibly accept different answers as time passes and new ideas/tools emerge on this topic, but for now, having firebug lite or any similar tool is the way to go.

Update #2:

It seems that a snippets competitor (if I can name it like this in this context) has recently implemented this feature: https://blog.codepen.io/2016/01/27/new-feature-javascript-console/ .
If codepen, which is a massive player in this field, decided to have a custom console for the same reasons, it kind of validates my original needs for the console in stack snippets.

Update #3:

It seems that SO implemented a virtual console feature in the code snippets that actually let the user see a simple console.log output in the result pane.
In this crosspost on meta.stackexchange.com you can see the answer regarding this exact feature: https://meta.stackexchange.com/a/279419/163555 .

12
  • 4
    I started using alert() in stack snippets. It ain't pretty, but it works. It would be nice if SO would (optionally?) catch the console output and display that in the snippet, though.
    – Cerbrus
    Oct 8, 2014 at 7:50
  • 3
    It may be fit for a simple solution as the one in my question, but something tells me that opening a modal popup is not the way to go... Imagine some kind of animation callbacks logs.. they would freeze the whole js execution thread and they might be too many to handle.
    – gion_13
    Oct 8, 2014 at 7:58
  • Yea, the alert is just a workaround right now.
    – Cerbrus
    Oct 8, 2014 at 8:04
  • the snippet that I uses is var log = (function () { var $log = $('#log'); return function (msg) { $('<p/>', {text: msg}).prependTo($log) } })(); Oct 9, 2014 at 8:51
  • I don't understand why @artjom-b's answer has so many down-votes??? The result pane is your DOM not the console (unless you started customizing the result pane based on the snippet language or something). What is wrong with explaining that console.log output can be viewed through the browsers dev tools if the OP is new to web development?
    – user692942
    Oct 10, 2014 at 15:00
  • 2
    Nitpicking, but getElementById because ID, and because it's WAY faster than querySelector. :D Oct 10, 2014 at 15:02
  • 1
    Also wouldn't outputting console.log to the result pane confuse the OP further? If you really want to output console.log as DOM content then use @jeroen's method - console.log = function(x) { document.write(x + "<br />"); }; or just document.write even (less confusing in terms of what to expect in each case).
    – user692942
    Oct 10, 2014 at 15:08
  • 6
    Possible duplicate - meta.stackexchange.com/questions/239706/…
    – user692942
    Oct 10, 2014 at 15:16
  • document.body.innerHTML = 'stuff'; the html, head, and body tags are included by default. If I'm going to be doing it multiple times in a snippet, I'll define a function to make it cleaner.
    – user4639281
    Feb 3, 2016 at 3:36
  • I'd just like to add that, if Stack Exchange does implement something like this, please wrap the native console.log instead of just replacing it. The native functions are getting more featureful over time (custom formatters coming soon!) and we wouldn't want to break examples of those.
    – Jeremy
    Apr 24, 2016 at 5:47
  • @JeremyBanks my implementation wraps, fyi. ;)
    – canon
    Apr 27, 2016 at 3:44
  • 1
    Should you put an update at the top of the question that mentions this is done? SO now includes console output by default. Well, let me rephrase that. New snippets have console output by default by having a console: true flag which you can choose to be false. Old snippets don't have that flag set and so don't show the output (probably best since the output might have obstructed whatever the old snippet was trying to show).
    – gman
    Jul 11, 2016 at 14:39

8 Answers 8

36

I've used Firebug JS in a few Stack Snippets, since that is what I became used to on JSFiddle (I have the URL bookmarked). It's not the prettiest solution, because it includes pointless HTML1 (the script element) when you are often just trying to demonstrate simple Javascript.

function sum(a, b) {
  return a + b;
}

console.log('1 + 2 = ' + sum(1, 2));
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>


1: See feature request: Allow to hide sections of Stack Snippets

11
  • 2
    +1 nice, I haven't thought of this... is the best answer so far (from my point of view), but it still seems a bit too complicated (+ you're relying on a 3rd party script)
    – gion_13
    Oct 9, 2014 at 9:05
  • 1
    Not too complicated if SO implements FBLite in the snippets :) Oct 9, 2014 at 18:10
  • 3
    I only see a dialog telling me "Firebug Error: Firebug GUI could not be created."
    – idmean
    Oct 10, 2014 at 14:36
  • @wumm what browser?
    – Sam
    Oct 10, 2014 at 14:41
  • 1
    @Sam Safari 7.1 (In Chrome it works for me too)
    – idmean
    Oct 10, 2014 at 14:42
  • 3
    Seriously over engineered for a code sample on SO surely.
    – user692942
    Oct 10, 2014 at 15:25
  • Why is it that the non-debug version (getfirebug.com/firebug-lite.js) does not work?
    – Salman A
    Jan 9, 2015 at 21:57
  • I get "The XSS Auditor refused to execute a script in 'stacksnippets.net/js' because its source code was found within the request. The auditor was enabled as the server sent neither an 'X-XSS-Protection' nor 'Content-Security-Policy' header." in Chrome when running this snippet.
    – Joe
    May 7, 2015 at 14:49
  • 1
    Looks like the issue I was experiencing yesterday was because of the ridiculous filter at work - my home computer is fine.
    – Joe
    May 9, 2015 at 20:24
  • @TomášZato this answer really deserves more upvotes, too.
    – Sam
    Oct 22, 2015 at 13:39
  • Doesn't work on iOS Chrome.
    – user4639281
    Feb 3, 2016 at 3:40
31

I quite agree. I made a feature request on MSE to that effect as well: Add a console to Stack Snippets

I also provided a userscript to enable a console. Please download and provide feedback (and up votes ;)),

1
  • 5
    Added an extra pane to show the console, that I agree with. Replacing the result pane, not so much.
    – user692942
    Oct 10, 2014 at 15:11
12

I gave your question +1, and would hate to see my answer accepted, but for what it's worth, there's a simple workaround for basic cases. Add this to your snippet at the top:

console.log = function(x) { document.write(x + "<br />"); };

Yuck! And also yum!

Example usage:

console.log = function(x) { document.write(x + "<br />"); };

function sum(a, b) {
  return a + b;
}

console.log('1 + 2 = ' + sum(1, 2));

Or you could just use plainly document.write(1 + 2 = ' + sum(1,2) + '<br \>'); of course ;-).

7
  • 6
    Thanks for the input and I promise you that I'll never accept your answer! :) I would hate to see stackoverflow examples guiding newcomers in the wrong direction. document.write is a big no no for me.
    – gion_13
    Oct 9, 2014 at 8:27
  • 12
    Agreed, but hey: it beats alert IMHO :D
    – Jeroen
    Oct 9, 2014 at 8:34
  • :)) right.. at least it places the result in the result panel
    – gion_13
    Oct 9, 2014 at 8:35
  • 1
    document.write() ... T_T Oct 10, 2014 at 15:04
  • Placing the console.log in the Result Pane is wrong unless you explain to the OP what you are doing. If you want to show simple output in the DOM what is wrong with document.write?
    – user692942
    Oct 10, 2014 at 15:24
  • 1
    @Lankymart Hehe, yeah, of course. I thought that was implicit in my answer, guess that could've been missed. Added it as a footnote to the answer.
    – Jeroen
    Oct 11, 2014 at 10:59
  • This seems like the best solution to me? This seems like one of the few correct uses for document.write()? The only problem is that the behaviour of document.write is quite different to console.log. Try document.write([]) for instance. Nov 11, 2015 at 6:38
4

Stack Overflow now supports displaying the results of console.log in a code snippet!

Look!

console.log("hello");
console.log("world!");
console.log({foo: "bar"});

2
  • Thanks. But good to point adding console:true to snippet's header: <!-- begin snippet:js console:true -->. Mar 2, 2019 at 16:43
  • @Mir-Ismaili Tick the "Show console" checkbox in the editor.
    – Flimm
    Mar 7, 2019 at 11:17
2

I think it would be best if you could have a separate console output pane under the HTML output pane, and even hide the HTML output pane if it isn't used. In the meantime, this is the workaround I use:

console.log = function(str) {document.body.innerHTML += '<p>' + str + '</p>';};

console.log("hello");
console.log("world");

-4

"Should I just open my console in order to see all the complete stack snippet outputs or is there a need of some kind of console API for the stack snippets too?"

console.log has many useful scenarios. It is a way to verify what is actually shown if you need verification.

var a = 1;
var b = 1;
console.log(a+b);//2

The above snippet does not need a special console API. Not only is it obvious that 1+1 is going to be 2 in the console, but a simple //2 conveys what the user is going to see in the console.

Requiring an answerer to write a whole UI experience showing how to add two numbers would be a massive waste of time for users who already could use more time to spare :)

In more advanced issues, it makes even more sense to use the built in behavior of console.log.

var complexObject = {};
(function a(i,o){
  if( i == 5 ) return;
  o["a"+i] = {
   val : i
  }
  a(i+1,o["a"+i]);
})(0,complexObject);
console.log(complexObject);//now what?

I do not believe an API would help in this scenario. It would have to entirely mock the console to be useful, in which case, given the context the user should probably be expected to at least know what the console is and how to access it. Otherwise, perhaps the user can simply recognize the pattern the recursion is creating as is already the case in every language other than JavaScript on Stack Overflow.

tldr; The team has better things to do with their time than re-invent the wheel.

0
-9

I believe JS Bin provides the most mature, stable, and well tested way of doing this.

http://jsbin.com/kigegi/1/edit?html,js,console

It's a Remy Sharp project, with 92 other contributors, and it's open-sourced:

https://github.com/jsbin/jsbin/blob/master/MIT-LICENSE.TXT

3
  • 2
    Is this an answer?
    – user692942
    Oct 10, 2014 at 15:14
  • 1
    Yes, because it clearly shows console.log() outputting strings, numbers, arrays, objects and html elements to a pane, in a way familiar way to those who use console.
    – code_monk
    Oct 10, 2014 at 15:51
  • 3
    It can clearly show what it likes but how does that answer the OPs question? At best it's a comment pointing to an example of an implementation.
    – user692942
    Oct 10, 2014 at 16:24
-11

I really don't see a need for this.

If the poster has written a Stack-Snippet which shows the results in the console, it is the responsibility of the poster to tell in the post itself that some/all of the results are written to console and how to open it, if it is apparent that the asker is new to web development.

The poster can of course make it easier to see it by including Firebug in the snippet itself like Sam showed.

The other problem with this feature-request is that it doesn't specify what should be logged. Do we really want a separate tool that potentially does the same as the already existing tool? Maybe it is only limited to console.logs, but what about info, warn and debug?

The developer tools in the browser can be moved around as a separate window if need be. I don't want to be stuck with a console that I can change when I need to.

TL;DR: There is already a perfectly capable tool for that and it should be used.

9
  • 9
    If we go by that judgment, why use stack snippets? Aren't there many other good similar tools already out there? What about jsfiddle, codepen, plunkr and many others? The idea behind stack snippets (in my vision at least) is to make it easier for the user to read and write the answer. I'm not saying stack snippets isn't good.. it cool, but there's room for improvement. I would personally want to have a way (without any 3rd party code) to show some simple logs in the result panel, even if my result isn't in the form of html/css.
    – gion_13
    Oct 9, 2014 at 13:13
  • 1
    To my understanding stack-snippets were introduced to keep users on the site and not let them wander off to jsfiddle and the like. Right now Stack-Snippets is tailored to be similar to jsfiddle which also doesn't have an in-page console. The snippets solve the problem for HTML+CSS+JS. A JS-only mode is a different use case. I think it should have a dedicated console, but only when SE introduces other snippets languages.
    – Artjom B.
    Oct 9, 2014 at 13:22
  • 1
    @ArtjomB. So basically we shouldn't add a console because others don't have it either?
    – Theolodis
    Oct 10, 2014 at 7:17
  • @Theolodis I'm saying that it doesn't make sense right now. There is a perfectly versatile solution available. jsFiddle doesn't have it, because they don't need it. But I'm also saying that if we get other language runtimes into the browser, we might need one. But that would depend on the implementation.
    – Artjom B.
    Oct 10, 2014 at 7:35
  • 4
    Why so many down-votes? Console is the console a stack snippet is a stack snippet. If your going to write snippets using console.log and your OP is new to web development explain where console.log can be found. The result pane is the document not the console if you want to write out to the document then document.write is perfectly acceptable (regardless of the naysayers). Don't make the result pane something it isn't! +1
    – user692942
    Oct 10, 2014 at 14:56
  • @canon If your going to write javascript only and use console.log don't use a stack snippet it's that simple. What makes me laugh is you talk about "in a standardized way" but by making the result pane something it's not your actually breaking the standardized approach it already has.
    – user692942
    Feb 10, 2015 at 22:32
  • @canon That is not what I'm saying at all. Stack Snippets should be used for demoing JavaScript but if they use console.log expect the result to be in the developer tools console in the browser. Whereas if you use document.write expect the result to be in the results pane of the snippet. This is how the web works, anything else is misguided hacks.
    – user692942
    Feb 19, 2015 at 9:46
  • @canon I can see you're point when you phrase it like that.
    – user692942
    Feb 19, 2015 at 14:16
  • @Canon Still technically you are still hacking up the DOM with your approach. What makes document.write() any worse?
    – user692942
    Feb 19, 2015 at 14:23

You must log in to answer this question.

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