Stack Snippets Upgrade: Virtual Console

Question 1

It's been a long time since we worked on Stack Snippets. I'm sorry. It's mostly because I created it, then I got promoted to management, and now I don't code much anymore and nobody else has time to work on it. So you can blame me.

But before you do blame me, read on for good news!

Thanks in large part to the efforts of canon and his MIT licensed virtual console library for Stack Snippets, we now have a virtual console!

Normally I'd do screenshots, but with Stack Snippets I can just give you a live demo instead. Check it out!

console.log("virtual!");
console.log("console!");

<b>Here's some HTML</b>

The system now offers a new "include console" checkbox in the editor window, which is selected by default. If you hate this new virtual console, you can either unselect it there, or set console: false in the Stack Snippet markdown. So everybody wins!

Special thanks again to canon who did most of the work on this upgrade!

Question 2

Awesome, good job!

Question 3

YES YES YES! This is the best thing since stack snippets :D

Question 4

Note to self: don't implement a console or you might get promoted again

Question 5

Not working in Firefox ("Mozilla/5.0 (X11; Linux x86_64; rv:48.0) Gecko/20100101 Firefox/48.0") but works in Chrome ("Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2723.2 Safari/537.36"). Haven't had time to debug but just quick report.

Question 6

Doesn't work with stackoverflow.com/a/21457293/259953 :( Thus, it's useless

Question 7

Answering questions yesterday, it was so nice not having to include my workaround for this!!

Question 8

This needs to be featured!

Question 9

Good work, though here is one problem/issue that I think needs to be addressed ASAP

Question 10

Work on this stuff seems to have stalled again. This comment from more than two weeks ago says a minor change will be "in the next build" but it still isn't there; this significant enhancement that canon's made to the script doesn't seem to be getting any UI attention. Could we please get those in? canon's done the hard work.

Question 11

@T.J.Crowder yes it has stalled for the moment. We're still working on it but other things internally have taken priority for a few weeks.

Question 12

I have create stack-snippets-console to be able to discuss, report, and propose about the console in a proper way.

Question 13

status-completed The console script has been moved to the head and now it waits until DOMContentLoaded, so console elements are inserted at the end of the body.

The console element should be inserted at the end of the body, just like the script one.

For example, the following code should log Hello! instead of <div class="as-console"></div>.

console.log(document.querySelector('div').innerHTML);

<div>Hello!</div>

It seems the problem is in content/Js/snippet-javascript.en.js

'writeResult': function () {
 var t = this,
 n = t._state.css,
 i = t._state.js,
 a = t._state.html,
 r = t._state.console;
 if ('' != n || '' != i || '' != a) {
 var o = '';
 null != p && (o = '//' + p),
 r === !0 && (a = '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>' + a);

The last assignment should be

a += '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>'

Question 14

Nice catch! ...

Question 15

Now that I think about it, querySelector is just the tip of the iceberg. Even if moved to the end, console elements will be affected by CSS and alter the length of querySelectorAll and getElementsByTagName collections. The proper way would be moving the user input inside an iframe, and place the console in the outer page.

Question 16

This is already creating problems

Question 17

@T.J.Crowder Read up on this and help getting this fixed ASAP

Question 18

I ran into it in a snippet just yesterday, as I was going to do an example with a series of divs and opened it with document.querySelectorAll("div"). Moving it to the end may help some, but then it'll get mixed with any dynamically-added content, and wouldn't have helped in my case yesterday. Having the console div in the same document at all is likely to be an ongoing issue. Think it needs to be moved to a frame.

Question 19

@canon Assuming the iframes have same domain, it would be something like contentIframe.contentWindow.console.log = function(){ ... }

Question 20

@canon I was thinking something like this. But inserting snippet contents at DOMContentLoaded would break snippets which use DOMContentLoaded.

Question 21

@canon: Thanks for the head's up. FYI: meta.stackexchange.com/questions/279420/…

Question 22

You cannot XSS using this method, however, the console breaks on HTML style formatting inside a log statement:

console.log("<script>alert('omg');</script>");

Question 23

@canon must be escaping thingy. <script></script> throws, but not <a></a>. <script></script\> doesn't throw.

Question 24

Keep in mind there's no huge risk here as-is. We'll get it fixed, but Stack Snippets are sandboxed and secured on a 3rd party domain. Nothing bad will come of anyone's best efforts here. :)

Question 25

Instead of putting the code inside of a script tag, you could use src= with a data URL (without base64, if you get the encoding right) to avoid this issue. (cc @canon)

Question 26

Perhaps this is growing into a new feature request @canon <_<

Question 27

status-completed The console now grows and shrinks with the available width. The box doesn't overflow any more.

The Stack Snippets console overflows on mobile devices if the viewport isn't wide enough.

This is actually just a small layout bug with a wonderful feature. (Thanks Haney!)

The post in the screenshot is this one.

Question 28

Fixed and live momentarily.

Question 29

@Pat did you do that when viewing the full site theme, or mobile site theme?

Question 30

@ShadowWizard mobile view

Question 31

Oh. And now it still works for you?

Question 32

I can't run the snippet any more @Sha

Question 33

@Haney the snippets are not working anymore for mobile, is this on purpose?

Question 34

status-completed (this is now implemented and live)

The virtual console currently implements log, info, warn, error, and clear, but many other console methods don't write to the virtual console (just the real one):

console.log("This uses the virtual console");
console.dir({o:"testing"}); // This doesn't
console.time("timed"); // This doesn't
console.timeEnd("timed"); // This doesn't

Aggregating data from several DSE queries (because of timeouts; links below), here are the number of questions and answers (combined) in which various console methods occur (roughly), looking only at the javascript and jquery tags:

console.log 287,489
console.error 4,291
console.dir 2,025
console.info 1,940
console.warn 979
console.time 431
console.timeEnd 407
console.clear 277
console.assert 155
console.dirxml 20
console.count 17

Based on that and level of difficulty, I suggest implementing:

dir as an alias for log initially, more can be done if appropriate but the distinction is more for interactive consoles.
time and timeEnd, as they're quite easy

It's clearly not feasible to expect that the virtual console will have a union of all of the features offered by Chrome, Firefox, IE, and others! But if it's going to be called console, I think to minimize surprise we need to ensure it implements the more commonly-used methods.

DSE query links:

Question 35

@canon: Fantastic! Extremely good of you to take the time to enhance SE in this way. Any idea when they'll put that on the site?

Question 36

Going live in a few!

Question 37

@canon: I was! :-)

Question 38

Is the date in the log really necessary ?

It doubles the height of a console line and we rarely wait more than 24 hours to see how our snippet behaves (when we do, we lose the fastest gun race and nobody sees our answer so the snippet doesn't really matter).

console.log("virtual!");
console.log("console!");

<b>Here's some HTML</b>

Question 39

Yeah, good point. I think I'll dump the date part this morning.

Question 40

Going live in a few here.

Question 41

@Haney much cleaner!

Question 42

@Haney: Nice one!

Question 43

TBH the time isn't probably useful either...

Question 44

Could be, for demonstrating how long something takes.

Question 45

Move the console outside the document.

Placing the console inside the document can produce lots of interferences. For example:

CSS selectors like div will select console elements
JS collections like document.querySelectorAll('div') will include console elements

I think the proper way would be:

Move the HTML, CSS and JS entered by the user inside an inner content iframe which occupies all the snippet iframe.
Place the console in the snippet iframe, outside the content iframe

This is how the console behaves in a browser. The content of a page can't interfere with the console.

Here's a simple example of how the console being in the same document is a problem:

console.log("This is...");
setTimeout(function() {
 var d = document.createElement('div');
 d.appendChild(document.createTextNode("...a problem"));
 document.body.appendChild(d);
}, 0);

div {
 position: relative !important;
}

<div>Hmmm</div>

Here's another example:

// Demonstration that `length` on the jQuery instance will be 0
// if there are no matching elements. There are no `div` elements
// in this snippet.
$(function() {
 console.log($("div").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

That demonstration should be logging 0, not 2. Moving the console out of the document entirely is the only way to prevent this kind of cross-talk between the console and the various different snippets people use to demonstrate things.

Question 46

Thanks for reporting this bug. I have modified Stack Snippets to include the console in the <head> tag which alleviates DOM assumptions. This fix is now live.

Question 47

@Haney Thanks, but that can't work directly. The console script appends some elements to document.body, so that will throw an error in the head. Better move the script to the end of the body, or use an event listener in the head.

Question 48

It has been modified to use an event listener, not to worry!

Question 49

@Haney OK, it was a caching problem XD

Question 50

@Haney: While moving the script is a start, the bigger problem is that the console adds elements to body, which interact with the snippet. Have to strongly disagree with the statement that the cost/benefit isn't there. Not only worth doing, but as Oriol points out, it needs doing soon. Here's an example of how it could work: output.jsbin.com/wicofa (Source: main page, console page, example snippet)

Question 51

@Haney: Sorry, the first JSBin link above is to the wrong page. Here's the example: output.jsbin.com/himarux

Question 52

@canon: Great! Can't imagine you need any help, but the offer's there if you like. I know I've said it before, but I'll just say it one last time: I really appreciate your work on this, and I know I'm not the only one who does. It's rubbish that the only reason this is moving forward is that you're doing the work, but it's really great you're doing the work and we're fortunate to have you doing it.

Question 53

THIS IS NOW IMPLEMENTED IN THE SCRIPT (demo). Just waiting for SE to add a UI for it.

Could we add a flag saying that the console is the entire output? This would do two things:

Let the console fill the result area
Default to not scrolling to the end on ouput (leaving the scrolling up to the user)

In the javascript tag, I post a lot of answers where the console output is the only output of the snippet. In those snippets, all of the Result area other than the virtual console is just wasted space. So how 'bout a "console is result" or similar checkbox:

"console is result" option

The default would be off, of course.

Here's an example from this answer — here's the snippet currently in that answer, using my rubbish workaround snippets.js script:

var str = "j and j and j x";
snippet.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
 test(str, n);
}
function test(s, start) {
 var index = s.indexOf("j", start);
 snippet.log("Starting at " + start + ": " + index);
}

<!-- Script provides the `snippet` object, see https://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

And here it is with the lovely virtual console canon wrote for us:

var str = "j and j and j x";
console.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
 test(str, n);
}
function test(s, start) {
 var index = s.indexOf("j", start);
 console.log("Starting at " + start + ": " + index);
}

As you can see, it shows the end of the output rather than the beginning, a lot more scrolling is required, and clicking the "Full page" link doesn't help.

Question 54

i second that, but i would request a variable splitter, too, because the console output is fixed in size and it would be better if the size can be adjusted.

Question 55

@NinaScholz: Thanks. I'd post the variable thing as a separate suggestion. This one is just a simple all-or-nothing.

Question 56

I'd love to hear from the downvoters why they don't think this would be useful. I'd be using it every day, several times a day.

Question 57

@canon: You rock. Yes, normal consoles scroll (well, most do) and we want what you originally did as the default, no question. But the use case for most of my answers is more document.write-like, e.g., just output that usually should be read from the top down. (I just refuse to use document.write and lead people into bad habits. :-) ). So your autoScroll: false and maximize options work perfectly for that. Hope to see a way from SE to use it soon!

Question 58

@canon: BTW, happy to pitch in if you ever want another pair of hands in there. Just say the word. You clearly don't need the help on a technical level, but everyone has time limitations.

Question 59

"Show console" (the label on the checkbox for enabling the feature as of the current UI; previously "include console") doesn't say much of anything. I suggest "Use in-snippet console" or similar, with one of those little (i) icons next to it with a fuller sentence.

Question 60

This makes a lot of sense, gonna spend a few working something more informative up. Thanks!

Question 61

Done and live in next build.

Question 62

@Haney: When does that build go live? And will it include a UI for the new options?

Question 63

This idea was recently raised as a standalone question.

Question 64

When throwing errors, it would be helpful to actually print the line that the error occurred on, especially as the line mentioned doesn't match up with the source code. Of course, it's good that it shows anything for errors.

console.log('console!!')
console.log([1,2,3])
console.log({i: 'think', this: 'is', cool: '!'})
console.log(console.log)
throw new Error('test')

Oriol Oriol 1,4237 silver badges16 bronze badges · Answer 1 · 2016-05-21 20:49:10Z

17

status-completed The console script has been moved to the head and now it waits until DOMContentLoaded, so console elements are inserted at the end of the body.

The console element should be inserted at the end of the body, just like the script one.

For example, the following code should log Hello! instead of <div class="as-console"></div>.

console.log(document.querySelector('div').innerHTML);

<div>Hello!</div>

It seems the problem is in content/Js/snippet-javascript.en.js

'writeResult': function () {
 var t = this,
 n = t._state.css,
 i = t._state.js,
 a = t._state.html,
 r = t._state.console;
 if ('' != n || '' != i || '' != a) {
 var o = '';
 null != p && (o = '//' + p),
 r === !0 && (a = '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>' + a);

The last assignment should be

a += '<script src="' + o + '/scripts/snippet-javascript-console.min.js"></script>'

Share

Improve this answer

edited May 24, 2016 at 17:31

answered May 21, 2016 at 20:49

Oriol's user avatar

Oriol Oriol

1,4237 silver badges16 bronze badges

8

Nice catch! ...

T.J. Crowder
– T.J. Crowder

05/22/2016 08:17:31
Commented May 22, 2016 at 8:17
Now that I think about it, querySelector is just the tip of the iceberg. Even if moved to the end, console elements will be affected by CSS and alter the length of querySelectorAll and getElementsByTagName collections. The proper way would be moving the user input inside an iframe, and place the console in the outer page.

Oriol
– Oriol

05/22/2016 18:31:25
Commented May 22, 2016 at 18:31
This is already creating problems

Oriol
– Oriol

05/22/2016 18:58:53
Commented May 22, 2016 at 18:58
@T.J.Crowder Read up on this and help getting this fixed ASAP

user255093
– user255093

05/22/2016 19:04:19
Commented May 22, 2016 at 19:04
1

I ran into it in a snippet just yesterday, as I was going to do an example with a series of divs and opened it with document.querySelectorAll("div"). Moving it to the end may help some, but then it'll get mixed with any dynamically-added content, and wouldn't have helped in my case yesterday. Having the console div in the same document at all is likely to be an ongoing issue. Think it needs to be moved to a frame.

T.J. Crowder
– T.J. Crowder

05/23/2016 06:33:09
Commented May 23, 2016 at 6:33
@canon Assuming the iframes have same domain, it would be something like contentIframe.contentWindow.console.log = function(){ ... }

Oriol
– Oriol

05/23/2016 16:20:41
Commented May 23, 2016 at 16:20
@canon I was thinking something like this. But inserting snippet contents at DOMContentLoaded would break snippets which use DOMContentLoaded.

Oriol
– Oriol

05/23/2016 16:55:43
Commented May 23, 2016 at 16:55
@canon: Thanks for the head's up. FYI: meta.stackexchange.com/questions/279420/…

T.J. Crowder
– T.J. Crowder

05/24/2016 13:39:53
Commented May 24, 2016 at 13:39

Add a comment |

Quill Quill 2,5181 gold badge22 silver badges35 bronze badges · Answer 2 · 2016-05-18 20:46:30Z

16

You cannot XSS using this method, however, the console breaks on HTML style formatting inside a log statement:

console.log("<script>alert('omg');</script>");

Share

Improve this answer

edited May 18, 2016 at 21:16

answered May 18, 2016 at 20:46

Quill's user avatar

Quill Quill

2,5181 gold badge22 silver badges35 bronze badges

4

3

@canon must be escaping thingy. <script></script> throws, but not <a></a>. <script></script\> doesn't throw.

Meta Andrew T.
– Meta Andrew T.

05/18/2016 21:08:21
Commented May 18, 2016 at 21:08
1

Keep in mind there's no huge risk here as-is. We'll get it fixed, but Stack Snippets are sandboxed and secured on a 3rd party domain. Nothing bad will come of anyone's best efforts here. :)

Haney
– Haney StaffMod

05/18/2016 21:14:24
Commented May 18, 2016 at 21:14
7

Instead of putting the code inside of a script tag, you could use src= with a data URL (without base64, if you get the encoding right) to avoid this issue. (cc @canon)

user1114
– user1114

05/18/2016 23:09:23
Commented May 18, 2016 at 23:09
3

Perhaps this is growing into a new feature request @canon <_<

Quill
– Quill

05/19/2016 04:44:43
Commented May 19, 2016 at 4:44

Add a comment |

score 11 · Answer 3 · 2016-05-18 21:34:09Z

11

status-completed The console now grows and shrinks with the available width. The box doesn't overflow any more.

The Stack Snippets console overflows on mobile devices if the viewport isn't wide enough.

This is actually just a small layout bug with a wonderful feature. (Thanks Haney!)

The post in the screenshot is this one.

Share

Improve this answer

edited Mar 20, 2017 at 10:31

Community's user avatar

Community Bot

1

answered May 18, 2016 at 21:34

Patrick Hofman's user avatar

Patrick Hofman Patrick Hofman

92.1k19 gold badges144 silver badges342 bronze badges

6

4

Fixed and live momentarily.

Haney
– Haney StaffMod

05/20/2016 19:13:02
Commented May 20, 2016 at 19:13
@Pat did you do that when viewing the full site theme, or mobile site theme?

user152859
– user152859

04/03/2017 09:53:31
Commented Apr 3, 2017 at 9:53
@ShadowWizard mobile view

Patrick Hofman
– Patrick Hofman

04/03/2017 09:54:49
Commented Apr 3, 2017 at 9:54
Oh. And now it still works for you?

user152859
– user152859

04/03/2017 09:55:41
Commented Apr 3, 2017 at 9:55
I can't run the snippet any more @Sha

Patrick Hofman
– Patrick Hofman

04/03/2017 09:57:00
Commented Apr 3, 2017 at 9:57
@Haney the snippets are not working anymore for mobile, is this on purpose?

user152859
– user152859

04/03/2017 09:57:33
Commented Apr 3, 2017 at 9:57

Add a comment |

T.J. Crowder T.J. Crowder 23.1k7 gold badges56 silver badges104 bronze badges · Answer 4 · 2016-05-19 07:03:40Z

status-completed (this is now implemented and live)

The virtual console currently implements log, info, warn, error, and clear, but many other console methods don't write to the virtual console (just the real one):

console.log("This uses the virtual console");
console.dir({o:"testing"}); // This doesn't
console.time("timed"); // This doesn't
console.timeEnd("timed"); // This doesn't

Aggregating data from several DSE queries (because of timeouts; links below), here are the number of questions and answers (combined) in which various console methods occur (roughly), looking only at the javascript and jquery tags:

console.log 287,489
console.error 4,291
console.dir 2,025
console.info 1,940
console.warn 979
console.time 431
console.timeEnd 407
console.clear 277
console.assert 155
console.dirxml 20
console.count 17

Based on that and level of difficulty, I suggest implementing:

dir as an alias for log initially, more can be done if appropriate but the distinction is more for interactive consoles.
time and timeEnd, as they're quite easy

It's clearly not feasible to expect that the virtual console will have a union of all of the features offered by Chrome, Firefox, IE, and others! But if it's going to be called console, I think to minimize surprise we need to ensure it implements the more commonly-used methods.

DSE query links:

@canon: Fantastic! Extremely good of you to take the time to enhance SE in this way. Any idea when they'll put that on the site?

Denys Séguret Denys Séguret 4,7531 gold badge22 silver badges28 bronze badges · Answer 5 · 2016-05-19 08:17:04Z

9

Is the date in the log really necessary ?

It doubles the height of a console line and we rarely wait more than 24 hours to see how our snippet behaves (when we do, we lose the fastest gun race and nobody sees our answer so the snippet doesn't really matter).

console.log("virtual!");
console.log("console!");

<b>Here's some HTML</b>

Share

Improve this answer

answered May 19, 2016 at 8:17

Denys Séguret's user avatar

Denys Séguret Denys Séguret

4,7531 gold badge22 silver badges28 bronze badges

6

4

Yeah, good point. I think I'll dump the date part this morning.

Haney
– Haney StaffMod

05/19/2016 13:55:39
Commented May 19, 2016 at 13:55
3

Going live in a few here.

Haney
– Haney StaffMod

05/19/2016 16:36:30
Commented May 19, 2016 at 16:36
@Haney much cleaner!

Denys Séguret
– Denys Séguret

05/19/2016 19:18:40
Commented May 19, 2016 at 19:18
@Haney: Nice one!

T.J. Crowder
– T.J. Crowder

05/20/2016 07:00:20
Commented May 20, 2016 at 7:00
TBH the time isn't probably useful either...

Denys Séguret
– Denys Séguret

05/20/2016 10:04:09
Commented May 20, 2016 at 10:04
4

Could be, for demonstrating how long something takes.

T.J. Crowder
– T.J. Crowder

05/20/2016 12:11:50
Commented May 20, 2016 at 12:11

Add a comment |

Oriol Oriol 1,4237 silver badges16 bronze badges · Answer 6 · 2016-05-23 12:12:05Z

Move the console outside the document.

Placing the console inside the document can produce lots of interferences. For example:

CSS selectors like div will select console elements
JS collections like document.querySelectorAll('div') will include console elements

I think the proper way would be:

Move the HTML, CSS and JS entered by the user inside an inner content iframe which occupies all the snippet iframe.
Place the console in the snippet iframe, outside the content iframe

This is how the console behaves in a browser. The content of a page can't interfere with the console.

Here's a simple example of how the console being in the same document is a problem:

console.log("This is...");
setTimeout(function() {
 var d = document.createElement('div');
 d.appendChild(document.createTextNode("...a problem"));
 document.body.appendChild(d);
}, 0);

div {
 position: relative !important;
}

<div>Hmmm</div>

Here's another example:

// Demonstration that `length` on the jQuery instance will be 0
// if there are no matching elements. There are no `div` elements
// in this snippet.
$(function() {
 console.log($("div").length);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

That demonstration should be logging 0, not 2. Moving the console out of the document entirely is the only way to prevent this kind of cross-talk between the console and the various different snippets people use to demonstrate things.

Thanks for reporting this bug. I have modified Stack Snippets to include the console in the <head> tag which alleviates DOM assumptions. This fix is now live.
@Haney Thanks, but that can't work directly. The console script appends some elements to document.body, so that will throw an error in the head. Better move the script to the end of the body, or use an event listener in the head.
It has been modified to use an event listener, not to worry!
@Haney: While moving the script is a start, the bigger problem is that the console adds elements to body, which interact with the snippet. Have to strongly disagree with the statement that the cost/benefit isn't there. Not only worth doing, but as Oriol points out, it needs doing soon. Here's an example of how it could work: output.jsbin.com/wicofa (Source: main page, console page, example snippet)
@Haney: Sorry, the first JSBin link above is to the wrong page. Here's the example: output.jsbin.com/himarux
@canon: Great! Can't imagine you need any help, but the offer's there if you like. I know I've said it before, but I'll just say it one last time: I really appreciate your work on this, and I know I'm not the only one who does. It's rubbish that the only reason this is moving forward is that you're doing the work, but it's really great you're doing the work and we're fortunate to have you doing it.

T.J. Crowder T.J. Crowder 23.1k7 gold badges56 silver badges104 bronze badges · Answer 7 · 2016-05-20 14:49:30Z

THIS IS NOW IMPLEMENTED IN THE SCRIPT (demo). Just waiting for SE to add a UI for it.

Could we add a flag saying that the console is the entire output? This would do two things:

Let the console fill the result area
Default to not scrolling to the end on ouput (leaving the scrolling up to the user)

In the javascript tag, I post a lot of answers where the console output is the only output of the snippet. In those snippets, all of the Result area other than the virtual console is just wasted space. So how 'bout a "console is result" or similar checkbox:

"console is result" option

The default would be off, of course.

Here's an example from this answer — here's the snippet currently in that answer, using my rubbish workaround snippets.js script:

var str = "j and j and j x";
snippet.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
 test(str, n);
}
function test(s, start) {
 var index = s.indexOf("j", start);
 snippet.log("Starting at " + start + ": " + index);
}

<!-- Script provides the `snippet` object, see https://meta.stackexchange.com/a/242144/134069 -->
<script src="//tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

And here it is with the lovely virtual console canon wrote for us:

var str = "j and j and j x";
console.log("Search string: '" + str + "'");
for (var n = 0; n < str.length; ++n) {
 test(str, n);
}
function test(s, start) {
 var index = s.indexOf("j", start);
 console.log("Starting at " + start + ": " + index);
}

As you can see, it shows the end of the output rather than the beginning, a lot more scrolling is required, and clicking the "Full page" link doesn't help.

i second that, but i would request a variable splitter, too, because the console output is fixed in size and it would be better if the size can be adjusted.
@NinaScholz: Thanks. I'd post the variable thing as a separate suggestion. This one is just a simple all-or-nothing.
I'd love to hear from the downvoters why they don't think this would be useful. I'd be using it every day, several times a day.
@canon: You rock. Yes, normal consoles scroll (well, most do) and we want what you originally did as the default, no question. But the use case for most of my answers is more document.write-like, e.g., just output that usually should be read from the top down. (I just refuse to use document.write and lead people into bad habits. :-) ). So your autoScroll: false and maximize options work perfectly for that. Hope to see a way from SE to use it soon!
@canon: BTW, happy to pitch in if you ever want another pair of hands in there. Just say the word. You clearly don't need the help on a technical level, but everyone has time limitations.

T.J. Crowder T.J. Crowder 23.1k7 gold badges56 silver badges104 bronze badges · Answer 8 · 2016-05-19 07:15:21Z

6

"Show console" (the label on the checkbox for enabling the feature as of the current UI; previously "include console") doesn't say much of anything. I suggest "Use in-snippet console" or similar, with one of those little (i) icons next to it with a fuller sentence.

Share

Improve this answer

edited Jun 23, 2016 at 7:43

answered May 19, 2016 at 7:15

T.J. Crowder's user avatar

T.J. Crowder T.J. Crowder

23.1k7 gold badges56 silver badges104 bronze badges

4

2

This makes a lot of sense, gonna spend a few working something more informative up. Thanks!

Haney
– Haney StaffMod

05/20/2016 15:29:44
Commented May 20, 2016 at 15:29
Done and live in next build.

Haney
– Haney StaffMod

05/20/2016 18:17:38
Commented May 20, 2016 at 18:17
@Haney: When does that build go live? And will it include a UI for the new options?

T.J. Crowder
– T.J. Crowder

05/28/2016 09:45:09
Commented May 28, 2016 at 9:45
This idea was recently raised as a standalone question.

LWC
– LWC

03/15/2017 18:58:46
Commented Mar 15, 2017 at 18:58

Add a comment |

Scimonster Scimonster 14.8k4 gold badges37 silver badges70 bronze badges · Answer 9 · 2016-05-18 20:09:30Z

4

When throwing errors, it would be helpful to actually print the line that the error occurred on, especially as the line mentioned doesn't match up with the source code. Of course, it's good that it shows anything for errors.

console.log('console!!')
console.log([1,2,3])
console.log({i: 'think', this: 'is', cool: '!'})
console.log(console.log)
throw new Error('test')

Share

Improve this answer

answered May 18, 2016 at 20:09

Scimonster's user avatar

Scimonster Scimonster

14.8k4 gold badges37 silver badges70 bronze badges

4

Not only JS-only, but for any error that comes from the JS code, if that's possible.

Scimonster
– Scimonster

05/18/2016 20:24:31
Commented May 18, 2016 at 20:24
Correct, but here at least we have some measure of control over what it shows. ;)

Scimonster
– Scimonster

05/18/2016 20:32:34
Commented May 18, 2016 at 20:32
Or instead of adjusting the line number, just give the line of code the error occurred on, as i actually wrote in the answer.

Scimonster
– Scimonster

05/18/2016 20:33:37
Commented May 18, 2016 at 20:33
This needs more upvotes. :-)

T.J. Crowder
– T.J. Crowder

05/20/2016 16:42:49
Commented May 20, 2016 at 16:42

Add a comment |

Oriol Oriol 1,4237 silver badges16 bronze badges · Answer 10 · 2016-05-22 19:10:33Z

Do not include the console by default, at least until it has been stabilized.

Including the console has collateral effects like Bug in stack snippet?.

People which creates snippets may not realize that this is a bug which (hopefully) will be fixed. So they might rely on the buggy behavior.

Then, once the fix lands, these snippets will break.

Not including the console by default would alleviate this possibility. Moreover, even if the console will be useful to lots of snippets, I think they are still a minority.

Only once the console has been stabilized, it might be considered to enable it by default.

Thanks for reporting this bug. I have modified Stack Snippets to include the console in the <head> tag which alleviates DOM assumptions. This fix is now live.

T.J. Crowder T.J. Crowder 23.1k7 gold badges56 silver badges104 bronze badges · Answer 11 · 2016-06-06 13:21:48Z

I can't put a bounty on this answer, so I've raised a formal feature-request instead. If you want this done, please go upvote and or bounty as appropriate.

~~(削除) @canon has implemented several useful options in the script (there's a demo here). Please add a UI for them so people don't start using console.config directly.~~

I'd suggest making it a Console Options button or some such that shows options driven by the script itself, so that when an option is added to the script, the UI for it can be added at the same time. The options would be serialized to JSON and inserted in the stack snippet's introductory comment node.

For instance, where a snippet might currently start with this:

<!-- begin snippet: js hide: false console: true -->

If the user uses the dialog to set options, it might look like this:

<!-- begin snippet: js hide: false console: true console-options: {"maximize":true,"autoScroll":false} -->

Those options get converted into a hidden call to console.config at the beginning of the snippet script.

(削除ここまで)

Nisarg Shah Nisarg Shah 4792 silver badges8 bronze badges · Answer 12 · 2017-10-11 18:25:15Z

Logging events directly to the console causes the browser to whirrr for a couple of seconds (probably trying to stringify the whole subtree), and throw some errors (in the same console).

Also, it takes a lot longer than necessary to execute the console.log statement (due to the entire stringification process I guess.)

It currently takes roughly 2-3 seconds for me in Chrome 61. Here's how it looks in the browser console:

image

function clicked(event) {
 var startTime = new Date();
 console.log(event);
 var endTime = new Date();
 
 console.log("Total time (ms): " + (endTime - startTime));
}

<button onclick="clicked(event)">Click me</button>

Almost 16 seconds for me

Andrew Myers
– Andrew Myers

04/10/2018 13:18:34
Commented Apr 10, 2018 at 13:18

Stack Exchange Network

Stack Snippets Upgrade: Virtual Console

12 Answers 12

You must log in to answer this question.

Linked

Hot Network Questions

Stack Snippets Upgrade: Virtual Console

12 Answers 12

You must log in to answer this question.

Linked

Related

Hot Network Questions