Browser DevTools Guide for AI-Assisted Developers

Opening DevTools

• Windows/Linux: F12 or Ctrl+Shift+I
• Mac: Cmd+Option+I
• Right-click anything on the page → Inspect

DevTools opens docked to the bottom or side. You can undock it into its own window (click the three-dot menu → Undock into separate window) which is helpful on smaller screens.

The Console Panel

The Console is the first place to look when something is broken. It shows JavaScript errors, warning messages, and anything your code logs with console.log().

Reading error messages

Every console error includes:

• The error message itself
• The file name and line number (click it to jump to the Sources panel)
• A stack trace showing the call chain that led to the error

Uncaught TypeError: Cannot read properties of undefined (reading 'name')
    at UserProfile (UserProfile.jsx:24:18)
    at renderWithHooks (react-dom.development.js:14985:18)

This tells you: UserProfile.jsx line 24 tried to read .name from something that is undefined. The fix is in your component — something is undefined when the component renders, likely a prop or async data that has not loaded yet.

Running JavaScript in the Console

The Console is a live JavaScript REPL. You can run any code against the current page:

// Inspect a variable value
document.title

// Test a function
JSON.parse('{"name":"Chuck"}')

// Check localStorage
localStorage.getItem('authToken')

// Inspect the current URL
window.location.href

This is invaluable for debugging — you can test fixes directly in the console before writing them in your code.

Filtering console output

Click the filter icons at the top of the Console to show only Errors, Warnings, or Info messages. When AI generates lots of console.log debugging statements, filtering to Errors only shows what is actually broken.

The Network Panel

The Network panel records every HTTP request your page makes — HTML, CSS, JavaScript files, API calls, images. For debugging AI-generated apps that fetch data, this is your most important panel.

Finding API requests

1. Open DevTools → Network tab
2. Reload the page (or trigger the action that makes the request)
3. Click "Fetch/XHR" to filter to API calls only
4. Click any request to see its details

For each request you can inspect:

• Headers tab: Request method, URL, request headers (including Authorization tokens), response headers (including CORS headers)
• Payload tab: The request body — what your app sent to the server
• Response tab: What the server sent back — the actual JSON data
• Preview tab: The response formatted for easy reading
• Timing tab: How long each phase took (DNS lookup, connection, waiting, download)

Debugging failed requests

Failed requests show in red. Common failure patterns:

• Status 404: Wrong URL — check the endpoint path
• Status 401/403: Auth token missing or invalid — check request headers
• Status 429: Rate limited — too many requests
• Status 500: Server error — check your backend logs
• CORS error: No response — check the Console for the specific CORS error message
• (failed): Network error — server unreachable, check if your dev server is running

The Network waterfall

The waterfall chart shows when each request starts and how long it takes. Long bars in the "Waiting (TTFB)" column mean your server is slow to respond. Long bars in the "Download" column mean large payloads. Stacked sequential requests suggest you should use Promise.all() to parallelize.

The Elements Panel

The Elements panel shows the live HTML of your page and its computed CSS styles. It is essential for debugging layout and styling issues.

Inspecting an element

Right-click any element on the page → Inspect. The Elements panel jumps to that element in the HTML tree. The Styles panel on the right shows all CSS rules applied to it, where they come from (which stylesheet), and whether any rules are being overridden (shown with strikethrough).

Live CSS editing

Click any CSS value in the Styles panel to edit it. Press Tab to move to the next property. Changes apply instantly to the page. This is the fastest way to experiment with CSS fixes — find what works in DevTools, then copy the values to your actual stylesheet.

Box model visualization

The Computed tab shows the element's box model — its content size, padding, border, and margin visually. When layout is broken (elements overlapping, wrong sizes), the box model usually reveals why immediately.

The Sources Panel

The Sources panel lets you read the JavaScript your browser is running and set breakpoints to pause execution and inspect variables.

Setting a breakpoint

1. Open Sources → find your file in the file tree
2. Click a line number to set a breakpoint (blue marker appears)
3. Trigger the code that runs that line
4. Execution pauses at the breakpoint
5. Hover variables to see their current values
6. Use the resume/step buttons to continue execution

This is far more powerful than console.log debugging — you can inspect any variable at any point in execution, not just values you thought to log ahead of time.

Essential Debugging Workflows

Debugging "data is undefined"

1. Open Console — look for the specific error and line number
2. Open Network → find the API request — did it succeed? What did it return?
3. Add a console.log right before the undefined access to see what the value actually is
4. Usually: data has not loaded yet (missing loading state), wrong property path, or API returned an error

Debugging CSS layout issues

1. Right-click the broken element → Inspect
2. Check the Styles panel — is the expected CSS rule present? Is it overridden?
3. Check the Computed tab → Box Model — is the element the expected size?
4. Try CSS changes live in the Styles panel until it looks right
5. Copy the fix to your stylesheet

Debugging a broken API call

1. Open Network → filter to Fetch/XHR
2. Trigger the action that makes the call
3. Click the request → check Status, Headers, and Response
4. For CORS errors: check the Console for the specific blocked header
5. For 401: check the Authorization header is present and correct
6. For unexpected data: check the Response tab to see what the server actually returned

What to Learn Next

• What Is JavaScript? — Understanding JS helps you read the code in the Sources panel.
• What Is CORS? — CORS errors are the most common Network tab failure.
• What Is JSON? — API responses in the Network tab are JSON.
• What Is a Promise? — Most Network tab errors involve async/Promise issues.

FAQ