Depuración Reactiva a Nivel de Plantilla

En la intrincada danza del manejo de estado reactivo, entender cuándo y por qué cambian los valores puede ser la diferencia entre resolver un problema rápidamente y horas de frustración. El tag @debug de Svelte 5 ofrece un enfoque declarativo para la depuración que se integra perfectamente con el modelo reactivo del framework, proporcionando información en tiempo real sobre las mutaciones de estado a medida que ocurren.

A diferencia de los enfoques de depuración tradicionales que requieren sentencias console.log manuales dispersas por todo el código o configuraciones elaboradas de puntos de interrupción, el tag @debug opera de forma reactiva: registrando automáticamente los valores cada vez que cambia alguna dependencia rastreada. Esto lo convierte en una herramienta invaluable para comprender flujos reactivos complejos, rastrear bugs esquivos y obtener una visión más profunda de cómo evoluciona el estado de tu componente a lo largo del tiempo.

Entender cuándo usar @debug, qué rastrear y cómo interpretar su salida lo transforma de un simple mecanismo de registro en una poderosa herramienta de diagnóstico que puede iluminar incluso los patrones reactivos más complejos.

El Problema

El Desafío de la Depuración

Considera un escenario donde estás construyendo un configurador de productos para comercio electrónico. Múltiples piezas de estado interactúan para determinar el precio final, y estás experimentando resultados de cálculo inesperados:

<script>
	let basePrice = $state(100)
	let quantity = $state(1)
	let discountCode = $state('')
	let memberDiscount = $state(false)

	let subtotal = $derived(basePrice * quantity)
	let codeDiscount = $derived(discountCode === 'SAVE20' ? 0.2 : 0)
	let membershipDiscount = $derived(memberDiscount ? 0.1 : 0)
	let totalDiscount = $derived(codeDiscount + membershipDiscount)
	let finalPrice = $derived(subtotal * (1 - totalDiscount))
</script>

<div class="configurator">
	<label>
		Quantity: <input type="number" bind:value={quantity} min="1" />
	</label>

	<label>
		Discount Code: <input bind:value={discountCode} />
	</label>

	<label>
		<input type="checkbox" bind:checked={memberDiscount} />
		Member Discount
	</label>

	<div class="price">
		Final Price: ${finalPrice.toFixed(2)}
	</div>
</div>

Cuando el cálculo de precio parece incorrecto, necesitas entender qué valores están cambiando y cuándo. La depuración tradicional requiere insertar múltiples sentencias console.log, eliminarlas después, y potencialmente perder qué cadena reactiva desencadenó la actualización.

La Solución con `@debug`

El tag @debug provee registro reactivo que se activa automáticamente cada vez que cambian los valores rastreados:

<script>
	let basePrice = $state(100)
	let quantity = $state(1)
	let discountCode = $state('')
	let memberDiscount = $state(false)

	let subtotal = $derived(basePrice * quantity)
	let codeDiscount = $derived(discountCode === 'SAVE20' ? 0.2 : 0)
	let membershipDiscount = $derived(memberDiscount ? 0.1 : 0)
	let totalDiscount = $derived(codeDiscount + membershipDiscount)
	let finalPrice = $derived(subtotal * (1 - totalDiscount))
</script>

{@debug quantity, subtotal, totalDiscount, finalPrice}

<div class="configurator">
	<!-- inputs as before -->
</div>

Ahora, cada vez que cambie alguno de los valores rastreados, verás la salida en consola mostrando su estado actual. El registro es automático, reactivo y no requiere limpieza manual.

Uso Básico

Rastreo de un Solo Valor

Rastrea un único valor reactivo para entender cuándo cambia:

<script>
	let count = $state(0)
</script>

{@debug count}

<button onclick={() => count++}> Increment </button>

<p>Count: {count}</p>

Cada clic activa el tag @debug, registrando el nuevo valor de count en la consola. La salida en consola muestra:

{count: 1}
{count: 2}
{count: 3}

Este patrón simple es perfecto para rastrear cuándo se actualiza un valor específico durante las interacciones del usuario.

Rastreo de Múltiples Valores

Rastrea múltiples valores relacionados para entender cómo cambian juntos:

<script>
	let firstName = $state('')
	let lastName = $state('')
	let fullName = $derived(`${firstName} ${lastName}`.trim())
</script>

{@debug firstName, lastName, fullName}

<div class="form">
	<input bind:value={firstName} placeholder="First Name" />
	<input bind:value={lastName} placeholder="Last Name" />
	<p>Full Name: {fullName}</p>
</div>

El tag @debug se activa cada vez que cambia algún valor rastreado, mostrando todos los valores actuales:

{firstName: "A", lastName: "", fullName: "A"}
{firstName: "Al", lastName: "", fullName: "Al"}
{firstName: "Alice", lastName: "", fullName: "Alice"}
{firstName: "Alice", lastName: "C", fullName: "Alice C"}
{firstName: "Alice", lastName: "Ch", fullName: "Alice Ch"}
{firstName: "Alice", lastName: "Chen", fullName: "Alice Chen"}

Esto revela la cascada reactiva: cómo el cambio de firstName o lastName desencadena la derivación de fullName.

Debug sin Parámetros

Usa @debug sin parámetros para crear un punto de interrupción reactivo:

<script>
	let items = $state([])

	function addItem() {
		items = [...items, { id: Date.now(), value: Math.random() }]
	}
</script>

{#if items.length > 5}
	{@debug}
	<p class="warning">Many items detected!</p>
{/if}

<button onclick={addItem}>Add Item</button>
<p>{items.length} items</p>

Cuando la condición se vuelve verdadera, el @debug sin parámetros activa un punto de interrupción del depurador (si las herramientas de desarrollo están abiertas), pausando la ejecución para inspección. Esto es particularmente útil para capturar el estado en momentos críticos.

Patrones Avanzados

Depuración de Cadenas de Estado Derivado

Las derivaciones complejas suelen involucrar múltiples pasos. Rastrea toda la cadena para entender la propagación:

<script>
	let rawData = $state([
		{ value: 100, enabled: true },
		{ value: 200, enabled: false },
		{ value: 300, enabled: true }
	])

	let enabledItems = $derived(rawData.filter((item) => item.enabled))
	let values = $derived(enabledItems.map((item) => item.value))
	let sum = $derived(values.reduce((acc, val) => acc + val, 0))
	let average = $derived(enabledItems.length ? sum / enabledItems.length : 0)
</script>

{@debug enabledItems, values, sum, average}

<div class="data-panel">
	{#each rawData as item, i}
		<label>
			<input type="checkbox" bind:checked={item.enabled} />
			Value: {item.value}
		</label>
	{/each}

	<div class="results">
		<p>Sum: {sum}</p>
		<p>Average: {average.toFixed(2)}</p>
	</div>
</div>

Alternar las casillas de verificación activa la salida de depuración, mostrando cómo se actualiza toda la cadena de derivación:

{
  enabledItems: [{value: 100, enabled: true}],
  values: [100],
  sum: 100,
  average: 100
}

{
  enabledItems: [{value: 100, enabled: true}, {value: 300, enabled: true}],
  values: [100, 300],
  sum: 400,
  average: 200
}

Esto deja en claro cómo habilitar un elemento se propaga en cascada a través de enabledItems → values → sum → average.

Depuración Condicional

Coloca tags @debug dentro de bloques condicionales para depurar escenarios específicos:

<script>
	let user = $state(null)
	let permissions = $state([])

	let isAdmin = $derived(permissions.includes('admin'))
	let canEdit = $derived(permissions.includes('edit') || isAdmin)
</script>

{#if isAdmin}
	{@debug user, permissions, isAdmin, canEdit}
	<div class="admin-panel">
		<h2>Admin Controls</h2>
		<p>User: {user?.name}</p>
	</div>
{:else if canEdit}
	{@debug user, permissions, canEdit}
	<div class="editor-panel">
		<h2>Editor Controls</h2>
		<p>User: {user?.name}</p>
	</div>
{/if}

Diferentes tags @debug se activan según el nivel de permisos, registrando solo cuando se renderiza la rama correspondiente. Este enfoque dirigido reduce el ruido en la consola, mostrando únicamente el estado relevante para cada escenario.

Depuración con Alcance de Bucle

Depura el estado dentro de cada iteración de un bucle:

<script>
	let tasks = $state([
		{ id: 1, title: 'Review PR', completed: false, priority: 'high' },
		{ id: 2, title: 'Update docs', completed: true, priority: 'medium' },
		{ id: 3, title: 'Fix bug', completed: false, priority: 'critical' }
	])
</script>

{#each tasks as task (task.id)}
	{@const isUrgent = !task.completed && task.priority === 'critical'}

	{#if isUrgent}
		{@debug task, isUrgent}
	{/if}

	<div class="task" class:urgent={isUrgent}>
		<label>
			<input type="checkbox" bind:checked={task.completed} />
			{task.title}
		</label>
		<span class="priority">{task.priority}</span>
	</div>
{/each}

La salida de depuración se activa solo para las tareas urgentes y se actualiza cuando cambia el estado de completitud de una tarea. Esto permite identificar problemas en iteraciones específicas del bucle sin saturar la consola con cada elemento.

Depuración de Props y Bindings

Rastrea las props entrantes y los bindings bidireccionales para entender la comunicación padre-hijo:

<!-- Child.svelte -->
<script>
	let { value = $bindable(), min = 0, max = 100 } = $props()

	let clampedValue = $derived(Math.max(min, Math.min(max, value)))
	let isAtLimit = $derived(value !== clampedValue)
</script>

{@debug value, clampedValue, min, max, isAtLimit}

<div class="slider-widget">
	<input type="range" bind:value {min} {max} />
	<span class="value">{clampedValue}</span>
	{#if isAtLimit}
		<span class="warning">At limit!</span>
	{/if}
</div>

<!-- Parent.svelte -->
<script>
	import Child from './Child.svelte'

	let sliderValue = $state(50)
</script>

{@debug sliderValue}

<Child bind:value={sliderValue} min={0} max={100} />

Ahora puedes ver el flujo bidireccional: cómo los cambios de estado del padre se propagan al hijo, y cómo las actualizaciones de entrada del hijo fluyen de regreso al padre. La salida de depuración de ambos componentes revela la ruta completa de comunicación.

Ejemplos del Mundo Real

Estado de Validación de Formularios

Rastrea estados de validación complejos en múltiples campos:

<script>
	let email = $state('')
	let password = $state('')
	let confirmPassword = $state('')
	let agreeToTerms = $state(false)

	let emailValid = $derived(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email))
	let passwordValid = $derived(password.length >= 8)
	let passwordsMatch = $derived(password === confirmPassword && password.length > 0)
	let formValid = $derived(emailValid && passwordValid && passwordsMatch && agreeToTerms)
</script>

{@debug emailValid, passwordValid, passwordsMatch, agreeToTerms, formValid}

<form>
	<label>
		Email:
		<input type="email" bind:value={email} />
		{#if email && !emailValid}
			<span class="error">Invalid email format</span>
		{/if}
	</label>

	<label>
		Password:
		<input type="password" bind:value={password} />
		{#if password && !passwordValid}
			<span class="error">Password must be at least 8 characters</span>
		{/if}
	</label>

	<label>
		Confirm Password:
		<input type="password" bind:value={confirmPassword} />
		{#if confirmPassword && !passwordsMatch}
			<span class="error">Passwords don't match</span>
		{/if}
	</label>

	<label>
		<input type="checkbox" bind:checked={agreeToTerms} />
		I agree to the terms and conditions
	</label>

	<button type="submit" disabled={!formValid}> Sign Up </button>
</form>

A medida que los usuarios llenan el formulario, la salida de depuración muestra exactamente qué condiciones de validación están pasando o fallando en cada paso, lo que facilita identificar por qué el botón de envío permanece deshabilitado.

Cálculos del Carrito de Compras

Depura cálculos de precios de múltiples pasos con descuentos e impuestos:

<script>
	let cartItems = $state([
		{ id: 1, name: 'Widget', price: 29.99, quantity: 2 },
		{ id: 2, name: 'Gadget', price: 49.99, quantity: 1 },
		{ id: 3, name: 'Gizmo', price: 19.99, quantity: 3 }
	])

	let couponCode = $state('')
	let shippingMethod = $state('standard')

	let subtotal = $derived(cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0))

	let couponDiscount = $derived.by(() => {
		if (couponCode === 'SAVE10') return subtotal * 0.1
		if (couponCode === 'SAVE20') return subtotal * 0.2
		return 0
	})

	let shippingCost = $derived.by(() => {
		if (shippingMethod === 'express') return 15.99
		if (shippingMethod === 'overnight') return 29.99
		return 5.99
	})

	let taxableAmount = $derived(subtotal - couponDiscount + shippingCost)
	let tax = $derived(taxableAmount * 0.08)
	let total = $derived(taxableAmount + tax)
</script>

{@debug subtotal, couponDiscount, shippingCost, taxableAmount, tax, total}

<div class="cart">
	<h2>Shopping Cart</h2>

	{#each cartItems as item (item.id)}
		<div class="cart-item">
			<span>{item.name}</span>
			<input type="number" bind:value={item.quantity} min="1" />
			<span>${(item.price * item.quantity).toFixed(2)}</span>
		</div>
	{/each}

	<div class="cart-controls">
		<label>
			Coupon Code:
			<input bind:value={couponCode} placeholder="Enter code" />
		</label>

		<label>
			Shipping:
			<select bind:value={shippingMethod}>
				<option value="standard">Standard ($5.99)</option>
				<option value="express">Express ($15.99)</option>
				<option value="overnight">Overnight ($29.99)</option>
			</select>
		</label>
	</div>

	<div class="cart-summary">
		<div class="line-item">
			<span>Subtotal:</span>
			<span>${subtotal.toFixed(2)}</span>
		</div>

		{#if couponDiscount > 0}
			<div class="line-item discount">
				<span>Coupon Discount:</span>
				<span>-${couponDiscount.toFixed(2)}</span>
			</div>
		{/if}

		<div class="line-item">
			<span>Shipping:</span>
			<span>${shippingCost.toFixed(2)}</span>
		</div>

		<div class="line-item">
			<span>Tax (8%):</span>
			<span>${tax.toFixed(2)}</span>
		</div>

		<div class="line-item total">
			<span>Total:</span>
			<span>${total.toFixed(2)}</span>
		</div>
	</div>
</div>

Cada interacción—cambiar cantidades, ingresar un código de cupón, seleccionar el envío—activa la salida de depuración, revelando el flujo de cálculo completo. Esto hace que sea trivial verificar que los descuentos se aplican antes de los impuestos, que el envío está incluido en el monto imponible y que todas las fórmulas funcionan correctamente.

Pipeline de Filtros en Tiempo Real

Depura operaciones complejas de filtrado y ordenamiento:

<script>
	let products = $state([
		{ id: 1, name: 'Laptop', category: 'electronics', price: 999, inStock: true, rating: 4.5 },
		{ id: 2, name: 'Desk', category: 'furniture', price: 299, inStock: true, rating: 4.2 },
		{ id: 3, name: 'Chair', category: 'furniture', price: 199, inStock: false, rating: 4.7 },
		{ id: 4, name: 'Mouse', category: 'electronics', price: 29, inStock: true, rating: 4.3 },
		{ id: 5, name: 'Monitor', category: 'electronics', price: 399, inStock: true, rating: 4.6 }
	]);

	let categoryFilter = $state('all');
	let minPrice = $state(0);
	let maxPrice = $state(1000);
	let showOutOfStock = $state(true);
	let sortBy = $state('name');

	let categoryFiltered = $derived(
		categoryFilter === 'all'
			? products
			: products.filter((p) => p.category === categoryFilter)
	);

	let priceFiltered = $derived(
		categoryFiltered.filter((p) => p.price >= minPrice && p.price <= maxPrice)
	);

	let stockFiltered = $derived(
		showOutOfStock
			? priceFiltered
			: priceFiltered.filter((p) => p.inStock)
	);

	let sorted = $derived.by(() => {
		const items = [...stockFiltered];
		if (sortBy === 'name') return items.sort((a, b) => a.name.localeCompare(b.name));
		if (sortBy === 'price') return items.sort((a, b) => a.price - b.price);
		if (sortBy === 'rating') return items.sort((a, b) => b.rating - a.rating);
		return items;
	});

	let categoryCount = $derived(categoryFiltered.length);
	let priceCount = $derived(priceFiltered.length);
	let stockCount = $derived(stockFiltered.length);
	let sortedCount = $derived(sorted.length);
</script>

{@debug categoryCount, priceCount, stockCount, sortedCount}

<div class="product-browser">
	<div class="filters">
		<label>
			Category:
			<select bind:value={categoryFilter}>
				<option value="all">All</option>
				<option value="electronics">Electronics</option>
				<option value="furniture">Furniture</option>
			</select>
		</label>

		<label>
			Price Range:
			<input type="number" bind:value={minPrice} min="0" />
			to
			<input type="number" bind:value={maxPrice} min="0" />
		</label>

		<label>
			<input type="checkbox" bind:checked={showOutOfStock} />
			Show out of stock
		</label>

		<label>
			Sort by:
			<select bind:value={sortBy}>
				<option value="name">Name</option>
				<option value="price">Price</option>
				<option value="rating">Rating</option>
			</select>
		</label>
	</div>

	<div class="product-grid">
		{#each sorted as product (product.id)}
			<div class="product-card" class:out-of-stock={!product.inStock}>
				<h3>{product.name}</h3>
				<p class="category">{product.category}</p>
				<p class="price">${product.price}</p>
				<p class="rating">★ {product.rating}</p>
				{#if !product.inStock}
					<p class="stock-status">Out of Stock</p>
				{/if}
			</div>
		{/each}
	</div>

	<p class="result-count">
		Showing {sorted.length} of {products.length} products
	</p>
</div>

La salida de depuración muestra cuántos elementos pasan por cada etapa de filtro:

{categoryCount: 5, priceCount: 5, stockCount: 5, sortedCount: 5}
{categoryCount: 3, priceCount: 3, stockCount: 3, sortedCount: 3}
{categoryCount: 3, priceCount: 2, stockCount: 2, sortedCount: 2}

Esto revela exactamente dónde se filtran los elementos, lo que facilita verificar la lógica de filtrado y diagnosticar por qué ciertos productos no aparecen.

Buenas Prácticas

Ubicación Estratégica

Coloca las etiquetas @debug en los puntos de decisión, no en todas partes:

EVITAR: Demasiado Registro:

<script>
	let a = $state(1)
	let b = $state(2)
	let c = $derived(a + b)
	let d = $derived(c * 2)
	let e = $derived(d - 1)
</script>

{@debug a}
{@debug b}
{@debug c}
{@debug d}
{@debug e}

PREFERIDO: Registro Estratégico:

<script>
	let a = $state(1)
	let b = $state(2)
	let c = $derived(a + b)
	let d = $derived(c * 2)
	let e = $derived(d - 1)
</script>

{@debug a, b, e}

Rastrea las entradas y las salidas finales, no los pasos intermedios, a menos que necesites depurar específicamente la cadena de derivación.

Contexto Descriptivo

Al depurar escenarios complejos, agrega comentarios para identificar lo que estás rastreando:

<!-- Debugging user authentication flow -->
{@debug user, isAuthenticated, sessionToken}

<!-- Debugging cart total calculation -->
{@debug subtotal, discount, shippingCost, total}

Esto ayuda al revisar el código más adelante o cuando otros desarrolladores necesiten entender tu enfoque de depuración.

Temporal vs. Permanente

Depuración temporal — Investigación rápida:

{@debug someValue}

Elimínalo después de resolver el problema.

Depuración permanente — Solo en modo de desarrollo:

{#if import.meta.env.DEV}
	{@debug criticalState, userActions, systemHealth}
{/if}

Mantén las etiquetas de depuración en las compilaciones de desarrollo pero exclúyelas de producción.

Combinar con Renderizado Condicional

Depura solo cuando ocurran problemas:

<script>
	let apiResponse = $state(null)
	let isError = $derived(apiResponse?.status === 'error')
</script>

{#if isError}
	{@debug apiResponse}
	<div class="error-panel">
		<h3>Something went wrong</h3>
		<p>{apiResponse.message}</p>
	</div>
{/if}

Esto asegura que la salida de depuración solo se active cuando la condición de error es verdadera, manteniendo tu consola limpia durante la operación normal.

Errores Comunes

Exceso de Registro

Rastrear demasiados valores genera ruido:

EVITAR: Rastreo Excesivo

{@debug var1, var2, var3, var4, var5, var6, var7, var8, var9, var10}

PREFERIDO: Rastreo Enfocado

{@debug suspectedProblemValue, relatedDependency}

Enfócate en los valores específicos involucrados en el problema que estás investigando.

Olvidar Eliminar

Dejar etiquetas @debug en el código de producción:

EVITAR: Dejado en Producción

<script>
	let userData = $state(null)
</script>

{@debug userData}

PREFERIDO: Consciente del Entorno

<script>
	let userData = $state(null)
</script>

{#if import.meta.env.DEV}
	{@debug userData}
{/if}

O eliminar por completo antes de hacer commit a las ramas de producción.

Malentendiendo el Alcance Reactivo

@debug solo se activa cuando cambian los valores rastreados. Si no estás viendo la salida, es posible que los valores no sean reactivos:

EVITAR: Valor No Reactivo

<script>
	let config = { theme: 'dark', layout: 'grid' }
</script>

{@debug config}

config es una variable regular. Los cambios en sus propiedades no activarán la etiqueta de depuración.

PREFERIDO: Valor Reactivo

<script>
	let config = $state({ theme: 'dark', layout: 'grid' })
</script>

{@debug config}

Ahora config es reactivo, y las mutaciones activarán la salida de depuración.

Depuración de Estado Asíncrono

@debug muestra los valores actuales pero no ayuda con el tiempo de ejecución asíncrono:

Visibilidad Limitada:

<script>
	let data = $state(null)
	let loading = $state(false)

	async function fetchData() {
		loading = true
		data = await fetch('/api/data').then((r) => r.json())
		loading = false
	}
</script>

{@debug data, loading}

Verás los cambios de estado pero no el tiempo de resolución de la promesa. Para la depuración asíncrona, combina @debug con console.log en la función asíncrona:

<script>
	let data = $state(null)
	let loading = $state(false)

	async function fetchData() {
		loading = true
		console.log('Fetch started')
		data = await fetch('/api/data').then((r) => r.json())
		console.log('Fetch completed', data)
		loading = false
	}
</script>

{@debug data, loading}

Esto proporciona tanto el seguimiento de estado reactivo como información sobre los tiempos de ejecución asíncrona.

Integración con Herramientas de Desarrollador

Formato de Salida en Consola

Cuando @debug se activa, registra en la consola con los nombres de las variables rastreadas como claves:

{@debug firstName, lastName, age}

Salida en consola:

{firstName: "Alice", lastName: "Chen", age: 29}

Esta salida estructurada se integra perfectamente con las herramientas de desarrollador del navegador, permitiéndote expandir objetos, arreglos y estructuras anidadas.

Comportamiento de Punto de Interrupción

@debug sin parámetros actúa como un punto de interrupción condicional:

{#if errorCondition}
	{@debug}
{/if}

Cuando la condición es verdadera y las herramientas de desarrollador están abiertas, la ejecución se pausa, permitiéndote inspeccionar la pila de llamadas y el estado de las variables. Si las herramientas de desarrollador están cerradas, la etiqueta @debug no tiene efecto.

Consideraciones de Rendimiento

Las etiquetas @debug tienen un impacto mínimo en el rendimiento durante el desarrollo, pero no deberían desplegarse en producción. Usa verificaciones de entorno en tiempo de compilación para excluirlas:

{#if import.meta.env.DEV}
	{@debug importantState}
{/if}

La mayoría de los empaquetadores (Vite, Webpack, Rollup) eliminarán este bloque por completo en las compilaciones de producción mediante la eliminación de código muerto.

Comparación con la Depuración Tradicional

`@debug` vs. `console.log`

Enfoque con console.log:

<script>
	let count = $state(0)

	$effect(() => {
		console.log('Count changed:', count)
	})
</script>

Requiere configuración y limpieza manual con $effect. El efecto se ejecuta en cada cambio de dependencia reactiva, no solo cuando cambia count.

Enfoque con @debug:

<script>
	let count = $state(0)
</script>

{@debug count}

Automático, declarativo, y se activa solo cuando cambia count. No es necesario gestionar efectos ni limpieza manualmente.

`@debug` vs. Puntos de Interrupción

Puntos de interrupción tradicionales:

Se establecen en las herramientas de desarrollador
Ubicaciones estáticas en el código
Se interrumpen en cada ejecución de esa línea

Puntos de interrupción con @debug:

Se declaran en la plantilla
Reactivos — solo se activan cuando cambian las condiciones
Pueden ser condicionales según la lógica de la plantilla

Ambos enfoques tienen valor. Usa @debug para el seguimiento de estado reactivo, y los puntos de interrupción tradicionales para el flujo de código imperativo.

Estrategias Avanzadas de Depuración

Depuración de Máquinas de Estado

Rastrea las transiciones de estado en máquinas de estado finito:

<script>
	let state = $state('idle')
	let error = $state(null)
	let data = $state(null)

	async function load() {
		state = 'loading'
		error = null
		try {
			data = await fetch('/api/data').then((r) => r.json())
			state = 'success'
		} catch (e) {
			error = e.message
			state = 'error'
		}
	}
</script>

{@debug state, error, data}

<div class="state-machine">
	{#if state === 'idle'}
		<button onclick={load}>Load Data</button>
	{:else if state === 'loading'}
		<p>Loading...</p>
	{:else if state === 'success'}
		<div class="data">{JSON.stringify(data)}</div>
	{:else if state === 'error'}
		<div class="error">{error}</div>
	{/if}
</div>

La salida de depuración muestra cada transición de estado, revelando el flujo completo a través de la máquina de estado.

Depuración de Cadenas de Estado Derivado

Rastrea los valores derivados a lo largo de una cadena reactiva:

<script>
	let count = $state(0)
	let doubled = $derived(count * 2)
	let tripled = $derived(count * 3)
</script>

{@debug count, doubled, tripled}

<button onclick={() => count++}>Increment</button>
<p>Count: {count}, Doubled: {doubled}, Tripled: {tripled}</p>

Al rastrear los valores del store con el prefijo $, puedes ver cómo los cambios en el store se propagan a través de los valores derivados.

Depuración del Ciclo de Vida de Componentes

Rastrea cuándo los componentes se montan, actualizan y limpian:

<script>
	let { data } = $props()
	let mounted = $state(false)
	let updateCount = $state(0)

	$effect(() => {
		mounted = true
		return () => {
			console.log('Component unmounting, updates:', updateCount)
		}
	})

	$effect(() => {
		data // Track data changes
		updateCount++
	})
</script>

{@debug mounted, updateCount, data}

<div class="component">
	<p>Mounted: {mounted}</p>
	<p>Update Count: {updateCount}</p>
	<p>Data: {JSON.stringify(data)}</p>
</div>

Esta combinación de @debug, $effect y console.log proporciona visibilidad completa del ciclo de vida.

Conclusión

La etiqueta @debug transforma la depuración de un proceso tedioso y manual en una experiencia declarativa y reactiva que se alinea perfectamente con el modelo reactivo de Svelte. Al colocar etiquetas de depuración en puntos estratégicos de tus plantillas, obtienes visibilidad en tiempo real sobre los cambios de estado, el flujo de datos y el comportamiento de los componentes sin saturar tu sección de script con código de registro.

La clave para un uso efectivo de @debug radica en la colocación estratégica: rastrea entradas y salidas, no cada valor intermedio. Concéntrate en los puntos de decisión, los cómputos derivados y las cadenas reactivas donde entender el estado actual es crítico. Combina @debug con renderizado condicional para activar el registro solo cuando ocurran problemas, manteniendo tu consola limpia durante la operación normal.

Recuerda que @debug es una herramienta de desarrollo. Envuelve las etiquetas de depuración en verificaciones de entorno o elimínalas antes de desplegar a producción. Cuando se utiliza de forma reflexiva, @debug se convierte en una herramienta de diagnóstico invaluable que acelera el desarrollo, simplifica la depuración y profundiza tu comprensión de la gestión de estado reactivo en Svelte 5.

Domina @debug, y pasarás menos tiempo adivinando sobre los cambios de estado y más tiempo construyendo funcionalidades con confianza.

Puntos Clave

{@debug} proporciona depuración declarativa y reactiva que registra automáticamente los valores cada vez que cambian las dependencias, activando un punto de interrupción debugger cuando las DevTools están abiertas
Se pueden rastrear múltiples variables en una sola etiqueta usando la sintaxis {@debug var1, var2, var3}, registrando todos los valores juntos cuando cambia cualquier dependencia
La colocación estratégica amplifica la efectividad - posiciona las etiquetas de depuración en límites condicionales, puntos de cómputo derivado y antes/después de mutaciones de estado para rastrear el flujo de datos
La depuración condicional con {#if} como filtro permite el registro dirigido solo cuando ocurren condiciones específicas (p. ej., {#if error}{@debug error, context}{/if})
La salida de registro formateada incluye ubicación en el código fuente, nombre del componente y visualización estructurada de valores con resaltado de sintaxis en las consolas del navegador
La seguridad en producción requiere verificaciones de entorno - envuelve las etiquetas de depuración con {#if import.meta.env.DEV} o elimínalas por completo antes del despliegue
Complementario a $effect para depuración de efectos secundarios - usa @debug para registro reactivo y $effect para inspección programática con console.trace() o lógica personalizada
La integración con TypeScript proporciona seguridad de tipos con inferencia adecuada para las variables depuradas y errores en tiempo de compilación para referencias no definidas

Ver También

Documentación oficial de Svelte 5 - {@debug}
MDN Web Docs - sentencia debugger
Chrome DevTools - Depuración de JavaScript
$effect - Efectos secundarios reactivos para depuración programática
$inspect - La runa de depuración mejorada de Svelte 5 con registro formateado
API de Console - Métodos de registro del navegador para depuración
Variables de entorno de Vite - Gestión de modos de desarrollo vs. producción

Depuración Reactiva a Nivel de Plantilla

El Problema

El Desafío de la Depuración

La Solución con @debug

Uso Básico

Rastreo de un Solo Valor

Rastreo de Múltiples Valores

Debug sin Parámetros

Patrones Avanzados

Depuración de Cadenas de Estado Derivado

Depuración Condicional

Depuración con Alcance de Bucle

Depuración de Props y Bindings

Ejemplos del Mundo Real

Estado de Validación de Formularios

Cálculos del Carrito de Compras

Pipeline de Filtros en Tiempo Real

Buenas Prácticas

Ubicación Estratégica

Contexto Descriptivo

Temporal vs. Permanente

Combinar con Renderizado Condicional

Errores Comunes

Exceso de Registro

Olvidar Eliminar

Malentendiendo el Alcance Reactivo

Depuración de Estado Asíncrono

Integración con Herramientas de Desarrollador

Formato de Salida en Consola

Comportamiento de Punto de Interrupción

Consideraciones de Rendimiento

Comparación con la Depuración Tradicional

@debug vs. console.log

@debug vs. Puntos de Interrupción

Estrategias Avanzadas de Depuración

Depuración de Máquinas de Estado

Depuración de Cadenas de Estado Derivado

Depuración del Ciclo de Vida de Componentes

Conclusión

Puntos Clave

Ver También

La Solución con `@debug`

`@debug` vs. `console.log`

`@debug` vs. Puntos de Interrupción