How to Execute JavaScript in Chrome DevTools

This guide shows you how to execute JavaScript in Chrome DevTools, the set of tools built into every Chrome browser. For JavaScript developers, it is the single most important tool after a code editor. It lets you write code, see output, inspect errors, and debug problems, all inside the browser.

Opening DevTools

There are several ways to open DevTools:

• Press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac)
• Right-click anywhere on a page and choose Inspect
• Press F12

The DevTools panel opens at the bottom or side of your browser window. You can drag the divider to resize it, or click the three-dot menu in the top-right of DevTools to change the dock position.

The Console Panel

The Console is where you write JavaScript and see results immediately. It is the fastest feedback loop in programming.

Running Code

Type any JavaScript and press Enter:

javascript

const name = "Chrome";
console.log(`Hello from ${name}!`);

The Console runs both lines immediately and prints whatever console.log() was given, right below the code you just typed and ran:

text

Hello from Chrome!

The Console evaluates each line and prints the return value. If a line has no explicit return, it prints undefined.

Console Methods Beyond log()

console.log() is the most common method, but several others are more useful in specific situations:

javascript

const users = [
  { name: "Alice", role: "admin" },
  { name: "Bob", role: "editor" },
  { name: "Charlie", role: "viewer" },
];
 
// console.table() displays arrays and objects as formatted tables
console.table(users);

This prints a sortable table with columns for name and role, much easier to scan than nested object output. Other console methods are useful for different situations, like flagging problems or grouping related output together:

javascript

// console.error() prints in red with a stack trace
console.error("Something went wrong!");
 
// console.warn() prints in yellow
console.warn("This is a warning.");
 
// console.group() organizes related logs
console.group("User Details");
console.log("Name: Alice");
console.log("Role: admin");
console.groupEnd();

Accessing the Current Page

The Console is not limited to standalone code. It can also read and change the actual page you are viewing. Try running these three lines on any website:

javascript

// Read the page title
console.log(document.title);
 
// Count all links on the page
const links = document.querySelectorAll("a");
console.log(`This page has ${links.length} links.`);
 
// Change the background color temporarily
document.body.style.backgroundColor = "#f0f0f0";

The last line changes the page background for your current session only. Refresh the page and it reverts. This is invaluable for testing CSS changes and understanding how a site works.

The Sources Panel and Snippets

The Console does not save your code. The Sources panel solves this with Snippets, JavaScript files that persist in your browser.

Creating a Snippet

Snippets persist across browser restarts and tab navigation. They are perfect for keeping utility code, test scripts, and learning exercises that you run repeatedly.

Here is a useful snippet to try:

javascript

// Count elements by tag name on any page
const tags = {};
document.querySelectorAll("*").forEach(el => {
  const tag = el.tagName.toLowerCase();
  tags[tag] = (tags[tag] || 0) + 1;
});
console.table(tags);

Save this as a Snippet and run it on different websites. It shows you which HTML elements each page uses most.

Running Snippets on Any Page

Snippets run in the context of whatever page you are viewing. Write a Snippet once, then open different websites and run it to see how they differ. This is a fast way to explore how real websites are built.

Debugging with Breakpoints

Breakpoints let you pause JavaScript execution at a specific line and inspect what is happening. This is how professional developers find bugs.

Setting a Breakpoint

While paused, you can:

• Hover over any variable to see its current value
• Look at the Scope panel on the right to see all local and global variables
• Look at the Call Stack panel to see the chain of function calls that led here
• Use the step controls (top-right of the Sources panel) to advance line by line

The debugger Statement

You can also set breakpoints directly in your code:

javascript

function calculateTotal(price, quantity) {
  debugger; // Execution pauses here when DevTools is open
  const total = price * quantity;
  return total;
}

The debugger statement acts like a breakpoint set in DevTools. When DevTools is open, execution pauses at that line. When DevTools is closed, it is ignored. This is useful for debugging code you wrote locally.

A Real Debugging Session

Here is a typical debugging workflow:

This cycle of finding the problem, pausing, inspecting, fixing, and testing is the core of JavaScript debugging. The faster you get comfortable with breakpoints, the faster you will solve problems.

For more on how the browser processes the JavaScript you write in DevTools, see how browsers read and execute JavaScript code. If you want to learn both browser and server-side JavaScript execution, read about how to run JavaScript in the browser and Node.js.