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.

The HTML and JavaScript for the 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' },

];
console.table(artists);
setTimeout(() => {
h1.textContent = 'Hello, Console!';
console.log(h1.textContent);
}, 3000);
</script>
</body>
</html>

In the following figure, the Console displays the results of loading the page and waiting 3 seconds.

The Console panel

Try to determine which lines of code caused the browser to log the messages.

Web developers log messages for the following 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.

In the following figure, the Console is shown next to the DevTools homepage.

The Console panel next to the DevTools homepage

In the following figure, the same page is shown after using the Console to change the top heading of the page.

Use 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. For more information about the full list of utility functions, navigate to Console Utilities API Reference.

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.

For more hands-on experience with running JavaScript in the Console, navigate to Get Started With Running JavaScript.

Getting in touch with the Microsoft Edge DevTools team

Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.

  • Send your feedback using the Send Feedback icon or select Alt+Shift+I (Windows, Linux) or Option+Shift+I (macOS) in DevTools.
  • Tweet at @EdgeDevTools.
  • Submit a suggestion to The Web We Want.
  • File bugs on this article using the Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools

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.