Reference

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.

main.ts

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 panel prints the key it is listening for, so you never have to guess it.

What you can change

The defaults suit a normal app, and every one of them takes an argument when yours is not.

Option	Default	What it does
`hotkey`	`'alt'`	The key you hold to inspect: `'alt'`, `'ctrl'`, `'shift'` or `'meta'`. Change it when Alt already belongs to something on your page
`root`	`document.body`	The part of the page it looks at, for an app mounted inside a bigger one
`attribute`	`'data-verbaly'`	The attribute it reads, if you renamed the one your markup uses
`catalogDir`	`'locales'`	The folder it names when it tells you where to add a missing message

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.

i18n.ts

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.