Vite Plugin

Das Vite-Plugin für TanStack Devtools bietet eine nahtlose Integration für die Verwendung der Devtools in Ihren Vite-basierten Anwendungen. Mit diesem Plugin erhalten Sie zusätzliche Funktionen zusätzlich zu den bereits in den Devtools integrierten Funktionen, wie z. B. bessere Konsolenprotokolle, Server-Eventbus und erweiterte Debugging-Möglichkeiten.

Installation

Um das Devtools-Vite-Plugin hinzuzufügen, müssen Sie es als Entwicklungsabhängigkeit installieren

npm install -D @tanstack/devtools-vite

npm install -D @tanstack/devtools-vite

Fügen Sie es dann als *ERSTES* Plugin in Ihre Vite-Konfiguration ein

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
  ],
}

Und fertig!

Konfiguration

Sie können das Devtools-Plugin konfigurieren, indem Sie Optionen an die devtools-Funktion übergeben

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

Konfiguration für den Eventbus, den die Devtools zur Kommunikation mit dem Client verwenden

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
      }, 
    }),
    // ... 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
      }, 
    }),
    // ... rest of your plugins here
  ],
}

editor

Wichtig

editor wird nur für Editoren benötigt, die NICHT VS Code sind. Standardmäßig funktioniert dies mit VS Code einwandfrei. Wenn Sie code nicht in Ihrem Terminal verfügbar haben, müssen Sie es trotzdem einrichten. Wenn Sie nicht wissen, wie das geht, können Sie dieser Anleitung folgen: https://stackoverflow.com/questions/29955500/code-is-not-working-in-on-the-command-line-for-visual-studio-code-on-os-x-ma

Die Konfiguration "Im Editor öffnen", die zwei Felder enthält: name und open. name ist der Name Ihres Editors, und open ist eine Funktion, die den Editor mit der angegebenen Datei und Zeilennummer öffnet. Sie können Ihre eigene Version für Ihren Editor wie folgt implementieren

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

Konfiguration für erweitertes Logging. Standardmäßig aktiviert.

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
  ],
}

injectSource

Konfiguration für die Quellcode-Einbindung. Standardmäßig aktiviert.

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

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

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

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

Funktionen

Zur Quelle springen

Ermöglicht es Ihnen, durch Anklicken von Elementen im Browser zu deren Quellcode zu springen.

Um dieses Verhalten auszulösen, müssen das Devtools Vite-Plugin installiert und konfiguriert sein und das Panel auf der Seite verfügbar sein. Klicken Sie einfach auf ein beliebiges Element, während Sie die Umschalttaste und die Strg-Taste (oder Meta-Taste) gedrückt halten.

Erweiterte Konsolenprotokolle

Ermöglicht es Ihnen, direkt aus dem Browser/Terminal zur Stelle des Konsolenprotokolls zu springen