javascript.md

title	author	ms.author	ms.date	ms.topic	ms.prod	keywords
Get Started With Running JavaScript In The Console	MSEdgeTeam	msedgedevrel	01/20/2020	article	microsoft-edge	microsoft edge, web development, f12 tools, devtools

Get Started With Running JavaScript In The Console

This interactive tutorial shows you how to run JavaScript in the Microsoft Edge DevTools Console. See Get Started With Logging Messages to learn how to log messages to the Console. See Get Started With Debugging JavaScript to learn how to pause JavaScript code and step through it one line at a time.

Figure 1

The Console

Overview

The Console is a REPL, which stands for Read, Evaluate, Print, and Loop. It reads the JavaScript that you type into it, evaluates your code, prints out the result of your expression, and then loops back to the first step.

Set up DevTools

This tutorial is designed for you to open up the demo and try all the workflows yourself. When you physically follow along, you are more likely to remember the workflows later.

1. Press Control+Shift+J (Windows) or Command+Option+J (macOS) to open the Console.

2. Hold Control (Windows) or Command (macOS) and click Console Javascript Example to open in a new window.

   Console Javascript Example

   Figure 2

   The Console JavaScript Example page on the left, and DevTools on the right
   

View and change the JavaScript or DOM of the page

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

1. Notice the text in the button.

2. Type document.getElementById('hello').textContent = 'Hello, Console!' in the Console and then press Enter to evaluate the expression. Notice how the text inside the button changes.

   Figure 3

   How the Console looks after evaluating the expression
   

   Below the code that you evaluated you see "Hello, Console!". Recall the 4 steps of REPL: read, evaluate, print, loop. After evaluating your code, a REPL prints the result of the expression. So "Hello, Console!" must be the result of evaluating document.getElementById('hello').textContent = 'Hello, Console!'.

Run arbitrary JavaScript that is not related to the page

Sometimes, you just want a code playground where you are able to test some code, or try out new JavaScript features you are not familiar with. The Console is a perfect place for these kinds of experiments.

1. Type 5 + 15 in the Console and press Enter to evaluate the expression. The Console prints out the result of the expression below your code. Figure 4 below shows how your Console should look after evaluating this expression.

2. Type the following code into the Console. Try typing it out, character-by-character, rather than copy-pasting it.

   function add(a, b=20) {
       return a + b;
   }

   See define default values for function arguments if you are unfamiliar with the b=20 syntax.

3. Now, call the function that you just defined.

   add(25);

   Figure 4

   How the Console looks after evaluating the expressions above
   

   add(25) evaluates to 45 because when the add function is called without a second argument, b defaults to 20.

Next steps

DevTools lets you pause a script in the middle of running. While you are paused, you may use the Console to view and change the window or DOM of 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, type $(). This syntax is inspired by jQuery, but it is not actually jQuery. It is 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.

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).

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