Open
Conversation
@vitejs/devtools
@vitejs/devtools-kit
@vitejs/devtools-rolldown
@vitejs/devtools-rpc
@vitejs/devtools-self-inspect
commit: |
There was a problem hiding this comment.
Pull request overview
Adds a new @vitejs/devtools-self-inspect package that provides a “Self Inspect” DevTools dock panel for introspecting DevTools internals (RPC functions, docks, client scripts, DevTools-enabled Vite plugins) during plugin development/debugging.
Changes:
- Introduces the new
@vitejs/devtools-self-inspectpackage (Nuxt SPA UI + node-side DevTools plugin + RPC endpoints). - Integrates the package into the monorepo (Turbo build pipeline, TS path/alias wiring, lockfile, export snapshot test).
- Updates docs and the core playground to demonstrate/enable the Self Inspect plugin.
Reviewed changes
Copilot reviewed 31 out of 32 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| turbo.json | Adds Turbo build outputs config for the new package. |
| tsconfig.base.json | Adds TS path mapping for @vitejs/devtools-self-inspect. |
| test/exports/@vitejs/devtools-self-inspect.yaml | Adds package-exports snapshot expectations. |
| pnpm-lock.yaml | Adds lockfile entries for the new workspace package deps. |
| packages/self-inspect/tsdown.config.ts | Configures tsdown build entrypoints and DTS generation. |
| packages/self-inspect/src/uno.config.ts | UnoCSS config using shared DevTools UI preset. |
| packages/self-inspect/src/types.ts | Shared UI types for scripts/plugins lists. |
| packages/self-inspect/src/tsconfig.json | Nuxt-generated TS config extension. |
| packages/self-inspect/src/nuxt.config.ts | Nuxt SPA build config for the self-inspect panel app. |
| packages/self-inspect/src/node/rpc/index.ts | Declares/exports RPC function set and augments kit server function types. |
| packages/self-inspect/src/node/rpc/functions/get-rpc-functions.ts | RPC endpoint to list registered RPC definitions metadata. |
| packages/self-inspect/src/node/rpc/functions/get-docks.ts | RPC endpoint to list registered dock entries. |
| packages/self-inspect/src/node/rpc/functions/get-devtools-plugins.ts | RPC endpoint to list Vite plugins with DevTools support/capabilities. |
| packages/self-inspect/src/node/rpc/functions/get-client-scripts.ts | RPC endpoint to list client scripts derived from dock entries. |
| packages/self-inspect/src/node/plugin.ts | Vite plugin that registers RPC + hosts static UI + registers dock entry. |
| packages/self-inspect/src/node/index.ts | Public node entry re-export. |
| packages/self-inspect/src/modules/rpc.ts | Nuxt module to register RPC functions and run DevTools server for the app. |
| packages/self-inspect/src/index.ts | Package public entry re-exports. |
| packages/self-inspect/src/dirs.ts | Exposes built public dir path for hostStatic. |
| packages/self-inspect/src/app/styles/global.css | Base styling for the panel app (scrollbars/theme variables). |
| packages/self-inspect/src/app/pages/index.vue | Main tabbed UI that loads and displays all inspection data. |
| packages/self-inspect/src/app/composables/rpc.ts | RPC client connection setup and connection state management. |
| packages/self-inspect/src/app/components/RpcFunctionsList.vue | UI table + filtering for RPC functions metadata. |
| packages/self-inspect/src/app/components/DocksList.vue | UI table for dock entries. |
| packages/self-inspect/src/app/components/DevtoolsPluginsList.vue | UI table for DevTools-enabled (or all) Vite plugins. |
| packages/self-inspect/src/app/components/ClientScriptsList.vue | UI table for dock-derived client scripts. |
| packages/self-inspect/src/app/app.vue | App shell: connect RPC, show loading/error, render pages. |
| packages/self-inspect/package.json | New package manifest, scripts, exports, deps. |
| packages/self-inspect/README.md | Package-level documentation and usage snippet. |
| packages/core/playground/vite.config.ts | Enables the self-inspect plugin in the core playground. |
| docs/kit/devtools-plugin.md | Adds “Debugging with Self Inspect” documentation section. |
| alias.ts | Adds monorepo alias entry for @vitejs/devtools-self-inspect. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| import { DEVTOOLS_MOUNT_PATH } from '@vitejs/devtools-kit/constants' | ||
| import { reactive, shallowRef } from 'vue' | ||
|
|
||
| // eslint-disable-next-line unimport/auto-insert -- locally defined, not from rolldown |
There was a problem hiding this comment.
The eslint-disable comment mentions "rolldown", but this file is for self-inspect. This looks like a copy/paste artifact and can be misleading when debugging lint behavior—please update the comment to reference self-inspect (or remove it if no longer needed).
Suggested change
| // eslint-disable-next-line unimport/auto-insert -- locally defined, not from rolldown | |
| // eslint-disable-next-line unimport/auto-insert -- locally defined, not auto-imported in self-inspect |
Comment on lines
+43
to
+47
| console.error(`[self-inspect] RPC error on executing "${name}":`) | ||
| }, | ||
| onFunctionError: (e, name) => { | ||
| connectionState.error = e | ||
| console.error(`[self-inspect] RPC error on executing "${name}":`) |
There was a problem hiding this comment.
Both RPC error callbacks log a message but don't include the actual error object, which drops stack traces/details in the console. Consider passing the error as an additional argument to console.error (or logging e.message/stack) so debugging failures from the Self Inspect panel is easier.
Suggested change
| console.error(`[self-inspect] RPC error on executing "${name}":`) | |
| }, | |
| onFunctionError: (e, name) => { | |
| connectionState.error = e | |
| console.error(`[self-inspect] RPC error on executing "${name}":`) | |
| console.error(`[self-inspect] RPC error on executing "${name}":`, e) | |
| }, | |
| onFunctionError: (e, name) => { | |
| connectionState.error = e | |
| console.error(`[self-inspect] RPC error on executing "${name}":`, e) |
Comment on lines
+16
to
+19
| const rpcFunctions = await rpc.value.call('devtoolskit:self-inspect:get-rpc-functions') | ||
| const docks = await rpc.value.call('devtoolskit:self-inspect:get-docks') | ||
| const clientScripts = await rpc.value.call('devtoolskit:self-inspect:get-client-scripts') | ||
| const devtoolsPlugins = await rpc.value.call('devtoolskit:self-inspect:get-devtools-plugins') |
There was a problem hiding this comment.
These RPC calls are awaited sequentially, which increases time-to-first-render for the panel. Consider fetching them concurrently (e.g., with Promise.all) and then assigning the results, since the calls appear independent.
Suggested change
| const rpcFunctions = await rpc.value.call('devtoolskit:self-inspect:get-rpc-functions') | |
| const docks = await rpc.value.call('devtoolskit:self-inspect:get-docks') | |
| const clientScripts = await rpc.value.call('devtoolskit:self-inspect:get-client-scripts') | |
| const devtoolsPlugins = await rpc.value.call('devtoolskit:self-inspect:get-devtools-plugins') | |
| const [ | |
| rpcFunctions, | |
| docks, | |
| clientScripts, | |
| devtoolsPlugins, | |
| ] = await Promise.all([ | |
| rpc.value.call('devtoolskit:self-inspect:get-rpc-functions'), | |
| rpc.value.call('devtoolskit:self-inspect:get-docks'), | |
| rpc.value.call('devtoolskit:self-inspect:get-client-scripts'), | |
| rpc.value.call('devtoolskit:self-inspect:get-devtools-plugins'), | |
| ]) |
- Fetch data lazily when switching tabs instead of all upfront - Add refresh button in the tab bar to re-fetch current tab data - Merge with latest main Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Use Nuxt file-based routing for separate tab pages with PanelSideNav, shared refresh composable, and enhanced views with grouping/badges. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Add a new
@vitejs/devtools-self-inspectpackage — a meta Vite plugin for inspecting the DevTools itself. Useful when developing or debugging DevTools plugins.Features
The plugin provides a "Self Inspect" panel in DevTools that shows the internal state of the DevTools system, helping developers verify their plugin's RPC functions, docks, and client scripts are registered correctly.
Implementation
devtoolskit:self-inspect:namespaceDocumentation
Added "Debugging with Self Inspect" section to the DevTools Plugin guide with installation and usage examples.