Console overview

Kayce Basques
Kayce Basques

Use theConsole to test and debug Javascript web applications.

Overview

This page explains how the Chrome DevToolsConsole makes it easier to develop web pages. TheConsolehas 2 main uses:viewing logged messages andrunning JavaScript.

Open the Console

You can open theConsole as a panel or as a tab in the Drawer. To learn how, seeOpen the Console in our feature reference.

Viewing logged messages

Web developers often log messages to theConsole to make sure that their JavaScript is working asexpected. To log a message, you insert an expression likeconsole.log('Hello, Console!') into yourJavaScript. When the browser executes your JavaScript and sees an expression like that, it knowsthat it's supposed to log the message to theConsole. For example, suppose that you're in theprocess of 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 theConsole looks like after loading the page and waiting 3 seconds. Try tofigure out which lines of code caused the browser to log the messages.

The Console panel.

Figure 1. TheConsole panel.

Web developers log messages for 2 general reasons:

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

SeeGet Started With Logging Messages to get hands-on experience with logging. See theConsoleAPI Reference to browse the full list ofconsole methods. The main difference between themethods is how they display the data that you're logging.

Running JavaScript

TheConsole is also aREPL. You can run JavaScript in theConsole to interact with the pagethat you're inspecting. For example,Figure 2 shows theConsole next to the DevTools homepage,andFigure 3 shows that same page after using theConsole to change the page's title.

The Console panel next to the DevTools homepage.

Figure 2. TheConsole panel next to the DevTools homepage.

Using the Console to change the page's title.

Figure 3. Using theConsole to change the page's title.

Modifying the page from theConsole is possible because theConsole has full access to the page'swindow. DevTools has a few convenience functions that make it easier to inspect a page. Forexample, suppose that your JavaScript contains a function calledhideModal. Runningdebug(hideModal) pauses your code on the first line ofhideModal the next time that it's called.SeeConsole Utilities API Reference to see the full list of utility functions.

When you run JavaScript you don't have to interact with the page. You can use theConsole to try outnew code that's not related to the page. For example, suppose you just learned about the built-inJavaScript Array methodmap(), and you want to experiment with it. TheConsole is a goodplace to try out the function.

SeeGet Started With Running JavaScript to get hands-on experience with running JavaScript intheConsole.

Except as otherwise noted, the content of this page is licensed under theCreative Commons Attribution 4.0 License, and code samples are licensed under theApache 2.0 License. For details, see theGoogle Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2024-09-21 UTC.