How To Open Console Tab in Web Development Tools

Summary: in this tutorial, you will learn how to open the Console tab of web development tools to view the messages.

Web development tools allow you to test and debug the JavaScript code. Web development tools are often called devtools.

Modern web browsers such as Google Chrome, Firefox, Edge, Safari, and Opera provide the devtools as built-in features.

Generally, devtools allow you to work with a variety of web technologies such as HTML, CSS, DOM, and JavaScript.

In this tutorial, you will learn how to open the Console tab of the devtools to view messages output by JavaScript.

Google Chrome

First, open the devtools.html file.

The devtools.html file has the following JavaScript code:

<script>
    console.log('Hello, devtools!');

    // the following code causes an error
    let greeting = msg;
</script>
Code language: HTML, XML (xml)

Second, press F12 on Windows or Cmd+Opt+J if you are on Mac.

The devtools will open the Console tab by default. It will look like this: