JavaScript help - how to 'observe & test' code

It seems that I’m forever stuck / lost when I try to ‘test’ my code using Chrome’s console to run through it.

Here’s what generally happens:
*When I ‘test’ my code, more often than not the console throws syntax or reference errors, so I know I’m doing it wrong but I don’t know how to fix it.
*Where do you place console.log code and what do you put inside the parentheses? // I’m sorry I know this sounds really stupid…believe me, that’s how I feel – but for whatever reason, I’m lousy at it and need help.

Could someone please explain to me like I’m a 3-year-old (or maybe more like a 1-year-old) how to use the console to test code?

Also could someone kindly share a really basic, beginner-level lesson on how to use the console (maybe more like how to use console.log) to effectively observe and test JS code? Preferably using layman’s terms?

Are there JavaScript tutors? Where do I find them?

It’s difficult to give you concrete examples, without an example program which needs some console.log statements adding for debugging.

Generally speaking, though, I will output to the console in the following places/ways to help me observe program flow:

  • On the first line of a function; e.g. console.log("Now entering thisDoesSomething()");

  • Before any conditional branches, to see the state of the relevant variables; e.g. console.log("Value of conditionalTest is " + conditionalTest);

  • Inside of a conditional branch, to track which one is executing; e.g. console.log("conditionalTest was true; executing branch...");

  • Monitoring iterations, like in loops; e.g. console.log(for loop, iteration: " + counter);

Those are some examples.

Essentially, any place where you might need to “check the code is doing what you expect” would be somewhere to log to the console.

1 Like

@thepitycoder thank you so much for the examples.

I tried running these, just as some examples taken from a recent Codecademy exercise.

let newObj = {};
console.log(‘what is ’ + newObj ’ ?’);

VM63:2 Uncaught SyntaxError: missing ) after argument list

console.log('key & value before are ’ key + value);
let temp = key;
let key = value;
let value = key;

VM84:1 Uncaught SyntaxError: missing ) after argument list

let temp = key;
let key = value;
let value = key;
console.log('key & value after are ’ key + value);

VM94:4 Uncaught SyntaxError: missing ) after argument list

Again, I don’t think I understand how to use the console.log() method to test code. Just to reiterate…

I will keep trying and hope to figure this out.

All three of these have the same syntax error. You may want to review concatenation. If you want to print a series of values, you have to tell the computer how to do it. Text that you include between quotes is a string literal. If you want to print a string literal along with the value assigned to a variable, you have several options, but the option you are trying to use above is concatenation using the + operator. Below are working versions of the examples you provided. Take careful notice of the differences.

console.log('what is ' + newObj + '?');

console.log('key & value before are ' + key + ' ' + value); //added a space between the two variables as well (Note: if key and value both happened to be numbers, + would add them together)

console.log('key & value after are ' + key + ' ' + value);

Many people, myself included, prefer to use string interpolation. The following will produce the same output as the examples above.

console.log(`what is ${newObj}?`);

console.log(`key & value before are ${key} ${value}`);

console.log(`key & value after are ${key} ${value}`);
2 Likes

Duly noted. Thanks for these pointers. Quite practical!

1 Like

As do I, however the Markdown prevented me from writing the examples that way and keep them inline… :sweat_smile:

2 Likes