Overview

If you’re working with Vue Single File Components (SFC) and looking for an efficient debugging tool, the vite-plugin-vue-tracer is an innovative solution. This plugin is crafted as a replacement for the traditional vite-plugin-vue-inspector, offering a refined approach that utilizes Vite’s source map capabilities. Gone are the days of cluttering your DOM with data-attributes; this plugin efficiently resolves source locations, allowing developers to easily trace elements and virtual DOMs without added overhead.

What sets this plugin apart is its modularity; whether you want to use it as a standalone inspector or integrate it into your own setup through APIs, the options are plentiful. This versatility makes it appealing to both novice and experienced developers who seek streamlined debugging processes.

Features

• Source Mapping: Utilizes Vite’s internal source maps for precise source location resolution without modifying the DOM.

• Modular Design: Can be used as a standalone inspector or as headless APIs to create a custom debugging interface.

• Client Entry for Recording: Automatically injects tracing capabilities into components, simplifying the process of tracking data flow and events.

• Event Listener Support: Provides a headless API to manage event listeners for mouse interactions, allowing flexible integration without a UI.

• Built-in UI Overlay: Comes with a reactive overlay UI that enhances user experience and simplifies debugging.

• Easy Integration: Simple setup instructions make it easy to incorporate into any Vite project, enhancing your development workflow.

• MIT License: The plugin is open-source and available under the MIT License, fostering community collaboration and improvement.