Default output: return only the result, blockers, and required evidence. Omit preambles, process narration, repeated context, confidence scores, and follow-up offers. Use at most five bullets unless a required artifact or schema needs more.
Browser Testing with DevTools
Overview
Use browser DevTools to verify runtime behavior, debug issues, and measure performance. DevTools provides ground truth that code review and unit tests cannot.
When to Use
- Verifying that a UI component renders correctly
- Debugging layout, styling, or interaction issues
- Measuring page load performance
- Inspecting network requests and responses
- Profiling JavaScript execution
DevTools Capabilities
Elements Panel
- Inspect DOM structure
- Verify CSS properties and computed styles
- Check accessibility properties
- Debug layout issues (box model, flex, grid)
Console Panel
- View runtime errors and warnings
- Execute debugging expressions
- Monitor custom log output
- Check network-related errors
Network Panel
- Inspect HTTP requests and responses
- Verify request headers, payloads, and status codes
- Check timing and waterfall for performance
- Identify unnecessary or failed requests
Performance Panel
- Record and analyze runtime performance
- Identify long tasks blocking the main thread
- Check rendering performance (layout thrash, paint storms)
- Profile memory usage and leaks
Application Panel
- Inspect localStorage, sessionStorage, cookies
- Verify service worker status
- Check indexedDB contents
- Review cached resources
Process
Step 1: Open DevTools
- Chrome: F12 or Cmd+Option+I
- Navigate to the relevant panel for the task
Step 2: Reproduce the Scenario
- Navigate to the affected page or component
- Trigger the user action that needs verification
- Observe the result in the relevant panel
Step 3: Collect Evidence
- Screenshots of rendering issues
- Console output for errors and warnings
- Network requests for API-related issues
- Performance traces for speed issues
Step 4: Analyze and Fix
- Identify the root cause from the evidence
- Make the fix
- Verify the fix in DevTools
- Document the issue and resolution
Common Rationalizations
| Rationalization |
Reality |
| "It looks fine in the code" |
Code can look correct and still render incorrectly due to CSS specificity, browser bugs, or dynamic state. |
| "Unit tests cover this" |
Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |
| "DevTools is too slow to use regularly" |
A 30-second DevTools check catches issues that take hours to debug later. |
Verification
Anti-Rationalization Table
| Excuse |
Counter |
| "It looks fine in the code" |
Code can be correct and still render incorrectly due to CSS, browser bugs, or dynamic state. |
| "Unit tests cover this" |
Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |
| "DevTools is too slow to use regularly" |
A 30-second DevTools check catches issues that take hours to debug later. |
| "I'll test it in production" |
Production is not a testing environment. Catch issues before users do. |
| "The performance numbers look good on my machine" |
Your machine is not your users' machine. Profile on realistic hardware and network conditions. |
1---2name: browser-testing-with-devtools3description: Chrome DevTools for live runtime data: DOM inspection, console logs, network traces, performance profiling. Use when building or debugging anything in a browser.4---56Default output: return only the result, blockers, and required evidence. Omit preambles, process narration, repeated context, confidence scores, and follow-up offers. Use at most five bullets unless a required artifact or schema needs more.78# Browser Testing with DevTools910## Overview1112Use browser DevTools to verify runtime behavior, debug issues, and measure performance. DevTools provides ground truth that code review and unit tests cannot.1314## When to Use1516- Verifying that a UI component renders correctly17- Debugging layout, styling, or interaction issues18- Measuring page load performance19- Inspecting network requests and responses20- Profiling JavaScript execution2122## DevTools Capabilities2324### Elements Panel2526- Inspect DOM structure27- Verify CSS properties and computed styles28- Check accessibility properties29- Debug layout issues (box model, flex, grid)3031### Console Panel3233- View runtime errors and warnings34- Execute debugging expressions35- Monitor custom log output36- Check network-related errors3738### Network Panel3940- Inspect HTTP requests and responses41- Verify request headers, payloads, and status codes42- Check timing and waterfall for performance43- Identify unnecessary or failed requests4445### Performance Panel4647- Record and analyze runtime performance48- Identify long tasks blocking the main thread49- Check rendering performance (layout thrash, paint storms)50- Profile memory usage and leaks5152### Application Panel5354- Inspect localStorage, sessionStorage, cookies55- Verify service worker status56- Check indexedDB contents57- Review cached resources5859## Process6061### Step 1: Open DevTools6263- Chrome: F12 or Cmd+Option+I64- Navigate to the relevant panel for the task6566### Step 2: Reproduce the Scenario6768- Navigate to the affected page or component69- Trigger the user action that needs verification70- Observe the result in the relevant panel7172### Step 3: Collect Evidence7374- Screenshots of rendering issues75- Console output for errors and warnings76- Network requests for API-related issues77- Performance traces for speed issues7879### Step 4: Analyze and Fix8081- Identify the root cause from the evidence82- Make the fix83- Verify the fix in DevTools84- Document the issue and resolution8586## Common Rationalizations8788| Rationalization | Reality |89|---|---|90| "It looks fine in the code" | Code can look correct and still render incorrectly due to CSS specificity, browser bugs, or dynamic state. |91| "Unit tests cover this" | Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |92| "DevTools is too slow to use regularly" | A 30-second DevTools check catches issues that take hours to debug later. |9394## Verification9596- [ ] Component renders correctly in the browser97- [ ] No console errors or warnings98- [ ] Network requests succeed with correct payloads99- [ ] Performance meets acceptable thresholds100- [ ] Accessibility properties are correct in the DOM101102## Anti-Rationalization Table103104| Excuse | Counter |105|--------|---------|106| "It looks fine in the code" | Code can be correct and still render incorrectly due to CSS, browser bugs, or dynamic state. |107| "Unit tests cover this" | Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |108| "DevTools is too slow to use regularly" | A 30-second DevTools check catches issues that take hours to debug later. |109| "I'll test it in production" | Production is not a testing environment. Catch issues before users do. |110| "The performance numbers look good on my machine" | Your machine is not your users' machine. Profile on realistic hardware and network conditions. |
v1truv1us