Use the Console

The Console tool of the DevTools helps you with several tasks. The following list includes some of the tasks.

The Console is a great companion tool to use with others tools. The Console provides a powerful way to script functionality, inspect, and manipulate the current webpage using JavaScript.

The fastest way to directly open the Console is to select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS).

Error reports and Console

Console is the default place where JavaScript and connectivity errors are reported. If any errors occur, the Issues counter is displayed next to the Settings icon in DevTools that provides the number of errors and warnings. Select the Issues counter to open the Issues tool and display the problem. For more information, navigate to Debug errors reported in Console.

DevTools gives detailed information about the error in the Console

Inspect and filter information on the current webpage

When you open DevTools on a webpage, there may be an overwhelming amount of information in the Console. The amount of information becomes a problem when you need to identify important information. To view the important information that needs action, use the Issues tool in DevTools.

Issues are gradually being moved from the Console to the Issues tool. However, there's still a lot of information in Console, which is why it's a good idea to know about the automated log and filter options in the Console. For more information, navigate to Filter Console messages.

DevTools with a Console full of messages

Log information to display in the Console

The most popular use case for the Console is logging information from your scripts using the console.log() method or other similar methods. To try it, complete the following actions.

  1. To open Console, select Control+Shift+J (Windows, Linux) or Command+Option+J (macOS).

  2. Navigate to Console messages examples: log, info, error and warn, or copy and run the following code snippet in the Console.

    console.log('This is a log message');
    console.info('This is some information'); 
    console.error('This is an error');
    console.warn('This is a warning');
    console.log(document.body.getBoundingClientRect());
    console.table(document.body.getBoundingClientRect());
    let technologies = ["HTML", "CSS", "SVG", "ECMAScript"];
    console.groupCollapsed('Technolgies');
    technologies.forEach(tech => {console.info(tech);})
    console.groupEnd('Technolgies');
    
  3. The Console displays the results.

    Console full of messages caused by demo code

Many useful methods are available when you work with the Console. For more information, navigate to Log messages in the Console tool.

Try your JavaScript live in the Console

The Console isn't only a place to log information. The Console is a REPL environment. When you write any JavaScript in the Console, the code runs immediately. You may find it useful to test some new JavaScript features or to do some quick calculations. Also, you get all of the features you expect from a modern editing environment, such as autocompletion, syntax highlighting, and history. To try it, complete the following actions.

  1. Navigate to the Console.
  2. Type 2 + 2.

The Console displays the result 4 on the following line. This Eager evaluation feature is useful to debug and verify that you aren't making mistakes in your code.

The Console displays the result of 2 + 2 live as you type it

To run the JavaScript expression in the Console and optionally display a result, select Enter. Then, you can write the next JavaScript code to run in the Console.

Run several lines of JavaScript code in succession

By default, you run JavaScript code on a single line. To run a line, type your JavaScript and then select Enter. To work around the single-line limitation, select Shift+Enter instead of Enter. Similar to other command-line experiences, to access your previous JavaScript commands, select Arrow-Up. The autocompletion feature of the Console is a great way to learn about unfamiliar methods. To try it, complete the following actions.

  1. Open the Console.
  2. Type doc.
  3. Choose document from the dropdown menu.
  4. Select the tab key to choose it.
  5. Type .bo.
  6. Select tab to get document.body.
  7. Type another . to display the complete list of properties and methods available on the body of the current webpage.

For more information about all the ways to work with Console, navigate to Console as a JavaScript environment.

Console autocompletion of JavaScript expressions

Interact with the current webpage in the browser

The Console has access to the Window object of the browser. You can write scripts that interact with the current webpage. To try it, complete the following actions.

  1. Open the Console.

  2. Copy and paste the following code snippet.

    document.querySelector('h1').innerHTML
    

Copy the top heading (h1) content from the DOM and display in the Console

Instead of only reading from the webpage, you can also change it. To try changing the webpage, complete the following actions.

  1. Open the Console.

  2. Copy and paste the following code snippet.

    document.querySelector('h1').innerHTML = 'Rocking the Console';
    

Write text to the DOM in the Console

You changed the main heading of the webpage to Rocking the Console. The Console Utility methods make it easy to access and manipulate the current webpage. For more information, navigate to Console Utilities API reference. For example, to add a green border around all the links in the current webpage, complete the following actions.

  1. Open the Console.

  2. Copy and paste the following code snippet.

    $$('a').forEach(a => a.style.border='1px solid lime');
    

Manipulate a selection of elements using the Console

For more information about working with the DOM, navigate to Use the Console to interact with the DOM.

Learn more about Console

For more information about the Console, navigate to Console reference, Console Utilities API reference, and Console API reference.

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.
  • To file bugs about this article, use the following Feedback section.

The Send Feedback icon in the Microsoft Edge DevTools