DevTools

Quando i Nuxt DevTools sono attivi, Nuxt Skeletonizer aggiunge una scheda Skeletonizer.

Espone lo stato di runtime dal vivo fornito da useSkeletonizer().stats:

Quando il motore adattivo è attivo, stats porta anche renderMode (sempre 'svg'), score, fps, animationTier, memoryMB, cacheHits/cacheMisses, degraded e i timings per fase ({ scanMs, renderMs, totalMs }).

Intelligenza di runtime (Step 3)

useSkeletonPerformance() espone tutto ciò che serve a un pannello DevTools:

• Visualizzatore della pipeline — tempi per fase (tempo di scansione / render), il conteggio dei nodi SVG e la serie di metriche dal vivo (perf.series('fps')), più la cache hit ratio.
• SVG Blueprint Inspector — l'esatto blueprint <svg> prodotto dal motore (perf.blueprint()): il viewBox bloccato, l'id del gradiente namespacato e ogni forma <rect>/<circle>, con un flag che indica se è stato servito dalla cache.
• Modalità Explain — frasi in linguaggio naturale per ogni decisione del motore, ad es. "Blueprint SVG servito dalla cache — scansione saltata" oppure "Gradiente degradato a pulse: FPS sceso a 24" (perf.explanations()).
• Rilevamento dei colli di bottiglia — host ordinati per costo di scansione/render (perf.bottlenecks()), così individui il componente più lento da skeletonizzare.

Puoi pilotare tutto questo in modo interattivo nel Performance Lab.

Usare le stats nella tua app

Gli stessi dati sono reattivi e disponibili ovunque:

<script setup lang="ts">
const { stats } = useSkeletonizer()
</script>

<template>
  <p>{{ stats.bones }} ossa · ultima scansione {{ stats.lastScanMs.toFixed(1) }} ms</p>
</template>

Sono i dati mostrati dal vivo nel Playground.

L'integrazione DevTools è priva di dipendenze — si registra tramite l'hook pubblico devtools:customTabs di Nuxt e aggiunge zero overhead alle build di produzione.