knobs: Dark Mode, Responsive and Accessibility Tester for Developers

Test dark mode, mobile view, reduced motion, text size, locale, time zone, geolocation and user agent on any page from one panel.

knobs is a free, open source panel for web developers and designers. Open any page and test how it looks in dark mode, on a phone, with reduced motion, with larger text, in another language or in another time zone. You do not change your system settings or your code. WHAT YOU CAN TEST Look and accessibility - Dark mode and light mode (prefers-color-scheme), per tab - Reduced motion (prefers-reduced-motion), animation speed and replay - Higher contrast (prefers-contrast) and reduced transparency - Text size and text spacing - Color blindness filters: protanopia, deuteranopia, tritanopia, achromatopsia, and blur Devices and responsive design - Any width or height, with touch, so your breakpoints really change - Phone, tablet and laptop sizes, with a device frame drawn around the page if you want one - A user agent switcher, so the server sees that browser. The Chromium presets (Chrome, Edge, Googlebot) also set the client hints; Safari, Firefox and a custom string send none Language, place and time - Any locale, with right-to-left (RTL) or left-to-right text direction - Pseudolocalization, to find text that does not fit - Geolocation from city presets or your own coordinates - Time zone and the page clock: a different zone, a time offset, or a stopped clock Network - Offline, to see how the page acts with no connection SET FOR REAL BY CHROME Some knobs are set by Chrome itself, not imitated in the page: - Text size changes the browser's default font size, so rem and em units and em media queries follow. - Offline really cuts the tab's network. - Color scheme, contrast, reduced motion and reduced transparency reach every media query of the tab. - A width or a phone becomes the tab's own viewport, with touch, and nothing reloads. This is only when no device frame is drawn around the page: with a frame, the page shows inside it. For this, knobs uses Chrome's debugger, so Chrome shows its "started debugging this browser" bar while one of these knobs is set. If you do not want the bar, turn off "real browser settings" in the panel. Then every knob except the user agent is imitated inside the page. The user agent is always set by a request rule, which shows no bar. TOOLS FOR YOUR WORK - Grab: click an element to copy its html, the components that rendered it and their source files, ready to paste to a coding agent - Inspect an element - Requests, laid out like the network panel in Chrome DevTools - Storage - A key to open and close the panel: ⇧K HOW TO START 1. Add knobs to Chrome. 2. Open the page you are building, also on localhost. 3. Click the knobs icon and set a knob. The page changes at once. WHAT SERVERS SEE Nothing changes until you set a knob. The user agent knob changes the User-Agent and client hint headers of that tab's requests to its own host, never those of a service worker or another tab. A device in the frame changes none, unless real phone mode is on: then the frame's own page loads in that tab carry the device's. While the panel's width frame is open, frames of the page's own host in that tab load without X-Frame-Options, and without a Content-Security-Policy whose frame-ancestors refuses the page, so the page can show inside the frame. PRIVACY The extension sends nothing to us or any third party, and has no analytics. The panel's requests go to the page you are on: its bundles and source maps for grab, and a second load of the page in the frame. To draw a picture of the page while a folding phone folds, it also fetches the font files the page has loaded, from the addresses the page uses, which can be on other hosts, such as a font service. The device images ship in the extension. Settings stay in Chrome's storage on your computer and in that page's own storage. Privacy policy: https://knobs.dev/docs/privacy ALSO AS AN NPM PACKAGE The same panel ships as the npm package @vinena/knobs. Add it to your own app in development, and the panel opens there for your whole team, with no extension. Docs: https://knobs.dev/docs/extension Source (MIT license): https://github.com/vinenastudio/knobs Made by Vinena Studio.