Chrome extension
The breakhound extension runs the same checks on the tab you have open, with nothing to install in your project. Get it from the Chrome Web Store; it works on any page Chrome can open, from localhost to production. For a page opened from a file (file://), Chrome asks you to turn on Allow access to file URLs for breakhound once; the panel has a button that takes you there. The quickest way in is to right-click the page and choose Scan with breakhound: the breakhound panel opens in Chrome's side panel and starts right away. Clicking the breakhound icon in the toolbar opens it ready to scan, and the same panel is a breakhound tab in DevTools. The page grows steadily from 320px to 1920px (or the widths you set) while the timeline fills in live: each run of widths that share a layout, every width where the layout changes, and where something breaks. Then you get:
- the issues, each with its exact width ranges, the element, the numbers and the likely fix
- the timeline: the layout bands, the media query widths, the changes no media or container query explains, and a bar for each issue across the widths it covers
To check only some screens, pick Mobile (320 to 599px), Tablet (600 to 1023px) or Desktop (1024 to 1920px) next to the widths. Pick a neighbour as well to check both, so Mobile and Tablet is 320 to 1023px; All goes back to every width. They only fill in the two width fields, so you can still type any range you like, and a smaller range scans faster.
Drag across the timeline to resize the page live, click anywhere on it to jump to a width, or use the arrow keys to nudge a pixel at a time. Widths wider than the tab are zoomed out to fit, like DevTools' device mode, so a 1920px layout is shown whole, and the page refits when you drag DevTools bigger or smaller. If you press Cancel on Chrome's debugging bar, the tab goes back to its own width and breakhound's outlines disappear. Click an issue to see the page at the width where it's worst, with the element outlined. Select in Elements jumps to the element, and Copy prompt gives your coding agent the same instructions breakhound prompt would. (Select in Elements is only in the DevTools tab, since only DevTools has an Elements panel.) It finds what the CLI finds on the same page, since both run the same code.
While it scans or shows a width, Chrome displays a bar saying breakhound started debugging this browser: that is how an extension resizes a tab. The bar goes away afterwards, and the tab goes back to its own width and scroll position. Reload first reloads the page before scanning, so breakhound can wait for the page's own resize handlers exactly, as the CLI does. Leave it off to scan the page as you have it.
Whole site scans every page of the site, starting from the one you're on. breakhound finds the pages the way the CLI does: from the app's live router when it has one (Vue, React Router, Nuxt, Remix, TanStack), otherwise by following links from the page you're on and the home page (never a logout, delete or file link, and a few pages per section, since blog posts share a layout), up to 25 pages. It loads each one in the same tab, scans it, and comes back to where you were. Chrome stops drawing a tab that's out of view, so if you switch away while it runs, the scan pauses and carries on by itself when you come back. Your own login applies, so pages behind it are scanned too. Each page gets a chip with its issue count; an issue shared by several pages is counted once, and Copy prompt lists it once with every page it's on. Showing an issue from another page takes the tab there first.
Send to agent hands the issues to the coding agent working on that app, so it can fix them and check each fix in your browser. See From the browser.
Routes only your project's files list (Next.js, SvelteKit and Astro route folders) need the CLI, as do menus opened, other browsers, screenshots and reports.