vite-plugin-vue-tracer

vite-plugin-vue-tracer

Tracer for the source code of elements and vdoms in Vue SFC.

This is a designed to be a replacement of vite-plugin-vue-inspector with a new approach, that utilize Vite's internal source map to resolve the source location, without injecting data-attributes to the DOM.

This plugin is also designed to be more modular, where you can use it as a standalone inspector plugin, or as a headless APIs to build your own inspector.

Usage

npm i -D vite-plugin-vue-tracer

import { defineConfig } from 'vite'
import { VueTracer } from 'vite-plugin-vue-tracer'

export default defineConfig({
  plugins: [
    VueTracer(),
  ],
})

In the your entry file, add the following code:

// Only apply in development
if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/overlay').then(({ events, state }) => {
    // Enables the overlay
    state.isEnabled = true

    events.on('hover', (info) => {
      // ...
    })

    events.on('click', (info) => {
      // ...
      openInEditor(info.fullpath) // 'src/app.vue:10:1'
      state.isEnabled = false
    })
  })
}

Of if you want headless APIs, import vite-plugin-vue-tracer/client/record instead.

if (import.meta.hot) {
  import('vite-plugin-vue-tracer/client/record')
    .then(({
      hasData,
      findTraceFromElement,
      findraceFromVNode,
      findTraceAtPointer,
    }) => {
      const el = document.querySelector('.foo')
      const trace = findTraceFromElement(el)
      if (trace) {
        console.log(trace)
      }
    })
}

Vite DevTools

With Vite DevTools, enable viteDevtools to add an Inspect Vue component button to the dock:

VueTracer({
  viteDevtools: true,
})

Click the button, then click an element on the page to open its component in your editor. The button is an on/off tool: while it is on, an open DevTools panel is hidden, and it comes back after the pick. Click the button again or press Escape to cancel. The Mod+Shift+X shortcut (Cmd on macOS, Ctrl elsewhere) toggles it too, and can be changed in the DevTools settings.

The on/off behavior needs a hub with toggle actions (devframes/devframe#469). On older versions, each click on the button starts a pick, and the panel closes after it.

To handle the picked element yourself instead of opening the editor, set onPick: 'none' and listen to the click event:

VueTracer({
  viteDevtools: { onPick: 'none' },
})

import('vite-plugin-vue-tracer/client/listeners').then(({ events }) => {
  events.on('click', (info) => {
    // show your own UI for `info`
  })
})

References

Exports

• vite-plugin-vue-tracer - The Vite plugin entry, should be used in vite.config.ts
• vite-plugin-vue-tracer/client/record - The client entry for recording the trace data, this will be automatically injected into each component by the plugin. You don't normally need to import this.
• vite-plugin-vue-tracer/client/listener - The client entry for adding event listeners to the DOM and listening to the mouse events. It expose a ref isEnabled to control if the listeners are active. A events object is exposed for listening to those events. This entry is purely headless, does not come with any UI or styling.
• vite-plugin-vue-tracer/client/overlay - The builtin overlay UI for easier to use. A reactive state object is exposed to control the overlay's state. If you want to build your own UI, you can use the listener entry instead.

Sponsors

License

MIT License Anthony Fu