📄 tanstack/devtools/latest/docs/vite-plugin

The Vite Plugin for TanStack Devtools provides a seamless integration for using the devtools in your Vite-powered applications. With this plugin, you get complementary features on top of the existing features built into the devtools like better console logs, server event bus, and enhanced debugging capabilities.

Installation
------------

To add the devtools vite plugin you need to install it as a development dependency:

npm install -D @tanstack/devtools-vite


npm install -D @tanstack/devtools-vite

Then add it as the FIRST plugin in your Vite config:

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools(),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools(),\
    // ... rest of your plugins here\
  ],
}

And you're done!

Configuration
-------------

You can configure the devtools plugin by passing options to the devtools function:

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      // options here\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      // options here\
    }),\
    // ... rest of your plugins here\
  ],
}

### eventBusConfig

Configuration for the event bus that the devtools use to communicate with the client

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      eventBusConfig: {\
        // port to run the event bus on\
        port: 1234,\
        // console log debug logs or not\
        debug: false,\
        // enables the server event bus (defaults to true), you can disable it if you're running devtools in something like storybook or vitest\
        enabled: true\
      },\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      eventBusConfig: {\
        // port to run the event bus on\
        port: 1234,\
        // console log debug logs or not\
        debug: false,\
        // enables the server event bus (defaults to true), you can disable it if you're running devtools in something like storybook or vitest\
        enabled: true\
      },\
    }),\
    // ... rest of your plugins here\
  ],
}

### editor

Important

editor is used as an escape hatch to implement your own go-to-source functionality if your system/editor does not work OOTB. We use launch-editor under the hood which supports a lot of editors but not all. If your editor is not supported you can implement your own version here. Here is the list of supported editors: https://github.com/yyx990803/launch-editor?tab=readme-ov-file#supported-editors

The open in editor configuration which has two fields, name and open, name is the name of your editor, and open is a function that opens the editor with the given file and line number. You can implement your version for your editor as follows:

import { devtools } from '@tanstack/devtools-vite'

export default {
 plugins: [\
   devtools({\
     editor: {\
       name: 'VSCode',\
       open: async (path, lineNumber, columnNumber) => {\
         const { exec } = await import('node:child_process')\
         exec(\
           // or windsurf/cursor/webstorm\
           `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,\
         )\
       },\
     },\
   }),\
   // ... rest of your plugins here\
 ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
 plugins: [\
   devtools({\
     editor: {\
       name: 'VSCode',\
       open: async (path, lineNumber, columnNumber) => {\
         const { exec } = await import('node:child_process')\
         exec(\
           // or windsurf/cursor/webstorm\
           `code -g "${(path).replaceAll('$', '\\$')}${lineNumber ? `:${lineNumber}` : ''}${columnNumber ? `:${columnNumber}` : ''}"`,\
         )\
       },\
     },\
   }),\
   // ... rest of your plugins here\
 ],
}

### enhancedLogs

Configuration for enhanced logging. Defaults to enabled.

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      enhancedLogs: {\
        enabled: true\
      }\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      enhancedLogs: {\
        enabled: true\
      }\
    }),\
    // ... rest of your plugins here\
  ],
}

### removeDevtoolsOnBuild

Whether to remove devtools from the production build. Defaults to true.

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      removeDevtoolsOnBuild: true\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      removeDevtoolsOnBuild: true\
    }),\
    // ... rest of your plugins here\
  ],
}

### logging

Whether to log information to the console. Defaults to true.

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      logging: true\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      logging: true\
    }),\
    // ... rest of your plugins here\
  ],
}

### injectSource

Configuration for source injection. Defaults to enabled.

import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      injectSource: {\
        enabled: true,\
        ignore: {\
          // files to ignore source injection for\
          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],\
          // components to ignore source injection for\
          components: ['YourComponent', /.*Lazy$/],\
        },\
      }\
    }),\
    // ... rest of your plugins here\
  ],
}


import { devtools } from '@tanstack/devtools-vite'

export default {
  plugins: [\
    devtools({\
      injectSource: {\
        enabled: true,\
        ignore: {\
          // files to ignore source injection for\
          files: ['node_modules', /.*\.test\.(js|ts|jsx|tsx)$/],\
          // components to ignore source injection for\
          components: ['YourComponent', /.*Lazy$/],\
        },\
      }\
    }),\
    // ... rest of your plugins here\
  ],
}

Features
-------- ### Go to source

Allows you to open the source location on anything in your browser by clicking on it.

To trigger this behavior you need the Devtools Vite plugin installed and configured and the Panel available on the page. Simply click on any element while holding down the Shift and Ctrl (or Meta) keys.

### Advanced console logs

Allows you to go directly to the console log location directly from the browser/terminal

Edit on GitHub

Installation

Third party plugins

Partners Become a Partner