breakhound

Find responsive layout bugs at the exact widths they break. Right-click any page to scan it.

breakhound finds where your layout breaks across every screen width, and tells you why. Right-click any page and choose "Scan with breakhound", or open the breakhound tab in Chrome DevTools. It grows the page from 320px to 1920px in your own tab and measures every width, so you see the exact range where something goes wrong, not just the few device sizes you remembered to check. What it finds: - Pages that scroll sideways, and content cut off at the screen edge - Content spilling out of cards and boxes, and images that don't shrink - Elements overlapping each other - Nav rows and buttons wrapping onto extra lines - Text clipped, squeezed, too small to read, or left at its desktop size on phones - Tap targets too small for a finger, and text pressed against the edge of a phone screen - Every width where the layout changes, and the changes no media query explains How it works: - A timeline of every width. Drag across it to resize the page live. - Click an issue to see the page at the width where it's worst, with the element outlined. - Pick Mobile, Tablet or Desktop to check only the screens you care about. - Scan one page, or the whole site: pages come from your app's router or its links. - Works on localhost, staging and live sites, and on pages behind your own login. - In the DevTools tab, "Select in Elements" jumps straight to the element. Fix it with your coding agent: - "Copy prompt" gives Claude Code, Cursor, Copilot or any agent everything it needs to fix the issues. - "Send to agent" hands the issues to the agent working on your app, through breakhound's free command line tool (npx @seybel/breakhound mcp install). The agent then checks its fixes in your browser. Free and open source (MIT). No account, no tracking, nothing sent anywhere. Docs: https://seybel.github.io/breakhound/ Source: https://github.com/Seybel/breakhound