Programming with AI
ENRU
8.4

Developer tools

console, network, elements

What it is

Developer tools are the panel built into the browser that shows what is actually happening on a page. It opens with F12 (or Ctrl+Shift+I, on macOS Cmd+Option+I).

For the frontend it is what logs are for a server (article 4.2): the only way to find out what happened instead of guessing.

There are many tabs; three are needed.

What it looks like in code

Here is what the browser shows on a page with three different problems:

measured
[network ✗]  https://example.invalid/style.css — net::ERR_TUNNEL_CONNECTION_FAILED
[console error]   Failed to load resource: net::ERR_TUNNEL_CONNECTION_FAILED
[console log]     app started
[console warning] API key is not set, running in demo mode
[console log]     received: {"main":null}
[page error]      Cannot set properties of null (setting 'textContent')

Six lines, and three different stories in them:

  1. The stylesheet didn't load. The page still appeared — just unstyled. That is the fourth cause of "the style didn't apply" from article 8.1, and this is the only place you can see it.
  2. A demo-mode warning. Not an error, but it explains why the data looks odd.
  3. Cannot set properties of null — the code looked for the element #missing, didn't find it, got null and tried to write text into it. Familiar: it is the same class of error as KeyError in Python and 'temp' is possibly null in TypeScript.

The Console tab

What to look at here:

  • errors — in red, with the place in the code;
  • warnings — in yellow, often explaining the cause;
  • console.log output from the code.

The console doesn't only show, it also takes commands. You can check whether an element exists right there:

document.querySelector('.card')      // null — not found
document.querySelectorAll('.card').length

That is the fastest answer to "is the element in the DOM at all?" from article 8.1.

The Network tab

A list of every request: stylesheets, scripts, images, API calls. Three columns to watch:

ColumnWhat it tells you
Statusthe response code (article 7.2): 200, 404, 500
Sizewhether a megabyte loaded instead of a kilobyte
Timewhat exactly is slow

Clicking a request shows the headers and the body — the same thing curl produced in chapter 7, only for a live page.

The most common finding: the API request went out, the response was 200, and the data is wrong. Which means the problem is not in the frontend but in the backend — and from there, article 7.8.

The Elements tab

It shows the DOM, not the original HTML. The difference is fundamental: here you see what came out of parsing and of the scripts running (article 8.1).

On the right is the styles panel for the selected element. There you can see:

  • which rules applied;
  • which are struck through — that is, overridden by others (article 8.3);
  • where each rule came from: file and line.

A struck-through rule is a ready-made answer to "why didn't this style apply".

What to tell the AI

The main value of the tools when working with an AI is that they turn "doesn't work" into facts (article 4.3):

Don't
the styles aren't applying, fix it
Better
In the console: Failed to load resource — style.css, net::ERR_...
In the Network tab: request to /style.css, status 404.
The path in the markup: <link rel="stylesheet" href="/style.css">.
The file is at static/style.css. What should the path be?
Prompt
Error: Cannot set properties of null (setting 'textContent').
Here is the code: <code>. The #missing element is in the markup.
Why does querySelector return null?
Prompt
In the Elements tab the color rule from .card is struck through.
Here are both rules: <code>. Which one wins and why?

What to look for

The console was never opened. The most common reason for a long search: the error was there in writing the whole time.

Errors that aren't yours. Browser extensions pour into the same console. Check the file and line: if it isn't your file, it isn't your problem.

A console.log left in the code. On the frontend that is also a leak: visible to anyone who opens the console. Before shipping, search the diff (article 4.5).

Looking at the source instead of the DOM. Ctrl+U shows what came from the server; the Elements tab shows what is there now. With scripts running those are different things.

The cache. The change isn't visible because the browser took the old file. A hard refresh is Ctrl+Shift+R.

Cheat sheet

  • F12, three tabs: Console · Network · Elements.

  • Cannot read properties of null — the selector didn't find the element.

  • The check in the console: did document.querySelector('.card') return null?

  • Network: status, size, time. A 404 on the styles explains "everything slid".

  • Elements shows the DOM, not the original HTML.

  • A struck-through rule in the styles panel was overridden.