Devtools

When something shows the wrong text, you want one answer: what key is this, and where did it come from? The verbaly/devtools overlay answers it in the browser.

Attach the inspector

Import it only in development: it's a separate chunk, tree-shaken out of production builds.

if (import.meta.env.DEV) {
  const { attachDevtools } = await import('verbaly/devtools');
  attachDevtools(verbaly);
}

• A panel shows how many keys are ok, falling back, or missing, and names the catalog file to fix each missing one.
• Hold Alt and hover any element to see its key, the locale it resolved from, and the source text.

The onResolve hook

Prefer your own logging? onResolve fires on every t() call with the key, locale, value and whether it was a hit, a fallback or a miss.

createVerbaly({
  onResolve: (info) => {
    if (info.status === 'miss') console.warn('missing', info.key);
  },
});

For a one-off lookup, verbaly.inspect(key) returns the resolved locale and source text.