29/07/2022, 07:53 How To Open Console Tab in Web Development Tools
Web Development Tools
If this JavaScript tutorial saves you
hours of work, please whitelist it in
your ad blocker 😭 and
Donate Now
(https://www.javascripttutorial.net/donation/)
to support us ❤️in paying for web
hosting and CDN to keep the site
running.
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 (https://www.javascripttutorial.net/sample/devtools.html) file.
https://www.javascripttutorial.net/web-development-tools/ 1/5
29/07/2022, 07:53 How To Open Console Tab in Web Development Tools
The devtools.html file has the following JavaScript code:
<script>
console.log('Hello, devtools!');
// the following code causes an error
let greeting = msg;
</script>
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:
The first message is 'Hello, DevTools!' which is the output of the following command:
console.log('Hello, DevTools!');
To output the value of the variable (https://www.javascripttutorial.net/javascript-variables/) , you use the following
console.log() method. For example:
let message = 'Good Morning!';
console.log(message);
The second message that appears on the Console tab is an error.
https://www.javascripttutorial.net/web-development-tools/ 2/5
29/07/2022, 07:53 How To Open Console Tab in Web Development Tools
Uncaught ReferenceError: msg is not defined
This is because the variable msg has not been defined in the code but was referenced in the
assignment.
Now, you can see both normal messages issued by the console.log() and the error messages. It’s
enough to start. We’ll dive into the devtools in the later tutorial.
Firefox and Edge
Typically, you open the Console tab of the devtools in Firefox and Edge using F12 . They have similar
user interfaces.
Safari
If you are using Safari browser on Mac, you need to enable the Developer Menu first:
https://www.javascripttutorial.net/web-development-tools/ 3/5
29/07/2022, 07:53 How To Open Console Tab in Web Development Tools
And then press Cmd+Opt+C to toggle the Console window:
https://www.javascripttutorial.net/web-development-tools/ 4/5
29/07/2022, 07:53 How To Open Console Tab in Web Development Tools
In this tutorial, you have learned how to open the Console tab of the devtools for checking messages
issued by JavaScript code.
https://www.javascripttutorial.net/web-development-tools/ 5/5
