Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Debug Watcher

Vue Tip: Debug Watcher Image
ScriptDebugging

Similar to computed(), watchers also support the onTrack and onTrigger options to debug a watcher's behavior:

Component.vue
<script setup> watch(source, callback, { onTrack(e) { debugger }, onTrigger(e) { debugger }, }) watchEffect(callback, { onTrack(e) { debugger }, onTrigger(e) { debugger }, }) </script>

onTrack will be called when a reactive property or ref is tracked as a dependency.

onTrigger will be called when the watcher callback is triggered by the mutation of a dependency.

The callbacks receive a debugger event that contains information about the dependency. If you place a debugger statement inside the callback, you can interactively inspect the dependency.

Info

onTrack and onTrigger watcher options only work in development mode.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Nuxt Tip: Move Homepage to Sub-Folder in Nuxt 3

Use the path property in the page's definePageMeta to move the homepage to a sub-folder in Nuxt 3.

Nuxt Tip: Add Custom iframe Tab to Nuxt DevTools

Nuxt DevTools is designed to be extensible. You can add your own modules' integration to the DevTools.