Opening DevTools

The fastest way to open DevTools is a keyboard shortcut. Once you have used it a few times it becomes muscle memory.

You can also right-click any element on a page and choose "Inspect", this opens DevTools with that element already highlighted in the Elements panel. This is the fastest way to inspect a specific component that AI generated.

The Elements panel, verifying AI-generated layouts

When Copilot generates a component and the layout looks wrong, the Elements panel is your first stop. It shows you the live DOMWhat is dom?The Document Object Model - the browser's live representation of your HTML page as a tree of objects that JavaScript can read and modify. Ask AI for more, the parsed, rendered version of your HTML. It is not the source file you wrote; it is what the browser actually built from it.

<!-- v0 generated this card component -->
<!-- But in the browser, the image overflows its container -->
<div class="card" style="width: 300px;">
  <img src="photo.jpg" style="width: 100%;" />
  <div class="card-body">
    <h3>User Name</h3>
    <p>Description text that might be very long...</p>
  </div>
</div>

Click the element in the Elements panel, then look at the Styles sub-panel on the right. You will see every CSS rule affecting the selected element, including inherited styles and browser defaults. The Computed tab collapses all those rules into final values.

// In the Console, $0 refers to whichever element is
// currently selected in the Elements panel
$0.style.overflow = 'hidden';
$0.style.borderRadius = '8px';
// Test the fix live before editing your source code

The Console panel, your first error detector

Every JavaScript error that AI-generated code throws shows up in the Console as a red message with a file name and line number. Clicking that link jumps you directly to the offending code in the Sources panel.

// Claude generated this event handler
// but it crashes because 'items' is undefined on first render
const total = items.reduce((sum, item) => sum + item.price, 0);
// Console shows: Uncaught TypeError: Cannot read properties
// of undefined (reading 'reduce')

Beyond errors, the Console is a JavaScript playground. You can run any valid expression, inspect variables, and test fixes before committing them to your code. DevTools also exposes several shortcuts unique to the Console:

// Shorthand for document.querySelector
$('h1')           // Returns the first <h1>
$('.card')       // Returns all elements with class "card"

// $_ holds the result of the last expression you ran
2 + 2             // 4
$_ * 10           // 40

// $0 through $4 hold the last five elements selected in Elements panel
$0                // Most recently selected element

The Network panel, catching failed APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more calls

Every image, stylesheet, script, font, and API call your page makes shows up in the Network panel. When Copilot generates a fetch call and the data never loads, this is where you find out why, wrong URL, missing auth header, or a 500 from the server.

Click "Fetch/XHR" in the filter bar to show only API calls and hide all static assets. This makes it much easier to find the request that is failing.

The Sources panel, where real debugging happens

The Sources panel shows every JavaScript file the page has loaded and lets you set breakpoints, markers that pause execution at a specific line so you can inspect what is happening. This is the single most important panel for understanding AI code you did not write. You will learn much more about this in the Debugging JavaScript lesson.

The Application panel, inspecting stored data

The Application panel gives you a window into everything the browser is storing on behalf of your site:

You can read, edit, and delete entries directly from this panel. If you need to clear a JWTWhat is jwt?JSON Web Token - a self-contained, signed token that carries user data (like user ID and role). The server can verify it without a database lookup. Ask AI for more tokenWhat is token?The smallest unit of text an LLM processes - roughly three-quarters of a word. API pricing is based on how many tokens you use. Ask AI for more stored in Local Storage to test a login flow, this is where you do it.

Quick reference