StyleX DevTools

Inspect StyleX-applied styles and their sources in the Elements panel.

DevTools extension that gives you a custom "Styles" panel while exploring various elements which is optimized for atomic styles. Features for any kind of atomic Styles: - Instead of organizing styles by selector, styles are organized by property - Editing styles works reliability to only override styles on the current element. Avoid accidentally editing styles for elements globally. - Editing styles suggests styles that already exist letting you easily swap classNames - When using a new styles not in your CSS file, inline styles are used. - Easily resent style overrides Features specifically for StyleX: - Detect the `data-style-src` attributes on elements in StyleX dev mode to see the source of styles - Single click to jump to the relevant JS/TS file within dev tools - See the style objects actually applied in the exact order they are applied