Get Started With The Console

This tutorial teaches you how to use the Console in Chrome DevTools.

The Console.Figure 1. The Console

The Console has two main functions:

  • Viewing diagnostic information about the page. This information can come from the web developers that built the page, or from the browser.
  • Running JavaScript. You can view and change the page's DOM by typing JavaScript statements in the Console. Or, if you just want to experiment, you can use the Console as your code playground to run code that is not related to the page at all.

This tutorial is interactive. You're going to open up DevTools on this very page in order to get hands-on experience with the Console.

Step 1: View messages

Messages in the Console come from either the page's JavaScript, or from the browser.

Part A: View messages from the page's JavaScript

The Console API lets you log messages from your JavaScript to the Console.

  1. Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS) to open the Console, right here on this very page.

    The Console, opened alongside this very page. Figure 2. The Console, opened alongside this very page

  2. Click Log A Message. You should see the text click listener executed get logged to the Console.

    This message is logged to the Console because the button's click event listener instructs the browser to run console.log('click listener executed') when the button is clicked.

  3. To the right of the message there is a link. Click that link now. DevTools opens the Sources panel and shows you the line of code that caused the message to get logged.

    Highlighted in yellow is the line of code that caused the message to get logged. Figure 3. Highlighted in yellow is the line of code that caused the message to get logged

  4. Click the Console tab to go back to the Console.

  5. The console object has other methods for printing messages. Click Debug to see how the Console prints console.debug() messages. If your Console is set to its default settings, you won't see any thing.

  6. If you didn't see anything, click the dropdown menu that says Default Levels or Custom Levels and enable Verbose. You should now see the text debug in your Console. console.debug() messages are styled the same as console.log() ones.

    The Console displays messages in chronological order. The newest message is at the bottom.

  7. Click the buttons below to see how the remaining message types --- console.info(), console.warn(), and console.error() --- are styled in the Console.

    Use console.warn() to warn that something has happened in your code that may cause problems. Use console.error() to call out a critical error.

  8. Click Expand The Expand icon next to warn and error to see the call stack leading up to those messages. The function at the bottom of the stack called the one above it.

    The call stack leading up to console.error(). Figure 4. The call stack leading up to console.error()

Part B: View messages from the browser

The browser can also log messages to the Console. This usually occurs when you write incorrect code.

  1. Click Throw Error. The browser logs a TypeError.

    The browser throws this error when some JavaScript tries to access a DOM node that doesn't exist.

  2. Click Throw 404. The browser logs a 404 (Not Found) error, as well as others.

    The browser throws these errors when a page tries to request a file that doesn't exist.

Part C: Filter messages

On big sites, you'll sometimes see the Console get flooded with messages. You can filter the Console to only show messages that you care about.

  1. Click Log Numbers. The Console prints out whether each number from 1 to 1000 is prime. Every third message is printed with console.warn(). In real life you should only use console.warn() for warning scenarios, but this is just a contrived example to demonstrate filtering.

  2. Type 123 in the Filter text box. The Console only shows messages that contain 123 in either the content of the message, or the filename that caused the message.

  3. Replace 123 with -not. The Console hides any message that contains not. Using the pattern -<text> hides any message that includes <text>.
  4. Replace -not with /1[0-9]1/, which is a regular expression. The Console only shows messages that include a 3-digit number that starts with 1 and ends with 1. Keep the filter enabled and continue to the next step.
  5. Click Show Console Sidebar. The Sidebar lets you further filter messages by type.
  6. Click 333 Warnings. DevTools now only shows messages that were logged with console.warn(). Remember that the /1[0-9]1/ filter is still active, so you actually are filtering along 2 dimensions right now.

    Filtering with the Sidebar and a regular expression, simultaneously. Figure 5. Filtering with the Sidebar and a regular expression, simultaneously

  7. Close the Sidebar and delete /1[0-9]1/ from the Filter text box.

Step 2: Run JavaScript

The Console is also a REPL, which stands for Read, Evaluate, Print, and Loop. In other words, you can run JavaScript statements in the Console, and the Console prints out the results.

Part A: View and change the page's JavaScript or DOM

When building or debugging a page, it's often useful to run statements in the Console in order to change how the page looks or runs.

  1. Your Console is probably cluttered up from all the messages in the previous section. Click Clear Console Clear Console{.cdt-inl}. Hover over the button to see its keyboard shortcuts.

  2. Type document.getElementById('changeMyText').textContent = 'Hello' in the Console and then press Enter to attempt to change the text of the button below from Change My Text to Hello. It probably won't work. You'll find out why next.

    This probably didn't work for you because the button is embedded in an iframe, which means it's in a different execution context. An iframe element lets you embed a page within another page, without giving that sub-page access to your main page. This is how most ads on the web are distributed.

    Unsuccessfully attempting to change the button's text. Figure 6. Unsuccessfully attempting to change the button's text

  3. Notice the dropdown menu to the left of the Filter text box. It probably says Top. Top represents the execution context of your main page.

  4. Right-click Change My Text and select Inspect. DevTools jumps to the Elements panel and highlights the element in the DOM Tree.

    Inspecting the button. Figure 7. Inspecting the button

  5. Press Escape. The Console opens up at the bottom of the Elements panel. Note how the dropdown that used to say Top now says something else, and it's background is colored red. This means that the Console is now in a different execution context. You're in a different execution context because the Change My Text button is selected in the DOM Tree, and that button is embedded in an iframe.

    The Console opened at the bottom of the Elements panel, and in a different
             execution context. Figure 8. The Console opened at the bottom of the Elements panel, and in a different execution context

  6. Try running document.getElementById('changeMyText').textContent = 'Hello' again. You don't have to type it out or copy-paste it. Just focus the Console and press the Up Arrow key. DevTools remembers your history. After running the statement, look at the button's text again. This time, it should have successfully changed.

Hopefully you get the idea that this workflow is completely open-ended. You can run any JavaScript here. This is a flexible way to debug pages and explore how they're built.

Part B: Run arbitrary JavaScript

Sometimes, you just want a code playground where you can test out JavaScript features that you're not familiar with. The Console is the perfect place to do this. For example, ES6 introduced a nice feature where you can define default values for function arguments. Try it now:

  1. Type the following code into the Console. Try typing it, rather than copy-pasting it, in order to to see how DevTools intelligently decides whether to continue to let you enter input, or to evaluate the code.

    function add(a, b=20) {
      return a + b;
    }
    
  2. Type the following code in the Console to call the function that you just defined.

    add(25);
    

Next steps

Congrats, you're now familiar with the core uses of the Console. Below are more resources for learning how to use it more effectively.

View messages

See the Console API Reference to learn all of the ways that you can print messages to the Console.

Run JavaScript to view and change a page

DevTools lets you pause a script in the middle of its execution. While you're paused, you can use the Console to view and change the page at that moment in time. This makes for a powerful debugging workflow. See Get Started With Debugging JavaScript for an interactive tutorial.

The Console also has a set of convenience functions that make it easier to interact with a page. For example:

  • Rather than typing document.querySelector() to select an element, you can type $(). This syntax is inspired by jQuery, but it's not actually jQuery. It's just an alias for document.querySelector().
  • debug(function) effectively sets a breakpoint on the first line of that function.
  • keys(object) returns an array containing the keys of the specified object.

See Command Line API Reference for the full reference.

Feedback

Was this tutorial helpful?