Use cases
- Color blindness simulatorA color blindness simulator for your web page. The knobs vision knob draws protanopia, deuteranopia, tritanopia, achromatopsia or a blur over it.
- User agent switcherA 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 geolocationSpoof 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 testTest 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 testTest 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.
- Time zone and clockChange 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.
- PseudolocalizationPseudo 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 testRTL 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 simulatorA 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 sizesTest 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.
How knobs compares with Polypane, Responsively App, Sizzy, Responsive Viewer and Chrome DevTools