<script> and a separate
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.
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.
What is the console?
That tool is commonly called the developer's console, or simply as the console.
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 browsers on Windows OS. For Mac, the workflow is pretty much the same.
Let's start with the mostly used web browser i.e. Google Chrome.
- For access via keystrokes, press
Ctrl + Shift + Jto directly open the console.
- 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...
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.
Ctrl + Shift + Kto 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 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.
Ctrl + Shift + J.
- The keystorkes shortcuts are the same as Google Chrome.
- 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.
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:
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. 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.
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:
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
Simple. Wasn't this?
Convention 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 used to inspect the statements in situ.
There's just no need to worry about creating separate HTML files, then some
<script> tags and then put the code, to be tested, within them. It's just as simple as opening up a new tab and then opening up the console window — that's 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 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.
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.
Try to find
write() in here. This is the same
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 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.
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, very quickly.
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
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.
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
Consider the code below:
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:
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,
Consider the following snippet:
We input the statement
console.log(5+5). This logs
10 (the sum of
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
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