1214400 - Returned values and console.log messages appear out of order

Status: RESOLVED DUPLICATE of bug 1044365

(DevTools :: Console, defect)

Description

[Dan Callahan [:callahad]]

STR:

1. Open Console
2. Paste the following: function x() { console.log("Foo"); return "Bar" }
3. Run x();

The console should show:

    » x()
      Foo
    ← "Bar"

The console actually shows:

    » x()
    ← "Bar"
      Foo

This makes it look like somehow the function returned, and *then* the console.log fired. While usually not a problem with small, synchronous examples, this is *maddening* when trying to teach how generators work, since it makes it look like the function keeps running after yielding.

Safari, Chrome, Opera, and IE/Edge all follow the expected behavior.

Comment 1

[Brian Grinstead [:bgrins]]

This behavior is controlled by _outputAfterNode / afterMessage:

https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/console-output.js#947
https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/webconsole.js#3322

In short, we are intentionally putting the result of an execution after the input.  This is illustrated clearly if you run this code:

function x() {
  console.log("Foo");
  debugger;
  return "Bar";
}

x();

Notice that "Foo" shows up while you are paused at the debugger, but once you resume execution, bar shows up above foo.  I'm not convinced this is good behavior though as you mention in the report.  And we should probably get rid of that feature and optionally somehow link the two together visually.  Like if you hover the 'output' node maybe the 'input' node could be highlighted too.

Comment 2

[Brian Grinstead [:bgrins]]

This was fixed by Bug 1044365