Skills
.Work. You
Rest

devtools-vite-plugin

Official

Vite Devtools Plugin

Software Engineering#debugging#devtools#vite#editor integration#source inspection#console piping
AuthorTanStack
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: devtools-vite-plugin
Download link: https://github.com/TanStack/devtools/archive/main.zip#devtools-vite-plugin

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.