Console Overview

This page explains how the Microsoft Edge DevTools Console makes it easier to develop web pages. The Console has 2 main uses: viewing logged messages and running JavaScript.

Viewing logged messages

Web developers often log messages to the Console to make sure that their JavaScript is working as expected. To log a message, you insert an expression like console.log('Hello, Console!') into your JavaScript. When the browser runs your JavaScript and sees an expression like that, it logs the message to the Console. For example, suppose that you are writing the HTML and JavaScript for a page:

<!doctype html>
<html>
  <head>
    <title>Console Demo</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script>
      console.log('Loading!');
      const h1 = document.querySelector('h1');
      console.log(h1.textContent);
      console.assert(document.querySelector('h2'), 'h2 not found!');
      const artists = [
        {
          first: 'René',
          last: 'Magritte'
        },
        {
          first: 'Chaim',
          last: 'Soutine'
        },
        {
          first: 'Henri',
          last: 'Matisse'
        }
      ];
      console.table(artists);
      setTimeout(() => {
        h1.textContent = 'Hello, Console!';
        console.log(h1.textContent);
      }, 3000);
    </script>
  </body>
</html>

Figure 1 shows what the Console looks like after loading the page and waiting 3 seconds. Try to figure out which lines of code caused the browser to log the messages.

Figure 1

The Console panel
The Console panel

Web developers log messages for 2 general reasons:

  • Making sure that code is running in the right order.
  • Inspecting the values of variables at a certain moment in time.

See Get Started With Logging Messages to get hands-on experience with logging. See the Console API Reference to browse the full list of console methods. The main difference between the methods is how the data being logged is displayed.

Running JavaScript

The Console is also a REPL. You may run JavaScript in the Console to interact with the page being inspected. For example, Figure 2 shows the Console next to the DevTools homepage, and Figure 3 shows that same page after using the Console to change the top heading of the page.

Figure 2

The Console panel next to the DevTools homepage
The Console panel next to the DevTools homepage

Figure 3

Using the Console to change the top heading of the page
Using the Console to change the top heading of the page

Modifying the page from the Console is possible because the Console has full access to the window of the page. DevTools has a few convenience functions that make it easier to inspect a page. For example, suppose that your JavaScript contains a function called hideModal. Running debug(hideModal) pauses your code on the first line of hideModal the next time that you run it. See Console Utilities API Reference to see the full list of utility functions.

When you run JavaScript you do not have to interact with the page. You may use the Console to try out new code unrelated to the page. For example, suppose you just learned about the built-in JavaScript Array map() method, and you want to experiment with it.
The Console is a good place to try out the function.

See Get Started With Running JavaScript to get hands-on experience with running JavaScript in the Console.

Note

Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License.