Localization Inspector

About

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.