@vue/devtools-shared

What is @vue/devtools-shared?

@vue/devtools-shared is a package that provides shared utilities and components for Vue Devtools. It is used to build and extend the Vue Devtools, which are tools for debugging and profiling Vue.js applications.

What are @vue/devtools-shared's main functionalities?

Component Inspector

This feature allows you to inspect Vue components within the Devtools. The code sample demonstrates how to set up a custom plugin that logs the inspected component instance.

import { setupDevtoolsPlugin } from '@vue/devtools-shared';

setupDevtoolsPlugin({
  id: 'my-plugin',
  label: 'My Plugin',
  app: myVueApp
}, api => {
  api.on.inspectComponent((payload, ctx) => {
    console.log('Inspecting component:', payload.componentInstance);
  });
});

Timeline Events

This feature allows you to add custom events to the Vue Devtools timeline. The code sample shows how to create a new timeline layer and add an event to it.

import { setupDevtoolsPlugin } from '@vue/devtools-shared';

setupDevtoolsPlugin({
  id: 'my-plugin',
  label: 'My Plugin',
  app: myVueApp
}, api => {
  api.addTimelineLayer({
    id: 'my-timeline',
    label: 'My Timeline',
    color: 0xff0000
  });

  api.addTimelineEvent({
    layerId: 'my-timeline',
    event: {
      time: Date.now(),
      data: { message: 'Hello from my plugin!' }
    }
  });
});

Custom Inspector

This feature allows you to create custom inspectors in the Vue Devtools. The code sample demonstrates how to add a new inspector and define its tree and state.

import { setupDevtoolsPlugin } from '@vue/devtools-shared';

setupDevtoolsPlugin({
  id: 'my-plugin',
  label: 'My Plugin',
  app: myVueApp
}, api => {
  api.addInspector({
    id: 'my-inspector',
    label: 'My Inspector',
    icon: 'search'
  });

  api.on.getInspectorTree((payload, ctx) => {
    if (payload.inspectorId === 'my-inspector') {
      payload.rootNodes = [{ id: 'root', label: 'Root Node' }];
    }
  });

  api.on.getInspectorState((payload, ctx) => {
    if (payload.inspectorId === 'my-inspector') {
      payload.state = { 'Root Node': { message: 'Hello from my inspector!' } };
    }
  });
});

Other packages similar to @vue/devtools-shared

vue-devtools

Vue Devtools is the official debugging and profiling tool for Vue.js applications. It provides a graphical interface for inspecting and debugging Vue components, Vuex state, and more. Compared to @vue/devtools-shared, it is a complete tool rather than a library for building tools.

react-devtools

React Devtools is a set of tools for inspecting the React component hierarchy, profiling performance, and debugging React applications. It is similar to Vue Devtools but tailored for React. Unlike @vue/devtools-shared, it is not a library for building custom devtools but a standalone tool.

redux-devtools

Redux Devtools is a set of tools for debugging Redux applications. It allows you to inspect every dispatched action and the resulting state changes. While it is focused on Redux, it provides similar debugging capabilities as @vue/devtools-shared but for Redux state management.

README

@vue/devtools-shared

Internal utility types shared across @vue/devtools packages.