Browser Console for understanding Javascript

The Problem

In the last lesson, we learned how to perform a simple Javascript task on our computer.

We created all the necessary files, put some code in them, and finally previewed the index.html in the browser.

This setup is a good thing if we are building a project.

But this kind of setup will soon become counter-productive if you just want to do some quick testing or experimentation with Javascript.

This applies to you, especially if you are a beginner trying to learn Javascript.

The thing is, you are just getting started to understand the concepts of Javascript and programming.

So, you need to quickly try out the concepts just to know how they work.

This gives you a better understanding almost immediately.

So, what if there is a way for you to execute Javascript code without any setup?

And indeed, there is a way.

No, I am not talking about coding environments like Codepen or Plunkr. They involve some setup, too.

I am talking about executing Javascript real-fast with instant feedback.

The Solution

The Console from the browser.

The Console will help you execute Javascript one line at a time, and it provides immediate feedback about what that line of code does.

The "Immediate Feedback" feature is what we are interested in when it comes to learning the features of Javascript.

So, we will be using this feature to the best of our abilities.

Now that we understand the power of the Console, let's see how you can use it.

How to open up and use the Console

How to open up the Console

To open up the Console, we first have to open a web page.

The Console is only accessible through a web page.

Technically, any web page is just fine, but it is not a good idea to visit some random website on the internet and execute Javascript on it (even if it is not harmful).

And here is a little secret about Chrome or Firefox.

Every time you open up a new tab in Chrome or Firefox, you are opening up their default web page.

You don't even have to enter any URL, and the Console works because the default web page is just a web page at the end of the day.

So, On Chrome or Firefox, open up a new tab.

Right-click somewhere on the default web page and click "Inspect".

Doing that will open up the Developer Tools, and you'll find the "Console" tab inside it.

You can speed up this process by directly opening up the Console using keyboard shortcuts too:

For Chrome and Firefox:

cmd + shift + j on Mac

ctrl + shift + j on Windows.

How to use the Console

Using the Console is pretty easy.

You can start writing the code as soon as you open it up.

There is only one catch.

After writing a line of code, when you hit enter on your keyboard, the Console immediately executes the code and provides feedback.

By default, it doesn't wait for you to write the second line of code.

So, the Console is nothing like a Code Editor

Not only that, it doesn't save your code.

When you refresh the browser, the code you have written in the console will be gone forever. You can not restore it.

So, just use it for some quick testing.

The Console is much more powerful

So far, I have only shown you the basic usage of the Console.

But you can do a lot more powerful things with it.

For now, this is all you need to know to start learning Javascript in a much more understandable way.

We will learn the true capabilities of the Console in a future module :)

In the next lesson, we will learn true Javascript, starting with the basic building blocks.

So, I will see you in the next lesson.