Hover any translated text to see its key, locale, library, default message and translation; the popup shows the translated / fallback / missing breakdown.
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.
It comes from working on multi-brand, multi-language products, where "which key is this text?" is asked many times a day and the answer usually means searching the codebase.
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.