JavaScript

JavaScript Lesson 1: Introduction to Google Chrome Developer tool for JavaScript.

This knowledge bit is going to be the quick overview of how we can use Chrome Developer tool for JavaScript. So with this knowledge bit, we are going to learn how we can access to the developer tool and we are going to debug simple JavaScript code.

So chrome developer tool is built-in tools in Google Chrome browser. This tool helps us to detect issues in our code quickly to build website faster. This tool gives a rich feature, fast and stable experience to end user.

Google Chrome Developer tool for JavaScript

Throughout this knowledge bit, we are using Google Chrome version Version 64.0.3282, and screenshot taken using the same version of the browser so there might be slightly different in your browser.

Accessing the Console

There are many ways that you can access Chrome Browser developer tools, the simplest one is that you can launch your tool by shortcut. So first thing you have to do to access your chrome console tool is open your chrome browser and press shortcut Ctrl + Shift + I combined, this shortcut will only work for Windows users. If you are using Mac you can write shortcut in your Google Chrome browser Alt + Command + I to access Chrome Console.

Chrome Developer tool for JavaScript

There is another way to access your Google chrome JavaScript console tool go and right-clicking anywhere on any webpage and then select ‘Inspect Element’ in the menu.

Access Chrome Developer tool for JavaScript

So once you opened you console you easily switch your panel to console by just clicking on console tab.

Chrome Developer tool for JavaScript console

 

So finally you have got your Google Chrome Developer Console open. You can open your console as a four different way like you can open as a right left and bottom drawer and you can also open developer tool as a separate window.

So if you want to open your console as a bottom drawer just simply click on ‘Dock To Bottom’ button

Google Chrome Developer tool for JavaScript

And if we want to open Developer Console in a separate window, so all I have to do is simply click undock into the separate window.

So let’s try to execute some simple JavaScript code, we are print “Hello Geeks” there, you can also try in your console, just type console.log(“Hello Geeks”); in your console. Here is the screenshot below.

Just write this code and press enter and you can notice that the Hello Geeks is printed into next line, there is a screenshot of output below.

Great! You have learned to write JavaScript Code into your Chrome Browser Developer Console.

Clearing the JavaScript Console

Now we are moving ahead and learn how we can clear my console. There are many ways that you can clear your JavaScript console. The first one is you can press top bar block button.

Or you can press shortcut ctrl+l, this shortcut works on Mac, Windows, and Linux. We also have some other which we can use to clear Console. We can type clear() in the console or we can call console.clear() method within our JavaScript console.

Filtering the JavaScript Console output

There is also a filter option in JavaScript console to filter output. You can filter output by hiding network messages, or by hiding network message, and by severity level. You can access the filter option by clicking the Filter button

We can filter severity level by all, errors, warning, info, logs, and debug.

Additional settings

There are some additional setting like you can change the background color of your console. You can change it from white to black and you can change preferences settings, workspace, and there are some other settings where you can make changes.

In this knowledge bit, we have given a detailed overview of your Google Chrome Developer tool for JavaScript. We have also learned how we can write code in this console and make changes to our console setting.

 

You have a look at our whole JavaScript series as well.

Click to comment

Most Popular

To Top