AI-Assisted Debugging + DevTools
---
theme: seriph
title: AI-Assisted Debugging + DevTools
info: "Module A-DEBUG-001 - console errors, network tab, elements tab, AI debugging prompt pattern"
---
# AI-Assisted Debugging + DevTools
---
# The #1 Debugging Mistake
Many beginners ask AI:
> "Why is my code broken?"
That is like calling a mechanic and saying "my car doesn't work" without describing the sound, the warning light, or when it started.
**Today: learn to give AI the information it needs to actually help you.**
---
# Three DevTools Tabs for Debugging
| Tab | What it tells you | When to check |
|---|---|---|
| **Console** | JavaScript errors + messages | Something doesn't work or nothing happens |
| **Network** | Failed API calls + missing files | Data isn't loading or images are broken |
| **Elements** | Applied CSS rules + overrides | Styling looks wrong |
Open DevTools: `Cmd+Option+I` (Mac) or `F12` (Windows)
---
layout: center
---
# Console Tab
---
# What Console Errors Look Like
When JavaScript breaks, the Console shows a red error:
```
Uncaught TypeError: Cannot read properties of null
(reading 'addEventListener')
at script.js:4:10
```
This tells you **three things**:
1. **What went wrong** - tried to use `.addEventListener` on `null`
2. **Where** - `script.js`, line 4, column 10
3. **Why** - the element you selected doesn't exist (it's `null`)
---
# "Cannot Read Properties of Null"
The most common beginner error. Here's the code that causes it:
```js
const button = document.querySelector('#submit-btn');
button.addEventListener('click', () => {
alert('Clicked!');
});
```
If there is no element with `id="submit-btn"` in your HTML, `querySelector` returns `null`.
Then `null.addEventListener(...)` crashes.
---
# Why Does This Happen?
Three common reasons:
1. **Typo in the selector** - HTML says `id="submitBtn"`, JS says `#submit-btn`
2. **Script runs before the HTML loads** - your `<script>` tag is in `<head>` without `defer`
3. **The element doesn't exist yet** - it gets added later by other code
**The fix depends on the cause.** The error alone doesn't tell you which one. You need to investigate.
---
# Reading Any Console Error
Every console error follows this pattern:
```
[Error Type]: [What happened]
at [file]:[line]:[column]
```
Before asking AI for help, write down:
1. The **full error message** (copy-paste it)
2. The **file and line number**
3. What the code on that line is doing
---
layout: center
---
# Network Tab
---
# When Data Doesn't Load
Your page calls an API but nothing shows up. No console error. What now?
Open the **Network** tab, then refresh the page.
Look for requests highlighted in **red** - those failed.
---
# Anatomy of a Failed Fetch
```
Name: api/weather
Status: 404 Not Found
Type: fetch
```
The code:
```js
const response = await fetch('/api/weather');
const data = await response.json();
```
A `404` means the URL is wrong. The server has no endpoint at `/api/weather`.
**Common status codes:**
- `404` - wrong URL path
- `500` - server crashed (not your fault, but your problem)
- `403` - not authorized (missing API key?)
- `CORS error` - the server blocks requests from your domain
---
# Network Tab Workflow
1. Open **Network** tab
2. Refresh the page (or trigger the action)
3. Look for red rows or non-200 status codes
4. Click the failed request
5. Check the **Response** sub-tab for error details
> The Network tab shows you problems that the Console won't.
---
layout: center
---
# Elements Tab
---
# When CSS Doesn't Work
You wrote this CSS:
```css
.card {
background-color: blue;
}
```
But the card is white. Why?
---
# CSS Overrides in DevTools
1. Right-click the element → **Inspect**
2. Look at the **Styles** panel on the right
3. Find your rule - is it there?
4. Look for ~~strikethrough~~ text - that means another rule overrides yours
```
element.style {
background-color: white; /* inline style wins */
}
.card {
background-color: blue; /* your rule, crossed out */
}
```
An inline `style` attribute beats a class selector. A more specific selector beats a less specific one.
---
# Common CSS Override Situations
| What you see in Elements | What it means |
|---|---|
| Your rule is ~~crossed out~~ | A more specific rule overrides it |
| Your rule isn't listed at all | The selector doesn't match the element |
| The property has a yellow warning | Invalid CSS value |
| `element.style` overrides your class | An inline `style=""` or JavaScript is setting the style |
**The Elements tab shows you exactly which rule wins and why.**
---
layout: center
---
# The AI Debugging Prompt Pattern
---
# Bad vs. Good Debugging Prompts
**Bad prompt:**
> "My JavaScript isn't working. Can you fix it?"
AI has no idea what "isn't working" means. It will guess, and probably guess wrong.
---
# The Three-Part Debugging Prompt
Every debugging prompt to AI should include:
1. **The error** - the exact console error or the unexpected behavior
2. **The code** - the relevant file or function (not your entire project)
3. **What you expected** - what should have happened
This is the pattern. Memorize it.
---
# Example: Good Debugging Prompt
> I'm getting this error in the browser console:
>
> ```
> Uncaught TypeError: Cannot read properties of null
> (reading 'addEventListener')
> at script.js:4:10
> ```
>
> Here is my JavaScript:
> ```js
> const button = document.querySelector('#submit-btn');
> button.addEventListener('click', () => {
> alert('Clicked!');
> });
> ```
>
> And the relevant HTML:
> ```html
> <button id="submitBtn">Submit</button>
> ```
>
> I expected the button click to show an alert.
AI will immediately spot the `id` mismatch: `submit-btn` vs `submitBtn`.
---
# Example: Network Error Prompt
> My fetch call returns no data. The Network tab shows:
>
> ```
> GET https://api.example.com/wether - 404 Not Found
> ```
>
> Here's my code:
> ```js
> const response = await fetch('https://api.example.com/wether');
> const data = await response.json();
> ```
>
> I expected to get weather data back as JSON.
AI will notice the typo: `wether` instead of `weather`.
---
# Example: CSS Override Prompt
> My card background should be blue, but it's showing white.
> In the Elements tab, I can see my `.card` rule is crossed out
> and `element.style` has `background-color: white`.
>
> CSS:
> ```css
> .card { background-color: blue; }
> ```
>
> HTML:
> ```html
> <div class="card" style="background-color: white;">
> Content here
> </div>
> ```
>
> How do I make the blue background apply?
AI will explain that the inline `style` attribute overrides the class, and suggest removing it.
---
# The Prompt Pattern Checklist
Before pasting into ChatGPT, Claude, or Copilot, check:
- [ ] Did I include the **exact error message** (copy-pasted, not paraphrased)?
- [ ] Did I include the **relevant code** (not the entire project)?
- [ ] Did I describe **what I expected** to happen?
- [ ] Did I say **what actually happened** instead?
If you skip any of these, AI will ask you for them anyway. Save a round trip.
---
# Your Turn
Download `debug-practice.html` from the course website. It has three bugs.
1. Open the file in your browser and open DevTools (`F12`)
2. Check the **Console** tab for JavaScript errors
3. Check the **Elements** tab for CSS problems
4. For each bug, write down: the error, the line, and what you think is wrong
5. Write a debugging prompt for AI using the three-part pattern (error + code + expected behavior)
6. Save your fixed version as `debug-practice-fixed.html`
> AI tip: Paste the exact console error into your prompt. AI can diagnose faster with the real message than with your summary.
---
# Key Takeaways
1. **Console** shows JavaScript errors - read the message, file, and line number
2. **Network** shows failed requests - check status codes and URLs
3. **Elements** shows CSS overrides - look for crossed-out rules
4. The debugging prompt pattern: **error + code + expected behavior**
5. Copy-paste errors exactly. Never paraphrase an error message.
Topics Covered
- console errors and what they say
- Network tab for fetch failures
- Elements tab for CSS overrides
- the AI debugging prompt pattern (error + code + expected)
Content Slides Open fullscreen ↗
Taught In
- Monday, 6/15 — MP1 showcase · JS variables, types, functions · AI debugging