Freecodecamp: FCC's built-in console doesn't show console.log() output (Chrome)

Created on 29 Sep 2016  路  11Comments  路  Source: freeCodeCamp/freeCodeCamp

User Agent is: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36.

The text in the FCC pseudo-console gives the impression that console.log() outputs will appear there.

/**
  * Your output will go here.
  * Any console.log() -type
  * statements will appear in
  * your browser's DevTools
  * JavaScript console as well.
  */

I thought that the last FCC update added this feature but in Chrome 53.0.2785.116 on Windows, the browser console is still the only way to see console.log() output. I discovered this because students in the chat were confused. If the FCC console is working as intended, I believe that the text should be clarified.

image

discussing

Most helpful comment

@karuppiah7890 My suggestion is that if this is the intended behavior (as your comment indicates), then the text

/**
  * Your output will go here.
  * Any console.log() -type
  * statements will appear in
  * your browser's DevTools
  * JavaScript console as well.
  */

should probably be changed. Saying that the statements will appear in the DevTools console "as well" is giving the impression that the statements can be seen in _both places_.

All 11 comments

Hey there. The console.log() statements will not show up in the output window ("FCC pseudo-console" in your words). Only the selected data shows up in the output windows, usually the return values of the functions (whose empty body is provided in the challenge) which are tested.

And generally the return value of the top-most function is displayed in the browser. There are challenges that do not have a function wrapping them, so the term "output" is used.

I have confirmed the above info from the FCC Contributors gitter chat room. You can join there and ask questions if you have any further doubts.

Also fwiw, the console.log statements do show up in the browser Dev Tools and I think it's worth pointing campers there so they learn those tools as a side-effect.

@karuppiah7890 My suggestion is that if this is the intended behavior (as your comment indicates), then the text

/**
  * Your output will go here.
  * Any console.log() -type
  * statements will appear in
  * your browser's DevTools
  * JavaScript console as well.
  */

should probably be changed. Saying that the statements will appear in the DevTools console "as well" is giving the impression that the statements can be seen in _both places_.

@ArielLeslie I completely agree. I think it should be done. @dhcodes Your comments on this ?

I agree with the change

In /client/commonFramework/output-display.js
AND
FreeCodeCamp/common/app/routes/challenges/redux/reducer.js,
remove as well from:

/**
  * Your output will go here.
  * Any console.log() -type
  * statements will appear in
  * your browser's DevTools
  * JavaScript console as well.
  */

This is the current behavior with React.

@BerkeleyTrue you mean with React, it will show up in both the output box and the devtools console?

@dhcodes Yes, console.logs from will show up in the output window.

We run two different processes for each challenge, the main process that generates the output and the preview, and the test process, which will iterate through the tests.

The first process will actually proxy the calls to console.log so that it shows up in the output window.
The second will not and these will show up in the dev tools console.

Sounds good. Let's close this then since it will be fixed by the React update?

I completely agree, though I think console.log(), console.warn(), and console.err() should be added. It would be as easy as making wrappers for each to change the innerHTML of whatever id displays output.

Was this page helpful?
0 / 5 - 0 ratings