[helderberto]

Context

New post on debugging frontend code with browser MCP servers (Chrome DevTools MCP and Playwright MCP). It covers installing them, testing every scenario a customer hits (success, slow, error, performance, accessibility), and migrating legacy code without regressions. The main message is human in the loop: the agent collects evidence and the engineer validates it.

The post describes a working flow, not specific incidents. Examples are prompts and what to check, with a signup form as the running example.

Merging publishes the post. Posts have no draft flag.

Summary

• New post posts/debugging-in-the-agentic-era.md, structured with the revise skill. Sections:
  1. Old Way, New Way
  2. Cover Every Scenario
  3. The Tools (both servers, install, which one when)
  4. Debug Loop
  5. Slow and Failing Requests
  6. Core Web Vitals
  7. Checking Accessibility
  8. Migrating Legacy Code
  9. Limits, Try It
  10. A Tool in the Engineer's Hands
• HITL: callouts in each section mark where the engineer should check the agent's work.
• Four new diagrams in diagrams/, rendered with npm run diagrams: old vs new way, the debug loop, which MCP to use, and migrating without regressions.

flowchart TD
  contract[Write the contract] --> cover[Test the legacy page]
  cover --> migrate[Migrate the code]
  migrate --> pass{Same tests pass?}
  pass -- no --> debug[Debug with DevTools MCP]
  debug --> migrate
  pass -- yes --> review[You review and ship]

Loading

Evidence

• Before: no post.
• After: npm run lint && npm run typecheck && npm run test:coverage && npm run build passes locally. All test files pass, including diagrams.test.ts.
• Checked in the built out/ page at 390px with Playwright:
  • No horizontal scroll.
  • All four diagrams render in light and dark mode, each about 400px wide or less.
  • The scenario table fits at two columns.
  • The table's links match the heading anchors.
• Install commands and flags were checked against the current READMEs and docs of both servers:
  • -y, --scope user, --autoConnect (Chrome 144+), --isolated and --no-performance-crux for Chrome DevTools MCP.
  • --caps=network and browser_route for Playwright MCP.
• Not verified:
  • The commands weren't run against a real app.
  • The Playwright README's options table doesn't list network as a --caps value, though its tools section does.
  • The Playwright and axe test examples weren't run.
  • No desktop screenshots, and no whole-site out/ baseline comparison.

Merge danger

Door: two-way (a revert removes the post)

Blast radius: post

🤖 Generated with Claude Code

https://claude.ai/code/session_011QjqcotR3bQJaCVKg1fVWt

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
website	Ready	Preview	Oct 31, 2026 9:53am UTC