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."4metadata:5 category: user-invoked6disable-model-invocation: true7---89Default 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.1011# Browser Testing with DevTools1213## Overview1415Use browser DevTools to verify runtime behavior, debug issues, and measure performance. DevTools provides ground truth that code review and unit tests cannot.1617## When to Use1819- Verifying that a UI component renders correctly20- Debugging layout, styling, or interaction issues21- Measuring page load performance22- Inspecting network requests and responses23- Profiling JavaScript execution2425## DevTools Capabilities2627### Elements Panel2829- Inspect DOM structure30- Verify CSS properties and computed styles31- Check accessibility properties32- Debug layout issues (box model, flex, grid)3334### Console Panel3536- View runtime errors and warnings37- Execute debugging expressions38- Monitor custom log output39- Check network-related errors4041### Network Panel4243- Inspect HTTP requests and responses44- Verify request headers, payloads, and status codes45- Check timing and waterfall for performance46- Identify unnecessary or failed requests4748### Performance Panel4950- Record and analyze runtime performance51- Identify long tasks blocking the main thread52- Check rendering performance (layout thrash, paint storms)53- Profile memory usage and leaks5455### Application Panel5657- Inspect localStorage, sessionStorage, cookies58- Verify service worker status59- Check indexedDB contents60- Review cached resources6162## Process6364### Step 1: Open DevTools6566- Chrome: F12 or Cmd+Option+I67- Navigate to the relevant panel for the task6869### Step 2: Reproduce the Scenario7071- Navigate to the affected page or component72- Trigger the user action that needs verification73- Observe the result in the relevant panel7475### Step 3: Collect Evidence7677- Screenshots of rendering issues78- Console output for errors and warnings79- Network requests for API-related issues80- Performance traces for speed issues8182### Step 4: Analyze and Fix8384- Identify the root cause from the evidence85- Make the fix86- Verify the fix in DevTools87- Document the issue and resolution8889## Common Rationalizations9091| Rationalization | Reality |92|---|---|93| "It looks fine in the code" | Code can look correct and still render incorrectly due to CSS specificity, browser bugs, or dynamic state. |94| "Unit tests cover this" | Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |95| "DevTools is too slow to use regularly" | A 30-second DevTools check catches issues that take hours to debug later. |9697## Verification9899- [ ] Component renders correctly in the browser100- [ ] No console errors or warnings101- [ ] Network requests succeed with correct payloads102- [ ] Performance meets acceptable thresholds103- [ ] Accessibility properties are correct in the DOM104105## Anti-Rationalization Table106107| Excuse | Counter |108|--------|---------|109| "It looks fine in the code" | Code can be correct and still render incorrectly due to CSS, browser bugs, or dynamic state. |110| "Unit tests cover this" | Unit tests cannot catch rendering issues, layout bugs, or network timing problems. |111| "DevTools is too slow to use regularly" | A 30-second DevTools check catches issues that take hours to debug later. |112| "I'll test it in production" | Production is not a testing environment. Catch issues before users do. |113| "The performance numbers look good on my machine" | Your machine is not your users' machine. Profile on realistic hardware and network conditions. |
v1truv1us