How to Use the JavaScript Developer Console - dummies

How to Use the JavaScript Developer Console

By Chris Minnick, Eva Holland

Sometimes, it’s helpful to be able to run JavaScript commands without creating an HTML page and including separate scripts or creating <script> blocks. For these times, you can use the Chrome browser’s JavaScript Console.

To access the JavaScript Console, find the Chrome menu in the upper-right corner of your browser. It looks like three horizontal lines. Click the Chrome menu and then find More Tools in the drop-down menu. Under More Tools, choose JavaScript Console from the drop-down menu.

And, yes, there is a faster way to open the JavaScript Console. Simply press Alt+Command+J (on Mac) or Control+Shift+J (on Windows).

JavaScript Console in the Chrome browser.
JavaScript Console in the Chrome browser.

The JavaScript Console is perhaps the best friend of the JavaScript developer. Besides allowing you to test and run JavaScript code quickly and easily, it also is where errors in your code are reported, and it has features that will help you track down and solve problems with your code.

Once you’ve opened the JavaScript console, you can start inputting commands into it, which will run as soon as you press Enter. To try it out, open the JavaScript console and then type the following commands, pressing Enter after each one:

1080/33
40 + 2
40 * 34
100%3
34++
34--

Commenting your code

As you learn more JavaScript commands and start to write larger programs, it’s often helpful to be able to leave yourself little reminders of what you were thinking or what certain things do. In programmer-speak, these tiny notes are called (or to anyone else who may work with your code) comments. The process of writing these notes is called commenting.

The JavaScript engine completely ignores comments. They are there just for people. This is your time to explain things, clarify things, describe your thinking, or even leave reminders to yourself about things you want to do in the future.

It is always a good idea to comment your code. Even if you think that your code is pretty self-explanatory at the time that you write it, you won’t think that eight months down the road when you need to modify it.

JavaScript gives you two ways to denote something as a comment:

  • The single-line comment

  • The multi-line comment

Single-line comments

Single-line comments start with //. Everything after these two slashes and up until the end of the line will be ignored by the JavaScript parser.

Single-line comments don’t need to start at the beginning of a line. It’s quite common to see a single-line comment used on the same line as a piece of code that is not commented, in order to explain what that line means. For example:

pizzas = pizza + 1; // add one more pizza

Multi-line comments

Multi-line comments start with /* and tell the JavaScript parser to ignore everything up to */. Multi-line comments are useful for more extensive documentation of code. For example:

/* The countToTen function does the following things:
 * Initializes a variable called count
 * Starts a loop by checking the value of count to make sure it’s less than 10
 * Adds 1 to the value of count
 * Appends the the current value of count, followed by a line break, to the paragraph with id=‘theCount’
 * Starts the loop over
*/

Using comments to prevent code execution

Besides being useful for documenting code, comments are often useful for isolating pieces of code in order to find problems. For example, if you wanted to see what the countToTen function would do if you removed the line from the loop that increments the value of count, you could comment out that line using a single-line comment, like this:

function countToTen(){
 var count = 0;
 while (count < 10) {
 // count++;
 document.getElementById(“theCount”).innerHTML +=
count + “<br>“;
 }
}

When you run this program, the line count++; will no longer run, and the program will print out 0s forever (or until you close the browser window).

This is called an infinite loop. If you do run a modified version of this program, it won’t do any harm to your computer, but it will likely take your CPU for a wild ride of spinning in circles as fast as it can until you shut down the browser window in which you opened it in.