Media
2 items
Description
Shows translation keys (react-intl, i18next) as tooltips and overlays without modifying project code. Localization Inspector is a developer tool for finding and fixing translation issues in React apps - without touching your source code or adding build steps. The extension hooks into React's fiber tree at runtime and surfaces translation metadata directly on the page. HOVER TOOLTIPS Hover over any translated element to instantly see: - Translation key - Current locale - Source library (react-intl or i18next) - Default message - Resolved translation Missing or fallback keys are highlighted in amber and red so problems are impossible to miss. OVERLAY MODE Enable "Show all keys" to float a status badge over every translated element on the page at once. Badges are color-coded: - Green - translated - Amber - fallback - Red - missing Get a full coverage map of your localization in one glance. SUPPORTED LIBRARIES - react-intl (FormattedMessage, IntlProvider) - i18next / react-i18next (Trans, I18nextProvider) HOW IT WORKS The extension installs a custom React DevTools global hook before React initializes. On every commit it walks the fiber tree, reads translation props, and tags DOM nodes with status attributes - zero changes to your codebase, zero runtime dependencies. PER-DOMAIN CONTROL Enable or disable the extension per domain. Settings persist across sessions via Chrome storage and sync instantly to all open tabs on that domain. PRIVACY No data ever leaves your browser. The extension reads only the DOM and React internals of the active tab. Nothing is collected, stored remotely, or transmitted anywhere.