Let Claude Code
Debug For You
Headless WordPress + Next.js Caching Issue
Playwright MCP
Claude Chrome Extension
The Problem
Content changes in WordPress
not showing on frontend
Standard headless WordPress + Next.js setup
The Old Way
I could have spent hours trying everything...
✗ Reduce ISR timing
✗ Add fetch revalidation
✗ Use cache: 'no-store'
✗ Force dynamic rendering
✗ Read Stack Overflow
✗ Trial and error
Debugging blindly. Guessing. Hoping.
Or I Could Just Ask
Claude Code
Let AI see what I can't see
The Tools
Browser superpowers for Claude
Step 1: Just Ask
My Prompt
"My WordPress content changes are not updating on the Next.js frontend. Can you use the Playwright MCP to debug the problem."
That's it. That's the whole prompt.
Step 2: Claude Investigates
🔍
Opens the WordPress REST API endpoint directly
📡
Inspects the Network tab in DevTools
📋
Reads the response headers
Claude does the detective work
Step 3: Claude Finds It
"It's not Next.js. It's your CDN."
Flywheel uses Fastly CDN - it was caching API responses
Step 4: Claude Explains
Next.js
→
CDN (Fastly)
Caching here!
→
WordPress
The CDN sits between Next.js and WordPress
Even cache: 'no-store' can't bypass upstream caching
Step 5: Claude Fixes It
const separator = endpoint.includes('?') ? '&' : '?';
const url = `${apiUrl}${endpoint}${separator}_t=${Date.now()}`;
Claude wrote this. I just approved it.
Why This Works
👁️
Sees the Network Layer
Headers, responses, cache indicators you'd miss
🔗
Understands the Stack
Knows how CDNs, Next.js, and WordPress interact
⚡
Doesn't Guess
Investigates first, then provides solutions
✍️
Writes the Fix
Not just diagnosis - actual working code
Your Debugging Toolkit
Give Claude eyes into your browser
Try It Yourself
1
Install the Tools
Playwright MCP + Claude Chrome Extension
2
Hit a Bug
Any frontend issue, API problem, caching mystery
3
Ask Claude
Describe the problem. Let Claude investigate.
✓
Get the Fix
Claude finds it, explains it, fixes it
Stop debugging blindly. Let Claude see for you.