How To Open Console Tab in Web Development Tools

This document discusses how to open the Console tab in web development tools across different browsers. The Console tab displays messages output by JavaScript, including normal log messages and error messages. On Chrome and Edge, you can open the Console tab by pressing F12. On Firefox, you also use F12. On Safari for Mac, you need to enable the Developer Menu first before using Cmd+Opt+C to toggle the Console window. The Console tab is useful for testing and debugging JavaScript code.

Uploaded by

Muhammad Amir

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

33 views

How To Open Console Tab in Web Development Tools

Uploaded by

Muhammad Amir

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 5

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:

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