Démarrage rapide

Compatibilité

Pile technique	Versions testées
Vite	6.x · 7.x · 8.x
Node.js	≥ 20.19 (LTS 22 recommandé)
Vue	3.5+ (Composition + Options API, Pinia, Vue Router)
React	18+ (Redux Toolkit, React Router)
Angular	20+ via Analog (NgRx, Angular Router)
Nuxt	4.x (Pinia, route middleware)
Moteurs SSR	Vite SSR, Analog, Nitro/Nuxt, vite-node

Consultez les recettes par framework pour des extraits de sites d'appel par pile.

Installation

npm install -D @mars-tech/vite-debug-plugin

Démarrage rapide (30 secondes)

npm create vite@latest mon-app -- --template vue-ts
cd mon-app
npm install -D @mars-tech/vite-debug-plugin

Ajoutez mtDebug() au tableau plugins de vite.config.ts, déposez une référence triple-slash dans src/vite-env.d.ts, puis appelez $debug('info', 'hello') n'importe où dans src/. Ouvrez la console des outils de développement du navigateur et le terminal Vite côte à côte pour voir la même ligne s'afficher des deux côtés. Les étapes ci-dessous détaillent chaque partie.

Utilisation

1. Ajouter le plugin

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import mtDebug from "@mars-tech/vite-debug-plugin";

export default defineConfig({
  plugins: [vue(), mtDebug()],
});

L'export par défaut est la fabrique du plugin — fonctionne à l'identique avec import (ESM) et require() (CommonJS). Tous les réglages qu'elle accepte sont décrits dans Options du plugin.

2. Activer le typage global

Ajoutez une référence triple-slash là où vivent les types ambiants de votre projet (typiquement src/vite-env.d.ts) :

/// <reference types="@mars-tech/vite-debug-plugin/client" />

La résolution de modules doit lire la table exports du paquet (moduleResolution: "bundler", "node16" ou "nodenext"). En "node10" / "classic" (modes hérités), le paquet livre aussi un client.d.ts à la racine qui se résout par chemin — rien à changer.

Déclarer la globale à ESLint

TypeScript connaît désormais $debug, mais la règle no-undef d'ESLint ne lit pas les types TS — elle signalera '$debug' is not defined. Étalez la configuration plate livrée pour déclarer la globale :

// eslint.config.js (config plate, ESLint 9+)
import mtDebug from "@mars-tech/vite-debug-plugin/eslint";

export default [
  mtDebug, // déclare $debug en globale readonly
  // ...vos autres configs
];

• globalName personnalisé ? Utilisez la fabrique : import { mtDebugFlatConfig } from "@mars-tech/vite-debug-plugin/eslint" → mtDebugFlatConfig({ globalName: "$log" }).
• Ancien format .eslintrc : const { mtDebugGlobals } = require("@mars-tech/vite-debug-plugin/eslint") → { globals: mtDebugGlobals() }.
• Les projets TypeScript peuvent aussi simplement désactiver no-undef pour les fichiers .ts — tsc détecte déjà les noms non définis.

3. Appeler $debug dans votre code de développement

$debug("warning", new Error('Invalid variant "danger"'), {
  tag: "PropsValidator",
});

Sortie (à la fois dans la console du navigateur et dans le terminal Vite) :

MARS-TECH Warning [PropsValidator] - Invalid variant "danger"

MARS-TECH est le prefix par défaut, suivi du libellé du niveau, du tag et du message. Quand l'emplacement source est affiché (le comportement par défaut de showSourceLocation), la ligne se termine aussi par un emplacement (fichier:ligne:colonne). En 0.6, cet emplacement désigne le code du plugin lui-même et non l'endroit de l'appel : dans le navigateur, l'environnement d'exécution injecté (par exemple /@mars-tech-vite-debug/runtime:201:3), côté serveur, l'environnement d'exécution SSR ou le journaliseur du serveur de développement du plugin. La version 1.0 corrige ce défaut.

Pour aller plus loin

• L'API $debug : signature d'appel, rendu des charges utiles et fonctions utilitaires.
• Recettes par framework : sites d'appel idiomatiques en Vue, React, Angular et Nuxt.
• Espaces de noms et filtrage : choisir ce qui s'affiche à l'exécution, sans redémarrer.
• Comportement en production : ce que deviennent les appels avec vite build.