SWR DevTools

Qué es

SWR DevTools es una herramienta de depuración para aplicaciones React que usan SWR, la librería de data fetching de Vercel. Está creada por Toru Kobayashi (koba04) y se distribuye como extensión para Chrome y Firefox escrita en TypeScript. No es un proyecto oficial de Vercel, sino una utilidad de la comunidad que añade un panel propio a las DevTools del navegador.

Para qué sirve

• Inspeccionar en tiempo real el contenido de la caché de SWR.
• Seguir las peticiones de los fetchers y ver su estado, datos y errores.
• Detectar revalidaciones, claves duplicadas o datos obsoletos durante el desarrollo.
• Entender cómo evoluciona el estado de los hooks de SWR sin añadir logs manuales.

Cuándo usarlo

• Cuando trabajas con SWR y necesitas ver qué hay en la caché o por qué un componente no se actualiza como esperas.
• Con SWR v2 funciona sin tocar el código; basta con instalar la extensión.
• Con SWR v1 hay que envolver la aplicación en el componente que provee el paquete npm.
• Si usas React Query en lugar de SWR, su equivalente es React Query Devtools.

Ejemplo

Para SWR v2 no hace falta configuración: se instala la extensión desde la Chrome Web Store o Firefox Add-ons y aparece una pestaña “SWR” en las DevTools del navegador.

Para SWR v1, instala el paquete y envuelve la aplicación:

npm install swr-devtools react swr

import { SWRDevTools } from "swr-devtools";

function App() {
  return (
    <SWRDevTools>
      <YourApp />
    </SWRDevTools>
  );
}

Puntos clave

• Panel dedicado integrado en las DevTools de Chrome y Firefox.
• Cero configuración con SWR v2 gracias a su soporte nativo.
• Compatible con SWR v1 mediante un componente envoltorio.
• Soporta tema claro y oscuro y ofrece una demo en línea para probarlo.

Ten en cuenta

• Es una herramienta de comunidad, no un proyecto oficial de Vercel.
• Solo tiene sentido si tu aplicación usa SWR; para React Query existe su propia extensión.
• El desarrollo ha tenido poca actividad reciente, así que conviene comprobar la compatibilidad con tu versión de SWR antes de depender de ella.