So let's get learning!
What is the console?
That tool is commonly referred to as the developer's console, or simply the console.
Here's how the console looks in Google Chrome:
Let's see how to access the console in different browsers.
Accessing the console
In this section, we address how to access the console in major web browsers on Windows OS. For Mac, the workflow is pretty much the same.
Let's start with the most used web browser, i.e. Google Chrome:
- The keyboard shortcut for opening the console directly is Ctrl + Shift + J.
- 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.
Now for Microsoft Edge:
- To open up the console directly using the keyboard, follow the same keystrokes you did above for Google Chrome, i.e. Ctrl + Shift + J.
- 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.
Time for Mozilla's Firefox browser:
- Press Ctrl + Shift + K to directly open up the Web Console in Firefox.
- Otherwise, click on the menu icon at the top-right corner of the browser and from there navigate to More Tools and then to Web Developer Tools. In here, from the top-most list of panel names, click on Console to open up the web console.
- The keyboard shortcuts are the same as those on Google Chrome.
- For the manual work, right-click anywhere on the given webpage and then choose the Inspect Element option from the context menu. In the window that opens up, click on the Console tab to go to the console.
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.
The program is literally in a loop to read data (which is code in this case), then evaluate it, and then finally display its output. Hence the name.
As soon as you open the console, you'd notice a blinking cursor indicating that you could enter anything in there. And when you do so, and then press Enter, the browser automatically parses and executes the code entered and then outputs back the value returned by it.
Let's perform a simple addition:
5+5 and then press the
Enter key. The result is
10 which you can probably guess represents what.
5+5 is a numeric expression, since it involves numbers.
More specifically, it represents the addition operation. The
+ symbol is called the addition operator. It adds both the numbers given to it, and returns back the result.
Subtraction is done using the symbol
-, multiplication is done using
* (in contrast to
x which we use in maths), and division is done using
/ (in contrast to
÷ which we sometimes use in maths).
Consider the illustration below:
In the first statement, we subtract
60 to give
10. In the next one, we multiply
20 together to give
200. Lastly, we divide
2 to give
Just open up the browser, then the console, write a statement, press Enter, and voila — you have the result in front of you!
Console snippets in this course
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 thereafter used to inspect the statements in situ.
There's just no need to worry about creating separate HTML files, then some
<script> tags, then putting the code between the tags before it could finally be run. And that's quite amazing, isn't it?
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.
We'll show it as follows:
>> symbol denotes an input prompt, i.e. it means that we could enter some code to be executed. The code is evaluated and its return value is printed back to the console. In our snippet, this is given without any symbol at the beginning.
In this case, the input statements are
50/2, while their return values are
At this beginning stage, we'll be able to represent most, if not all, of the console outputs precisely as they are shown in the actual console 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.
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-inspecting 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.
Try to find
write() in here. This is the same
write() method that you used, on the
Anyways, this live-view feature and many other features native to a browser's console are difficult to set up manually in our custom console snippets.
Likewise, when working with objects in the console or, in general, when some special feature of the console is desired, you're encouraged to open up the brower's console and perform the inspection live.
Do you recall
document.write() from the previous chapter? You learnt that
write() is a method of the
document object and that it serves to display a given piece of text out on the webpage.
Now just as there is a way to display stuff on the webpage, there is a way to do so on the console as well.
And that's via
console object and its
One of these, and perhaps the most used one, is the
log() method (like the
write() method of
document). It serves to output stuff to the console. And whatever we wish to output, it's provided between the parentheses (
()), just as in
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 displayed on the console.
Let's try calling
Here we try to log the text 'Hello World!' to the console using the string
'Hello World!'. (Recall strings from the previous chapter?)
When we run this, here's what gets displayed in the console:
When we write anything in the console directly, such as the expression
5+5 we saw above, it is evaluated and then the return value output automatically to the console on the next line. That is, there is no need to call
console.log() manually to display the returned value.
However, it's not invalid to do so. After all,
Consider the following console snippet:
We input the statement
console.log(5+5). This logs
10 (the sum of
5) in the console just as we expect. However, there is another weird output after it.
So where does that come from?
As stated before, the console evaluates a given statement and then outputs back its return value, whatever that is.
When it evaluates
console.log(5+5), it executes the code written inside the
log() method. This execution, of
console.log(5+5) itself, causes
10 to be logged in the console. Once the log is made, the
log() method exits. After it exits, the console gets done evaluating
console.log(5+5) and obtains its return value.
And the return value of
console.log() turns out to be
undefined (actually this return value comes from the return value of
undefined gets displayed literally as 'undefined' in the console.
In the coming chapters, we'll explore
undefined in fine detail and see what does it mean when a given method returns
undefined. We'll also explore methods in detail and see what exactly is the purpose of these return values.