Referencia

Devtools

Cuando algo muestra el texto equivocado, quieres una sola respuesta: ¿qué key es esto y de dónde salió? El overlay verbaly/devtools lo responde en el navegador.

Conecta el inspector

Impórtalo solo en desarrollo: es un chunk aparte, tree-shaken fuera de los builds de producción.

main.ts

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

Un panel muestra cuántas keys están ok, en fallback o faltantes, y nombra el archivo de catálogo para arreglar cada una.
Mantén Alt y pasa por encima de cualquier elemento para ver su clave, el idioma del que salió y el texto fuente. El panel escribe la tecla que está escuchando, así que nunca hay que adivinarla.

Lo que puedes cambiar

Los valores por defecto sirven para una app normal, y todos aceptan un argumento cuando la tuya no lo es.

Opción	Por defecto	Qué hace
`hotkey`	`'alt'`	La tecla que mantienes para inspeccionar: `'alt'`, `'ctrl'`, `'shift'` o `'meta'`. Cámbiala cuando Alt ya sea de otra cosa en tu página
`root`	`document.body`	La parte de la página que mira, para una app montada dentro de otra mayor
`attribute`	`'data-verbaly'`	El atributo que lee, si renombraste el que usa tu markup
`catalogDir`	`'locales'`	La carpeta que nombra cuando te dice dónde añadir un mensaje que falta

El hook onResolve

¿Prefieres tu propio logging? onResolve se dispara en cada t() con la key, el locale, el valor y si fue hit, fallback o miss.

i18n.ts

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

Para una consulta puntual, verbaly.inspect(key) devuelve el locale resuelto y el texto fuente.