How can we see the JavaScript results as we do the challenges in the console?

freeCodeCamp Support
1

I understand console.log() displays the results in the console, but is there a way to show our JS outputs while doing challenges BESIDES using our browser’s console and copy and pasting code?

It would be helpful to see the results as we type it

2

if you have written the code in the editor pane of the lesson, than any console.log(...) statements in your code will display in the console. So long as your console is open, you will see the results there.

I will often comment my code just before the console.log(...) with some notes on what the expected behavior of that log should be. If the results don’t match what I expect, either my code is off or my thinking is off.

Again, any console.log(...) statements in your code in the editor pane of the lessons will show up in the developer tools. They won’t show up in the FCC console, but they will show up in the developer tools!

Also worth noting: console.log(...) is not your only console option. There’s also console.error(...), console.warn(...) and console.info(...), to name a few. It is often handy, as you get further along in your developing, to use different ones for different situations. For example, suppose you are getting results from an API, and the result comes back unreadable. That might be a place where console.error(...) is handy, as it might represent an unrecoverable error.

3

Thank you. So just wrap the entire code in console.log() to view? I am a little confused how this is possible within the website (and not by copying code into your browser’s console). I tried wrapping everything in console.log( ______ ) and it doesn’t show up properly:

ex:
console.log( // Example

var ourArray = [“John”, 23];

// Only change code below this line.

var myArray = [];

)

Any help is appreciated!

4

You need to use console.log() on those things for which you want to see the value

// Example

var ourArray = [“John”, 23];
console.log(ourArray);

// Only change code below this line.

var myArray = [];
console.log(myArray);

You seem to be wishing for something not really possible in general, but only if you use the right tools

For example you may appreciate this:
http://pythontutor.com/javascript.html

5

Thanks for clarifying- So I have to do this every time (There is no setting or easier way to make the console values appear as I do the challenges)?

6

The console values are what you put inside console.log(), they don’t appear if you don’t use console.log()

7

The console is there largely for convenience. It is an easy way to run and test code, yes. Some neat things you can do, you can inject jQuery into a page and use it (until you reload) as though it were a part of the page. You can build an HTML/CSS page, then use the console to toggle off CSS to see what happens. You can do all sorts of neat things with the console.

But, when you are running your javascript, whether in a code editor window (like on FCC or codePen or jsFiddle or whatever) or on an actual page, you only see in the console what you explicitly send to the console.

I will often use console.log when I’m trying out something I don’t understand, or when there’s a challenge that has me hung up. And you can log pretty much wherever. Here’s an example:

function showNames(arrayOfNames){
  //Maybe I want to see something about that array in the console
  console.log("Array passed into function is "+arrayOfNames.length+" names long.");

  for (let i = 0; i<arrayOfNames.length; i++){
    // let's create an output string.
    let myNameString = "Member: "+arrayOfNames[i] +".";

    // We can use that output string in a console, along with any other variables we want. 
    console.log("Array index "+ i +" contains "+myNameString);

    // and maybe a really ugly output or something. It won't do what I want, but 
    let myNameEl = document.createElement("span");
    myNameEl.textContent = myNameString;
    document.querySelector("#nameContainerEl").appendChild(myNameEl);

    // and maybe we want to see what is actually in that element in the console:
    console.log(document.querySelector("#nameContainerEl").innerHtml );

  } // end of the for loop
}  // end of the function

Now note: each time I wanted to see the current value of something, I had to explicitly send it to the console. This is very powerful for debugging purposes. There are some advanced tricks you can use (for example, how not to have to delete your debugging lines from your code, but simply have them silently get mis-directed from the production version).

There are some caveats: when you output an array and its values are changing, the console.log will show you the latest. it will go back and edit earlier copies of that same array in the display, so you won’t see incremental changes to an array if your output the entire array as @ILM suggests. In that case, you have to cheat a little: make a clone of the array. That makes the element a new array, just for the purpose of display, so it won’t update. To do that, you would do the following:

function logAllNames(arrayOfNames){
  /****
    * Here, we want to make a copy of the array. We can do this a number of ways. The first I learned
    *    was to use JSON to convert it to a string, then back to an array:
    ****/
  let myNewArray = JSON.parse( JSON.stringify(arrayOfNames) );

  /****
   * But we also have the ability to simply clone the array with other methods, like:
   * let myNewArray = [...arrayOfNames];
   *
   * The above line uses the spread operator to turn the array into a bunch of separate values,
   *  but we then wrap it in square brackets, making it a new array.
   ****/

  // This is a copy of the array, so it won't update as the values in the array change.
  console.log(myNewArray);
}

That last was some advanced magic. Sorry, couldn’t resist. But later, when you output arrays, remember that trick. If not, you won’t see what you expect to see.