Vous lisez la documentation de la version 0.6, qui n'est pas la dernière publiée.

Lire cette page dans la documentation la plus récente (v1.0)

MARS TECH

@mars-tech/vite-debug-pluginUn $debug() global en développement, absent en production

Un plugin Vite libre, conçu par MARS TECH. Un seul appel s'affiche dans la console du navigateur et dans le terminal Vite, puis disparaît de la compilation de production, arguments compris.

Double sortie
Chaque appel s'affiche dans la console du navigateur (avec mise en forme) et dans le terminal Vite (couleurs ANSI), avec une couleur par niveau, une étiquette et un emplacement dans le code source. En 0.6, cet emplacement désigne le code du plugin lui-même et non l'endroit de l'appel.
Comment ça marche
Coût nul en production
Chaque appel $debug(...), formes méthode et chaînée comprises, est remplacé par void 0 à la compilation, puis éliminé du code produit. Les expressions passées en argument ne sont jamais évaluées.
Comportement en production
Prêt pour le rendu serveur
La globale est aussi installée côté serveur : gardes du routeur, actions de gestion d'état et initialisation des pages peuvent journaliser pendant le rendu côté serveur (SSR).
Rendu côté serveur
Espaces de noms et filtrage à l'exécution
Journaux par espace de noms avec $debug.ns('auth'). Choisissez ce qui s'affiche à l'exécution avec enable, disable ou setLevel, le paramètre d'URL ?mt-debug=, localStorage ou la variable MT_DEBUG, sans redémarrage.
Espaces de noms et filtrage
Masquage des secrets
Masquez les jetons, les adresses électroniques et vos propres motifs, aussi bien dans la console du navigateur que dans le terminal de développement et la sortie du rendu serveur.
Masquer les secrets
Fonctions utilitaires
Des fonctions inspirées de console : assert, time/timeEnd, count et group/groupEnd, retirées de la compilation de production comme les appels de base.
Fonctions utilitaires
Création de bibliothèque
allowDebugBuild produit une double variante : votre bibliothèque journalise en développement et ses appels sont retirés de la compilation de production.
Création de bibliothèque
TypeScript et ESLint intégrés
Les types globaux sont livrés dans /client pour tous les modes de résolution de modules, et /eslint fournit une configuration plate qui déclare la globale $debug.
Démarrage rapide

Installation

npmpnpmyarn

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

pnpm add -D @mars-tech/vite-debug-plugin

yarn add -D @mars-tech/vite-debug-plugin

Enregistrez ensuite le plugin dans vite.config.ts :

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

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

Le démarrage rapide ajoute le typage de la globale et la configuration ESLint.

Comment ça marche

La démonstration ci-dessous suit une application Vue sur trois pages. Chaque ligne commence par MARS-TECH, le préfixe par défaut de ce plugin MARS TECH ; l'option prefix le remplace par le vôtre.

Application Vue de démonstration, page d’accueil : l’en-tête et ses trois liens de navigation, un bandeau invitant à ouvrir la console du navigateur et le terminal Vite, puis la carte du compteur Pinia, qui affiche 2 après deux clics sur +1. — Fonctionnement du plugin en 3 étapes : les mêmes appels $debug() affichés dans la console du navigateur et dans le terminal Vite.

Application Vue de démonstration, page À propos : une carte de démonstration de l’API Options qui liste les étapes du cycle de vie, un observateur, une méthode asynchrone et un libellé calculé ; après un clic sur le bouton de déclenchement différé (500 ms), l’état indique un déclenchement. — Fonctionnement du plugin en 3 étapes : les mêmes appels $debug() affichés dans la console du navigateur et dans le terminal Vite.

Le guide « Comment ça marche » reprend ces étapes et explique ce que devient chaque appel dans la compilation de production.

@mars-tech/vite-debug-pluginUn $debug() global en développement, absent en production

Installation​

Comment ça marche​

Installation

Comment ça marche