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.
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.
So once you opened you console you easily switch your panel to console by just clicking on console tab.
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
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.
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.
We can filter severity level by all, errors, warning, info, logs, and debug.
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.