knobs

The knobs panel on any page, with text size, offline, media preferences, viewport and user agent set for real by Chrome.

knobs puts a small panel on any page you open, so you can see how the page behaves under other settings without changing its code: text size, light and dark, contrast, reduced motion and transparency, offline, the viewport and phone sizes, the user agent, the locale, the time zone, the clock and more. It is the same panel as the @vinena/knobs npm package. Some knobs are set for real by Chrome instead of being imitated inside the page: - Text size changes the browser's default font size, so rem and em units and em media queries follow with no rewrite of the page. - Offline really cuts the tab's network. - Color scheme, contrast, reduced motion and reduced transparency reach every media query of the tab. - A plain width or a phone with nothing drawn around it becomes the tab's own viewport, with touch, and nothing reloads. - The user agent and its client hints go out on every request of the tab, so servers see the browser you picked. Real or in-page: the real knobs use Chrome's debugger, so Chrome shows its "started debugging this browser" bar while one is set. A switch in the panel's settings turns that off, and then every knob except the user agent is imitated in the page, as the npm package does it, with no bar. The user agent is always set by a request rule, which shows no bar. The panel also has the views a front end developer reaches for: grab (click an element to copy its html, the components that rendered it and where they live in the code, for a coding agent), inspect, a requests view laid out like the browser's network panel, storage, replay animations, and a phone or foldable drawn around the page. 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, and of what that page's service worker fetches from its own host. While the panel's width frame is open, frames of the page's own host in that tab load without X-Frame-Options and Content-Security-Policy, so the page can show inside the frame. Privacy: the extension sends nothing to the developer or any third party, and has no analytics. The panel's only requests go to the page you are on: its bundles and source maps for grab, its fonts, and a second load of the page in the frame. The device images ship in the extension. The extension keeps its settings in Chrome's storage on your computer, and the panel keeps its settings under devknobs keys in that page's own storage. Privacy policy: https://knobs.dev/docs/privacy Docs: https://knobs.dev/docs/extension Source: https://github.com/vinenastudio/knobs