Developer tools for AI builders

a devtools guide for non-engineers building with ai — inspect what the ai built, understand what's wrong, and turn that observation into a better prompt.

What this is: A practical DevTools guide for non-engineers who are building with AI. Not a full developer tutorial. The goal is to inspect an AI-built page, understand what is wrong, and turn that observation into a better prompt.

This guide is for designers, PMs, founders, operators, and other non-technical people who want to get closer to code without becoming traditional engineers.

Why this still matters

AI can write code now.

But AI does not remove the need to check the output.

If you cannot inspect what it built, you end up prompting like this:

"fix this"
"make it better"
"the page feels off"
"the button is not working"

Those are not bad because they are simple. They are bad because they do not tell the AI what to fix.

The better version sounds like:

"This card layout breaks at 390px width."
"The CTA has 32px top spacing but only 8px bottom spacing."
"The request fails with a 401 after I click submit."
"The success state never appears after the API returns."

That is the real reason to use Inspect Element.

Not to become an engineer. To get close enough to the work that you can direct AI properly.

The 3 tabs to start with

If you are a beginner, do not try to learn all of DevTools.

Start with only these:

Elements — what the page is made of and how it is styled
Network — what the page is asking for in the background
Console — what errors the browser is complaining about

That is enough for most early AI-building debugging.

1. Elements tab: inspect the visual structure

Open any website or AI-built page. Right click on something. Click Inspect.

You will land in the Elements tab.

This tab shows the page structure. In simple terms, it helps you understand:

what text belongs to what section
what is inside a button
what is inside a card
what wrapper/container is controlling the layout
what styles are being applied
what changes on hover, mobile, or different screen sizes

What to look at first

Do not read the whole HTML tree.

Click the picker icon, then hover over the actual page.

Look for:

the element name
the parent container
the spacing around it
the width and height
whether it is inside a grid, flex layout, or fixed container
whether styles are crossed out
whether the selected element changes when you resize the page

What the colored box means

When you select an element, DevTools shows a box model. This is one of the most useful beginner views.

Content = the actual text/image/button
Padding = space inside the element
Border = edge of the element
Margin = space outside the element

If a design feels "off," it is often one of these:

margin is too large
padding is inconsistent
the container is too narrow
the element has a fixed width
mobile spacing was not handled

Beginner things worth checking

Use Elements when:

a page looks broken on mobile
cards overflow horizontally
text wraps weirdly
a button is too small
spacing feels inconsistent
a section is not aligned
the hover state is missing
a modal or dropdown appears in the wrong place

Translate what you see into prompts

Bad prompt:

Fix the mobile layout.

Better prompt:

On mobile at 390px width, the feature cards overflow horizontally. The parent container appears to have a fixed width. Make the cards stack vertically on mobile with 16px spacing and keep the desktop layout unchanged.

Bad prompt:

Make the design cleaner.

Better prompt:

The spacing between the headline, paragraph, and CTA is inconsistent. Normalize the vertical spacing so the paragraph sits closer to the headline and the CTA has clear breathing room below it.

2. Responsive mode: check what AI forgot

AI-generated pages often look good on the first viewport and break elsewhere.

In DevTools, toggle the device toolbar.

Check at least:

390px wide mobile
768px tablet
1024px laptop
your actual desktop width

Look for:

horizontal scrolling
clipped text
buttons too close to the bottom
cards that do not stack
nav items that disappear
sections that become too tall
text that becomes unreadable

Useful prompt:

Test the page at 390px, 768px, and 1024px widths. Fix responsive layout issues without changing the desktop design. Pay special attention to horizontal overflow, CTA placement, and card stacking.

3. Network tab: inspect what happens in the background

The Network tab shows what the page requests from the internet or backend.

This is useful when:

data does not load
login fails
a form does nothing
an image is missing
a dashboard is empty
a button triggers the wrong thing
a page is slow

Open Network. Then refresh the page or click the action you want to test. You will see rows appear. Each row is a request.

What to look at first

Start with:

Name — what was requested
Status — did it work?
Type — was it a document, script, image, fetch/XHR request?
Size — how much data loaded?
Time — how long it took

The most useful status codes:

200 = worked
201 = created successfully
301/302 = redirected
400 = bad request
401 = unauthorized
403 = forbidden
404 = not found
429 = rate limited
500 = server error

Filter to the useful stuff

Most Network tabs look noisy. Filter by:

Fetch/XHR for API calls
Img for missing images
JS if scripts are failing to load

For AI-built apps, Fetch/XHR is usually the most important. That is where you see the app talking to APIs.

Click a request and check these

When you click a Network request, check:

Headers — where did the request go?
Payload — what data did the page send?
Response — what came back?
Preview — easier-to-read response view, if available

You do not need to understand every field. Just ask:

Did the request fire?
Did it go to the right URL?
Did it send the right data?
Did it return the expected data?
Did it fail with a useful error?

Translate Network issues into prompts

Bad prompt:

The submit button does not work.

Better prompt:

When I click submit, the Network tab shows a POST request to /api/contact, but it returns 400. The payload is missing the email field. Update the form submission so it sends name, email, and message correctly, then show a clear validation error if email is empty.

Bad prompt:

The dashboard is blank.

Better prompt:

The dashboard loads, but the Fetch/XHR request for /api/analytics returns 401. Add a proper unauthorized state and check whether the auth token is being attached to the request.

4. Console tab: inspect browser errors

The Console is where the browser tells you what went wrong.

Use it when:

a page looks blank
a button does nothing
an interaction fails
an animation does not run
data is not appearing
the page works locally but not after deployment

Common Console messages:

ReferenceError — something is being used before it exists
TypeError — code expected one type of value but got another
Failed to fetch — a network request failed
CORS error — the browser blocked a request across domains
404 — file or route not found
hydration mismatch — frontend rendered differently than expected

What to copy into AI

Do not paste 200 lines blindly. Copy:

the first real error
the file name if shown
the line number if shown
what action caused it
what you expected to happen

Useful prompt:

When I click the save button, the Console shows: TypeError: Cannot read properties of undefined (reading 'id'). It happens after the API response returns. Find where the response shape is being assumed incorrectly and add a safe fallback.

5. The AI debugging loop

Use this loop:

Try the action
Observe what broke
Check Elements for visual/layout issues
Check Network for request/data issues
Check Console for browser/code errors
Write one specific prompt
Ask AI to fix and explain what changed
Test again

This is the difference between prompting and building.

Prompting is asking. Building is asking, checking, correcting, and testing.

6. What to ignore as a beginner

You do not need to start with:

Sources
Memory
Performance
Lighthouse
Application storage
cookies
service workers
advanced headers
bundle analysis

Those are useful later. For now, your goal is simple:

Can you see what broke clearly enough to explain it?

7. Copy-paste prompt templates

Layout issue

I inspected this page in DevTools.

Issue:
[Describe the visual issue]

Where I saw it:
[Elements tab / responsive mode / specific screen size]

Details:
[Mention spacing, container, width, overflow, alignment, or style issue]

Expected behavior:
[What should happen instead]

Please fix this without changing unrelated parts of the page. Explain what you changed.

API or data issue

I inspected this in the Network tab.

Action:
[What I clicked or loaded]

Request:
[Endpoint or request name]

Status:
[200 / 400 / 401 / 404 / 500 etc.]

What I noticed:
[Payload missing data / response has error / wrong URL / no request fired]

Expected behavior:
[What should happen instead]

Please identify the likely issue and fix it. Add a user-facing loading/error state if needed.

Console error

I inspected this in the Console.

Action:
[What I did before the error appeared]

Error:
[Paste the first real error]

File/line, if available:
[Paste file and line number]

Expected behavior:
[What should have happened]

Please fix the root cause, not just hide the error. Explain what changed.

8. The 15-point checklist

Before asking AI to fix an app or page, check:

What exact action caused the issue?
Is it visual, data-related, or interaction-related?
Does it happen on mobile, desktop, or both?
What screen width did you test?
Is any element overflowing?
Is the wrong container controlling the layout?
Is spacing coming from padding or margin?
Did the expected Network request fire?
Did the request succeed or fail?
What status code did it return?
Did the request send the expected data?
Did the response contain the expected data?
Did the Console show an error?
What was the first real error?
What should have happened instead?

If you can answer even five of these, your AI prompt gets much better.

TL;DR

You do not need to become an engineer to build with AI. But you do need to inspect the output.

Start with:

Elements for structure, layout, spacing, and responsive issues
Network for API calls, data loading, status codes, and failed requests
Console for browser errors

The goal is not to know everything. The goal is to move from vague prompting to clear debugging.

Better observation leads to better prompts. Better prompts lead to better builds.

If this helped, send it to someone trying to build with AI but stuck at "fix this."