skills.rest
TanStack
TanStackOFFICIAL
Explore all skills by this author →
Website𝕏@tan_stackGitHub

devtools-vite-plugin

Configure the @tanstack/devtools-vite plugin for Vite projects.

485|92|Updated Jul 25, 2025
Search Tags:#debugging#devtools#vite#editor integration#source inspection#console piping
One-click install
npx skills add https://github.com/TanStack/devtools --skill devtools-vite-plugin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: devtools-vite-plugin
Source: https://github.com/TanStack/devtools/tree/main/packages/devtools-vite/skills/devtools-vite-plugin
Command: npx skills add https://github.com/TanStack/devtools --skill devtools-vite-plugin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enhances the TanStack Devtools experience within Vite projects by providing advanced debugging capabilities like source code inspection, console log piping, and editor integration.

Core Features & Use Cases

  • Source Inspection: Enables "Go to Source" functionality by adding data-tsd-source attributes to JSX elements, allowing direct navigation to component source code from the browser.
  • Console Piping: Facilitates bidirectional console logging between the browser and the server, making debugging SSR or server-side logic easier.
  • Editor Integration: Allows opening source files directly in your configured code editor via hotkeys or specific commands.
  • Use Case: When debugging a complex React application built with Vite, you can use the "Go to Source" feature to instantly jump from a rendered component in the browser to its exact location in your codebase.

Quick Start

Add the devtools plugin to your vite.config.ts file.

Frequently Asked Questions about devtools-vite-plugin

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable source code inspection in my Vite project?▼

Source code inspection in Vite is enabled by adding the devtools plugin to your configuration, which injects data-tsd-source attributes into JSX elements for direct browser-to-editor navigation. This allows you to instantly jump to component source code from the rendered UI.

Can I pipe console logs between the browser and Vite server?▼

Yes, bidirectional console piping between the client and server is supported. This feature facilitates logging browser output on the server and vice versa, making it significantly easier to debug SSR and server-side logic within your Vite application.

What version of Vite is required for TanStack devtools integration?▼

TanStack devtools integration requires Vite version 6 or version 7. Additionally, the plugin must be registered as the very first plugin in your Vite configuration array to function correctly and enable advanced debugging workflows.

What is the best way to jump from a rendered React component to its source code?▼

The Go to Source functionality provides direct navigation from a rendered browser component to its exact codebase location. It works by adding data-tsd-source attributes to JSX elements, allowing you to open source files directly in your configured code editor via hotkeys.

Why does my Vite devtools configuration fail to enable editor integration?▼

Editor integration fails if the devtools plugin is not the first plugin in your Vite configuration array. Ensure your project runs on Vite v6 or v7 and the plugin is positioned correctly to support direct source file opening via hotkeys.

Related Skills

Explore More Software Engineering Skills→
MonosenMonosen

vite

Configure Vite projects, manage plugins, and migrate to Rolldown in Vite 8.

Community
Intermediate
markus41markus41
1

nextjs

Build Next.js applications with App Router, Server Components, and API routes.

Community
Intermediate
MadAppGangMadAppGang
7

state-management

Guide React and Vue state management with Zustand, Pinia, and TanStack Query.

Official
Intermediate
cill-i-amcill-i-am

devtools-vite-plugin

Orchestrate TanStack Devtools integration in Vite with plugin ordering and production stripping.

Community
Advanced