How to Execute JavaScript in Chrome DevTools

Chrome DevTools is the most powerful free tool available to JavaScript developers. It is built directly into Google Chrome and gives you the ability to run code on the fly, set breakpoints, inspect variables at runtime, measure performance, and edit JavaScript live without reloading the page. Every professional web developer uses DevTools daily, and learning it early will save you hundreds of hours of debugging time.

Think of DevTools as an X-ray machine for websites. While a regular user sees only the finished page, DevTools lets you see the skeleton (DOM), the wiring (JavaScript), the plumbing (network requests), and the paint job (CSS) all at once. This guide focuses on the JavaScript side: how to run code, debug it, and profile it.

Opening Chrome DevTools

There are several ways to open DevTools. Pick the one that feels fastest to you.

The Console Panel: Your JavaScript Playground

The Console panel is the primary place to execute JavaScript interactively. It behaves like a REPL (Read-Eval-Print Loop): you type an expression, press Enter, and the result appears immediately.

Basic Code Execution

javascript

// Type these one at a time in the Console and press Enter after each:
 
// Simple expressions
5 + 3
// Output: 8
 
"hello".toUpperCase()
// Output: "HELLO"
 
// Variable declarations persist during the session
const prices = [29.99, 49.99, 9.99, 74.99];
const total = prices.reduce((sum, price) => sum + price, 0);
console.log(`Total: $${total.toFixed(2)}`);
// Output: Total: $164.96
 
// You can access any variable declared in the page's JavaScript
// For example, on a React page you might find window.__NEXT_DATA__

Multi-Line Code in the Console

To write multi-line code, press Shift+Enter to create a new line without executing. Press Enter on the last line to run everything.

javascript

// Press Shift+Enter after each line, then Enter on the last line:
function formatCurrency(amount, currency = "USD") {
  return new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: currency
  }).format(amount);
}
 
formatCurrency(1299.5);
// Output: "$1,299.50"
 
formatCurrency(1299.5, "EUR");
// Output: "€1,299.50"

Interacting with the Current Page

The Console has direct access to the page's DOM. You can query elements, change their content, and even add entirely new elements.

javascript

// Select elements using CSS selectors
const heading = document.querySelector("h1");
console.log(heading.textContent);
 
// Change the page live
heading.textContent = "I changed this heading from DevTools!";
heading.style.color = "#FF4500";
heading.style.fontSize = "48px";
 
// Add a new element
const banner = document.createElement("div");
banner.textContent = "This banner was injected via DevTools";
banner.style.cssText = "background: #222; color: #fff; padding: 16px; text-align: center;";
document.body.prepend(banner);

Useful Console Methods Beyond console.log

The console object has many methods beyond log. Here are the ones you will use most.

javascript

// console.table() displays data in a readable table format
const inventory = [
  { product: "Laptop", price: 999, stock: 23 },
  { product: "Keyboard", price: 79, stock: 156 },
  { product: "Mouse", price: 49, stock: 89 },
  { product: "Monitor", price: 449, stock: 12 }
];
console.table(inventory);
// Displays a formatted table in the Console
 
// console.time() measures how long code takes to run
console.time("Array sort");
const bigArray = Array.from({ length: 1000000 }, () => Math.random());
bigArray.sort((a, b) => a - b);
console.timeEnd("Array sort");
// Output: Array sort: 245.6ms (varies by machine)
 
// console.group() organizes related logs
console.group("User Authentication");
console.log("Checking credentials...");
console.log("Token valid: true");
console.log("User role: admin");
console.groupEnd();

Console Shortcuts and Special Variables

Chrome DevTools provides special variables and shortcuts that only work in the Console, not in regular JavaScript files.

javascript

// $0 refers to the currently selected element in the Elements panel
// Select an element in Elements, then in Console:
$0
// Returns the selected DOM element
 
$0.style.border = "2px solid red";
// Highlights the selected element with a red border
 
// $() is a shortcut for document.querySelector()
$("h1")
// Same as document.querySelector("h1")
 
// $$() is a shortcut for document.querySelectorAll() (returns array, not NodeList)
$$("p").length
// Returns the number of <p> elements on the page
 
// $_ refers to the result of the last evaluated expression
2 + 2
// 4
$_ * 10
// 40
 
// copy() copies any value to the clipboard
copy(JSON.stringify(inventory, null, 2));
// The JSON string is now in your clipboard

The Sources Panel: Debugging with Breakpoints

While the Console is great for running snippets, the Sources panel is where real debugging happens. You can set breakpoints, step through code line by line, and inspect the values of every variable at each step.

Setting a Breakpoint

javascript

// Imagine you have this code in your project (app.js):
function processPayment(cart) {
  const subtotal = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
  const tax = subtotal * 0.08;
  const shipping = subtotal > 100 ? 0 : 9.99;
  const total = subtotal + tax + shipping;
 
  return {
    subtotal: subtotal.toFixed(2),
    tax: tax.toFixed(2),
    shipping: shipping.toFixed(2),
    total: total.toFixed(2)
  };
}

To debug this function:

1. Open DevTools and go to the Sources panel
2. Find app.js in the file tree on the left
3. Click on the line number next to const tax = subtotal * 0.08;
4. A blue marker appears, indicating a breakpoint is set
5. Trigger the function (click the checkout button, reload the page, etc.)
6. Execution pauses at that line

When paused, you can:

• Hover over any variable to see its current value
• Check the Scope section in the right panel for all local and global variables
• Use the Call Stack section to see which functions called the current function

Stepping Through Code

Once paused at a breakpoint, use these controls:

The debugger Statement

You can also trigger a breakpoint directly from your code using the debugger keyword:

javascript

function validateEmail(email) {
  debugger; // Execution pauses here when DevTools is open
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  const isValid = regex.test(email);
  return isValid;
}
 
// When DevTools is open and this function runs,
// execution pauses at the debugger line
validateEmail("user@example.com");

Live Editing in the Sources Panel

DevTools lets you edit JavaScript files directly and see changes without reloading the page. This is incredibly useful for testing quick fixes.

1. Open the Sources panel
2. Find your JavaScript file
3. Click inside the code to edit it
4. Press Ctrl+S (Windows) / Cmd+S (Mac) to save
5. The changes take effect immediately for subsequent function calls

javascript

// Original code in the Sources panel:
function getDiscount(total) {
  return total * 0.10; // 10% discount
}
 
// Edit it directly in DevTools to test a different discount:
function getDiscount(total) {
  return total * 0.25; // Changed to 25% for testing
}
// Press Ctrl+S, then call getDiscount(100) in the Console
// Output: 25 (instead of 10)

These edits are temporary. Reloading the page restores the original file. For persistent changes, edit your actual source files in your code editor.

Best Practices

Use console.table() for arrays and objects. It is far more readable than console.log() for structured data. One console.table(users) call replaces dozens of expanding disclosure triangles.

Set conditional breakpoints for targeted debugging. Right-click a line number in the Sources panel and select "Add conditional breakpoint." Enter an expression like cart.length > 5, and the breakpoint only triggers when that condition is true.

Use the Console as a scratch pad during debugging. When paused at a breakpoint, the Console has access to all variables in the current scope. You can test expressions, call functions, and inspect values without modifying your source code.

Learn keyboard shortcuts for stepping. F10 (step over), F11 (step into), and Shift+F11 (step out) are muscle memory for experienced developers. They are much faster than clicking the tiny buttons in the toolbar.

Use Snippets for reusable utility code. In the Sources panel, open the Snippets tab to save JavaScript code that persists across browser sessions. Useful for helper functions, data formatting scripts, or test data generators.

Common Mistakes and How to Avoid Them

Leaving console.log statements in production code. Excessive logging in production slows performance and exposes internal state to anyone who opens DevTools. Use a logging library with log levels (debug, info, error) and strip debug logs in your build process.

Editing code in DevTools and forgetting to update the source file. DevTools edits are temporary and reset on page reload. After testing a fix in DevTools, immediately replicate the change in your code editor and save the file.

Ignoring the call stack during debugging. When paused at a breakpoint, the call stack shows exactly how execution reached that point. Skipping this information means missing context about unexpected function calls or event handlers.

Relying on alert() for debugging. Using alert() blocks all execution and is disruptive. console.log() is non-blocking, and breakpoints are far more informative because they show the full state of your application.

Next Steps