Introduction

In the last chapter, we wrote our first JavaScript code in the two places to write JavaScript for a webpage — namely inside <script> and a separate .js file.

This is paramount to know — after all how can we even begin to learn a programming language without ever knowing where to write and execute it.

Now in this chapter, we are to cover another paramount concept every JavaScript developer must know. That is the developer's console.

Specifically, we'll see what is the console; how to use it to debug scripts; what conventions would we follow in this course while giving console snippets and much much more.

Let's begin!

What is the console?

Every major web browser, including Chrome, Safari, Firefox, Edge, Opera, provides a tool to help developers inspect and test JavaScript code.

That tool is commonly called the developer's console, or simply as the console.

The console is a tool to inspect JavaScript code.

It's not something made for the real pros and geeks out there. Anyone, even beginners, could work with the console.

In fact, the simplest place for beginners to test simple statements in JavaScript is the console!

Let's see how to access the console and work with it in different browsers.

Accessing the console

In this section, we address how to access the console in major browsers on Windows OS. For Mac, the workflow is pretty much the same.

Google Chrome

Let's start with the mostly used web browser i.e. Google Chrome.

  1. For access via keystrokes, press Ctrl + Shift + J to directly open the console.
  2. For manual access, click on the icon on the top-right side of the browser. From the drop-down, navigate to More Tools and finally to Developer Tools. From here, select the Console panel to open up the console. If it's preselected, amazing — you won't have to do any selections.

What opens up is the console window. We'll explore the interface here later on...

Console window for Google Chrome.

Microsoft Edge

Now for Microsoft Edge.

  1. To open up the console directly using the keyboard, follow the same keystrokes you did above for Google Chrome i.e. Ctrl + Shift + J.
  2. Otherwise, head over to the icon on the top-right side of the browser and from there go to More Tools and then to Developer Tools. In the window that opens, click on the Console panel to open up the console.

Mozilla Firefox

Time for Mozilla's Firefox browser.

  1. Press Ctrl + Shift + K to directly open up the Web console in Firefox.
  2. Otherwise, click on the menu icon at the top-right corner of the browser and from there navigate to Web Developer and then Web Developer Tools. Here, on the top-most list of panels, click on the Console panel to go to the web console.
In Firefox, there is something called the Browser Console. We're not interested in that for our course since it's a console for the whole browser — not just a single tab. It's accessible using Ctrl + Shift + J.

Opera

  1. The keystorkes shortcuts are the same as Google Chrome.
  2. For the manual work, right-click anywhere on the given webpage and click on Inspect Element. In the window that opens up, click on the Console tab to go to the console.

Perfect!

Now with the fact clear as to what is the console and how to access it in major browsers, it's finally time to write something in it.

Working in the console

The console is a REPL environment.

REPL stands for Read-Evaluate-Print-Loop. It simply refers to any program that continuously asks the user to input stuff, then evaluates it and finally prints the result out on the screen.

As soon as you open the console, you'd notice a blinking cursor indicating that you could enter anything in here. As soon you do so, and press the Enter key, the browser automatically parses and executes the code entered and then outputs back the value returned by it.

Let's perform a simple addition:

Chrome's console snapshot.

5+5 is a numeric expression, since it involves numbers. Specifically, it represents an addition. The + symbol is called the addition operator. It adds both the numbers given on either side, and returns back the result.

Guess what — we can perform other common arithmetic operations in JavaScript as well such as subtraction, multiplication and division.

Subtraction is done by the symbol -, multiplication is done by * (in contrast to x which we use in maths), and division is done by / (in contrast to ÷ which we use in maths).

Consider the illustration below:

Common arithmetic operations in the console.

In the first statement, we subtract 50 from 60 to give 10. In the next one, we multiply 10 and 20 together to give 200. Lastly, we divide 50 by 2 to give 25.

Simple. Wasn't this?

Convention in this course

In the coming chapters, we'll use the console heavily to test simple pieces of JavaScript code.

Testing small statements on separate HTML pages is redundant and time-consuming. In contrast, the console can be opened up for any webpage — even a browser's home page — and used to inspect the statements in situ.

There's just no need to worry about creating HTML files, then some <script> tags and so on!

Now wherever we'll use the console in the coming chapters, instead of capturing a screenshot of the respective snippets in an actual browser console and showing them, we'll show a custom snippet.

Let's take the example of the arithmetic expressions we computed above:

60-50
10
10*20
200
50/2
25

The << symbol denotes an input statement. The stuff after the input statement represents its return value. This is given without any symbol at the beginning.

In this case, the input statements are 60-50, 10*20 and 50/2, while their return values are 10, 200 and 25, respectively.

At this beginning stage, we'll be able to represent most of the outputs precisely as they are shown in the actual console window of a browser.

However, once we move on to explore detailed concepts in this course, it would become near impossible to display the output exactly in the way it's done in the browser's console.

Just to give an example at this point, consider the Document.prototype object. Go on and type this in the console, and notice what gets returned.

Inspecting an object in the console.

You'll get an object returned. Simple!

However, the most interesting part which we can't truly replicate in our custom console snippets is the feature of live-insepcting the object by pressing the small     arrow next to it.

Pressing the arrow opens up a list of all properties and methods on the given object — Document.prototype in this case.

List of properties and methods shown for a given object in the console.

Try to find write() in here. This is the same write() you used in the previous chapter. We'll see how is this so, when we study JavaScript Object Prototypes.

This live view feature and many other features native to a browser's console are difficult to set up on a webpage, all manually.

Likewise, when working with objects or in general when some special feature of the browser's console is desired, you're encouraged to open up the console and perform the inspection live.

The console is an important tool for beginners — in fact, even for the pros — to debug scripts. So don't hesitate to visit it and test a couple pieces of code every now and then. It'll help you a lot in learning the true essence of given concepts, yet very quickly.

Logging using console.log()

In the last chapter, we saw the write() method on the document object and how it served to display a given piece of text out on the webpage.

There is a similarly-functioning method for the console. It outputs stuff on the console.

The method is available on the console object (just as write() is available on the document object).

It's called log().

The method gets its name from the fact that it makes a log to the console. A log simply refers to a message — in this case showed on the console.

Fully log() would be expressed as console.log() — the method is available on console, so it's a must to include this object before referring to log().

Consider the code below:

console.log('Hello World!');

Here we've just shown the script, not the HTML markup where it is used.

Recall that we stated in the last chapter that we wouldn't be showing the markup for every single script in the upcoming chapter — doing so helps keep focus right on the script.

Anyways, so this code displays the text 'Hello World' in the console.

The following snippet illustrates this:

Hello World

When writing anything in the console directly, such as the expression 5 + 5 we wrote earlier, the return value is output automatically. That is, there is no need to call console.log() manually to dispaly the returned value.

However, it's not unvalid to do so. After all, console.log() is also valid JavaScript code and could likewise be entered in the console.

Consider the following snippet:

console.log(5+5)
10
undefined

We input the statement console.log(5+5). This logs 10 (the sum of 5 and 5) in the console. After this, execution of the statement completes and finally it returns a value.

As stated before, the return value of an input statement is automatically displayed by the browser on the console. In this case, we see undefined displayed.

This is because console.log() returns the special value undefined which is literally displayed as 'undefined' in the console.

We'll see more details to undefined in the JavaScript Data Types chapter.