# knobs > knobs is a dev-only panel inside the page that shows your site on an iPhone or a Pixel, tomorrow morning, in Arabic or in dark mode. It emulates devices, locales, time, color schemes, network and motion settings from inside the page. Grab hands a coding agent an element with its html, components and source places, and an agent api lets a browser tool drive the knobs. A Chrome extension puts the same panel on any site and sets some knobs for real. - [npm](https://www.npmjs.com/package/@vinena/knobs): the @vinena/knobs package - [Chrome Web Store](https://chromewebstore.google.com/detail/knobs/cpdmafeojnbdnnhldafobkaajiemcidj): the knobs extension - [GitHub](https://github.com/vinenastudio/knobs): the source of the package, the extension and this site The full reference for agents, then the text of every page: [llms-full.txt](https://knobs.dev/llms-full.txt) ## Pages - [knobs: test your site on any device, locale and time](https://knobs.dev/): knobs is a free dev panel inside your page. See your site on an iPhone or a Pixel, in Arabic or dark mode, tomorrow morning, with no code to change. ## Docs - [Install knobs: set up the knobs dev panel in your app](https://knobs.dev/docs/start): Install @vinena/knobs from npm, mount the knobs panel in development only, and load the early script for pages that read media queries or the time on load. - [The knobs panel: open, move, search and pin your knobs](https://knobs.dev/docs/panel): Open the knobs panel with Shift K, move it along the window edge, search every knob by name or value, pin the ones you use, and change its shortcuts. - [Every knobs knob: dark mode, locale, time zone and more](https://knobs.dev/docs/knobs): Every knob knobs has and what it does to the page: color scheme, reduced motion, text size, locale, time zone, clock, geolocation, user agent and viewport. - [Device presets in knobs: iPhone, Pixel, iPad and laptop](https://knobs.dev/docs/devices): iPhone, Pixel, iPad and laptop presets for knobs, drawn with each maker's own bezel and the phone's browser around your page, in portrait or landscape. - [Grab and inspect elements for a coding agent with knobs](https://knobs.dev/docs/grab): Grab any element on the page and copy its html, the components that rendered it and their source files for a coding agent, or inspect its box and css. - [See network requests and edit storage with the knobs panel](https://knobs.dev/docs/requests-and-storage): See every request the page makes, laid out like the Chrome DevTools network panel, and read, edit and save local storage, session storage and cookies. - [Drive knobs from a coding agent with Playwright or MCP](https://knobs.dev/docs/agents): Let a coding agent drive knobs from a browser tool like Playwright or the Chrome DevTools MCP: set knobs, wait for the page, grab what broke and fix it. - [knobs Chrome extension: the knobs panel on any website](https://knobs.dev/docs/extension): The knobs Chrome extension puts the same panel on any site you open in Chrome or Edge, with no change to its code, and has Chrome set some knobs for real. - [knobs limits and FAQ: what a page panel cannot fake](https://knobs.dev/docs/limits): What knobs cannot fake from inside a page, such as cross-origin stylesheets, worker time zones and real touch, and answers to common questions about it. - [knobs privacy: what the panel, extension and site collect](https://knobs.dev/docs/privacy): What the knobs npm package, the Chrome extension and the knobs.dev site keep and send: no telemetry in the panel, and page views and clicks on the site only. ## Blog - [knobs blog: testing sites on devices, locales and time](https://knobs.dev/blog): Guides from the makers of knobs on testing a website on phones, in dark mode, in other time zones and right to left, from your own desktop. - [How to test dark mode, time zones and RTL on your site](https://knobs.dev/blog/test-dark-mode-time-zones-rtl): Emulate prefers-color-scheme, change the time zone and locale in Chrome DevTools, and test right-to-left layouts. Exact steps and their limits. - [How to test your website on mobile devices from your desktop](https://knobs.dev/blog/test-website-on-mobile-devices): Test a site on phones from your computer: Chrome and Safari device modes, iOS Simulator, Android emulator, your phone over Wi-Fi, and their limits. ## Use cases - [knobs use cases: what each knob tests and how to set it](https://knobs.dev/use): One page per knob: what it does, how to turn it on in the Chrome extension or in your own app, its options and limits, and how an agent drives it. - [Color blindness simulator: emulate vision deficiencies](https://knobs.dev/use/color-blindness-simulator): A color blindness simulator for your web page. The knobs vision knob draws protanopia, deuteranopia, tritanopia, achromatopsia or a blur over it. - [User agent switcher for Chrome and your own dev app](https://knobs.dev/use/user-agent-switcher): A user agent switcher in the knobs panel. Pick iPhone Safari, Googlebot or a custom string, and the page's navigator reads it. The extension sends it too. - [Fake geolocation: spoof navigator.geolocation in a page](https://knobs.dev/use/fake-geolocation): Spoof geolocation for a web page with the knobs geolocation knob: a city, your own coordinates or a route, plus denied, unavailable and timeout errors. - [Reduced motion test: emulate prefers-reduced-motion](https://knobs.dev/use/reduced-motion): Test reduced motion on any page with the knobs reduced motion knob. It sets prefers-reduced-motion for your CSS and matchMedia, and can slow animations. - [Dark mode test: emulate prefers-color-scheme in the page](https://knobs.dev/use/dark-mode): Test dark mode on any page with the knobs color scheme knob. It sets prefers-color-scheme for your CSS, matchMedia and light-dark() in the page. - [Change the time zone and fake the date for testing](https://knobs.dev/use/time-zone): Change the time zone and fake the date for testing with the knobs time zone and clock knobs: any IANA zone, a jump ahead, a frozen or faster clock. - [Pseudo localization for i18n testing in any web page](https://knobs.dev/use/pseudolocalization): Pseudo localization for i18n testing. The knobs pseudo knob turns a page's text into accented, padded, bracketed strings and puts it back when off. - [RTL layout test: right to left testing in any web page](https://knobs.dev/use/rtl): RTL testing for any web page with the knobs locale knob. It sets lang and dir on html and the default locale of Intl, so the layout runs right to left. - [Mobile simulator in Chrome: iPhone, Pixel and iPad frames](https://knobs.dev/use/mobile-simulator): A mobile simulator for your pages. The knobs device knob shows a page on an iPhone, Pixel or iPad, in a real viewport with the phone's body and browser. - [Window sizes: a responsive viewer for your breakpoints](https://knobs.dev/use/window-sizes): Test window sizes with the knobs width and height knobs. The page runs in a frame of that size, so media queries, vw units and container queries follow. ## Comparisons - [knobs comparisons: facts beside five other dev tools](https://knobs.dev/compare): Facts on knobs beside Polypane, Responsively App, Sizzy, Responsive Viewer and Chrome DevTools: price, platform, license and each feature, with sources. - [knobs vs Polypane: price, platform and features compared](https://knobs.dev/compare/polypane): knobs and Polypane side by side: price, platform and each feature, taken from the vendors' own pages. Facts only, checked on 2026-11-13. - [knobs vs Responsively App: platform and features compared](https://knobs.dev/compare/responsively): knobs and Responsively App side by side: price, platform, license and each feature, from their own pages and code. Facts only, checked on 2026-11-13. - [knobs vs Sizzy: price, platform and features side by side](https://knobs.dev/compare/sizzy): knobs and Sizzy side by side: price, platform and each feature, taken from the vendors' own pages. Facts only, checked on 2026-11-13. - [knobs vs Responsive Viewer: two Chrome extensions compared](https://knobs.dev/compare/responsive-viewer): knobs and Responsive Viewer side by side: price, platform, license and each feature, from their own pages. Facts only, checked on 2026-11-13. - [knobs vs Chrome DevTools device mode and emulation compared](https://knobs.dev/compare/chrome-devtools): knobs and Chrome DevTools side by side: device mode, rendering emulation, sensors and agent access, from their own docs. Facts only, checked on 2026-11-13.