Outils de diagnostic

Dans l'espace, le diagnostic est une question de vie ou de mort. Vue DevTools est notre scanner de systèmes.

Un panneau affiche un mauvais relevé et tu ne sais pas pourquoi : est-ce la faute des données, du template, ou le composant ne s'est-il même pas affiché ? Ajouter des console.log à dix endroits, c'est jouer aux devinettes. Il te faut des outils qui montrent l'intérieur d'une application en marche.

Vue DevTools

Vue DevTools, ce sont les outils de développement officiels de Vue ; les versions 7 et suivantes ne prennent en charge que Vue 3. La première façon de les installer est l'extension de navigateur :

• Chrome : Vue.js devtools
• Firefox : Vue.js devtools
• Edge : Vue.js devtools

La deuxième façon est le plugin vite-plugin-vue-devtools, que l'assistant create-vue ajoute lui-même à la configuration de Vite. En mode développement, tu ouvres alors le panneau avec un bouton en bas de la page, sans rien installer dans le navigateur. Dans les projets Vite, je te recommande justement cette voie - la documentation des DevTools la conseille pour ses fonctionnalités supplémentaires.

Fonctions de diagnostic

1. Component Inspector - scanne l'arbre des modules
2. State Inspector - surveille les données réactives en temps réel
3. Timeline - suis l'historique des événements et des changements
4. Router - débogue la navigation
5. Pinia - gère la base de données de la mission

Dans les versions actuelles, l'inspecteur de composants et celui de l'état forment un seul onglet, Components : l'arbre à gauche, et à droite les données du composant sélectionné, que tu peux modifier en direct. L'arbre d'une application typique ressemble à ceci :

1App
2└── MainLayout          (layout : en-tête, barre latérale)
3    └── DashboardView   (vue)
4        ├── OxygenCard  (UI)
5        └── AlertButton (UI)

Au sommet se trouve le composant racine, en dessous le layout, dans le layout une vue, et tout au bout les plus petits éléments d'interface. Clique sur n'importe quel nœud et tu verras ses données à côté.

Protocoles de débogage

Journaliser les changements du système

Parfois, tu veux réagir à chaque changement, par exemple l'écrire dans la console ou déclencher une alarme. C'est le rôle de la fonction watch : le premier argument est la source surveillée, le second une fonction que Vue appelle après chaque changement, avec la nouvelle et l'ancienne valeur :

1import { ref, watch } from 'vue'
2
3const oxygenLevel = ref(98.5)
4
5// Surveillance des changements
6watch(oxygenLevel, (newLevel, oldLevel) => {
7  console.log(`Niveau d'oxygène : ${oldLevel}% → ${newLevel}%`)
8
9  if (newLevel < 90) {
10    console.error("ALERTE : Niveau d'oxygène bas !")
11  }
12})

Mets oxygenLevel.value à 88, et la console affiche une entrée avec une flèche, puis une alerte rouge. watch n'affiche rien et ne modifie pas le niveau d'oxygène - il se contente de réagir. La différence avec computed est simple : computed calcule une valeur, watch exécute une action.

Débogage dans le template

La deuxième technique est un panneau de diagnostic dans le template. La directive v-if n'affiche un élément que si la condition est vraie, et JSON.stringify transforme un objet de données en texte lisible :

1<template>
2  <!-- Panneau de diagnostic -->
3  <div v-if="debugMode" class="debug-panel">
4    <pre>{{ JSON.stringify(systemData, null, 2) }}</pre>
5  </div>
6
7  <!-- Indicateurs critiques -->
8  <div class="critical-systems">
9    <span>O2 : {{ oxygen }}%</span>
10    <span>Temp : {{ temperature }}°C</span>
11    <span>Pression : {{ pressure }} hPa</span>
12  </div>
13</template>

Quand debugMode est faux, Vue ne crée pas du tout le panneau de diagnostic, et les indicateurs en dessous continuent de fonctionner sans changement. Les variables utilisées dans le template sont déclarées avec ref() dans la section <script setup>, omise ici.

Simulateur de capteur

Pour les tests, un champ dans lequel tu tapes un relevé est bien pratique. La directive v-model relie le champ à un conteneur dans les deux sens : le nombre tapé arrive dans oxygen, et un changement de oxygen dans le code arrive dans le champ. La paire v-if et v-else affiche l'un des deux paragraphes :

1<template>
2  <input v-model="oxygen" type="number" />
3  <p v-if="oxygen >= 90">Oxygène normal</p>
4  <p v-else>ALERTE : niveau d'oxygène bas</p>
5</template>
6
7<script setup>
8import { ref } from 'vue'
9
10const oxygen = ref(95)
11</script>

Tape 85, et l'alerte remplace le message normal. v-else doit venir juste après l'élément portant v-if, car il se rapporte à sa condition. Tu découvriras les directives conditionnelles à l'Atelier des Hologrammes, et les formulaires avec v-model au Simulateur de Contrôle.

Hot Module Replacement

Vite met automatiquement à jour les modules sans redémarrage, et le terminal du serveur signale quel fichier il a remplacé :

112:04:31 [vite] (client) hmr update /src/components/LifeSupport.vue

Le format de l'heure dépend des réglages de ton système, et (client) désigne l'environnement du navigateur. Les changements sont visibles instantanément - crucial pendant le développement des systèmes !

Commandes opérationnelles

Ce sont des scripts de package.json que l'assistant ajoute selon les options choisies - d'où test:unit au lieu de test tout court. Un cycle de travail typique : npm run dev, modification des composants, rafraîchissement par le HMR, puis avant le déploiement npm run build et la vérification du résultat avec npm run preview.

Préparer le déploiement

Le build se déroule en quatre étapes. Vite part de index.html et y trouve le script d'entrée. Ensuite, Rolldown charge les modules un par un : chacun est d'abord transformé (le plugin Vue compile les fichiers .vue, et l'outil Oxc transforme TypeScript et JSX en JavaScript), puis Rolldown lit ses imports et va chercher les fichiers suivants, ce qui construit le graphe de dépendances. Puis Rolldown regroupe les modules en paquets, supprime le code inutilisé et minifie le résultat, et enfin les fichiers atterrissent dans le dossier dist. Jusqu'à la version 7, la transformation était assurée par esbuild et le regroupement par Rollup.

1# Compiler le système
2npm run build
3
4# Sortie dans le répertoire /dist
5dist/
6├── index.html
7├── assets/
8│   ├── index-[hash].js    # Logique compilée
9│   └── index-[hash].css   # Styles compilés

[hash] est une empreinte du contenu du fichier : quand le code change, le nom change aussi, donc le navigateur n'utilisera pas une ancienne version de son cache. npm run preview sert ce dossier en local, mais ce n'est pas un serveur de production - nous nous occuperons du déploiement sur la Plateforme de Lancement.

Ce code va voler vers Mars. Chaque bug peut coûter la vie de l'équipage. Teste minutieusement ! Dans l'éditeur ci-dessous, change le compteur, tape un message et bascule le système en observant les mêmes changements dans les DevTools.

Retiens ceci : les DevTools montrent l'intérieur du système, watch réagit à chaque changement, et npm run build emballe le code vérifié dans le dossier dist.

1<template>
2  <div class="nova-lab">
3    <h1>Vue DevTools</h1>
4
5    <section class="info">
6      <h2>Ton meilleur ami pendant le développement</h2>
7      <p>
8        Vue DevTools est une extension de navigateur qui te permet de :
9      </p>
10      <ul>
11        <li>Parcourir l'arborescence des composants</li>
12        <li>Inspecter et éditer l'état</li>
13        <li>Suivre les événements</li>
14        <li>Déboguer les stores Pinia</li>
15        <li>Analyser les performances</li>
16      </ul>
17    </section>
18
19    <section class="demo">
20      <h2>État interactif</h2>
21      <p>Ouvre les DevTools et observe comment l'état change :</p>
22
23      <div class="state-demo">
24        <div class="counter">
25          <button @click="count--">-</button>
26          <span>{{ count }}</span>
27          <button @click="count++">+</button>
28        </div>
29
30        <div class="input-demo">
31          <input v-model="message" placeholder="Écris un message..." />
32          <p>{{ message }}</p>
33        </div>
34
35        <div class="toggle-demo">
36          <label>
37            <input type="checkbox" v-model="isActive" />
38            Système actif
39          </label>
40          <div class="status" :class="{ active: isActive }">
41            {{ isActive ? 'ONLINE' : 'OFFLINE' }}
42          </div>
43        </div>
44      </div>
45    </section>
46
47    <section class="install">
48      <h2>Installation</h2>
49      <div class="browser-links">
50        <a href="https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd" target="_blank" class="browser-btn">
51          Chrome
52        </a>
53        <a href="https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/" target="_blank" class="browser-btn">
54          Firefox
55        </a>
56        <a href="https://microsoftedge.microsoft.com/addons/detail/vuejs-devtools/olofadcdnkkjdfgjcmjaadnlehnnihnl" target="_blank" class="browser-btn">
57          Edge
58        </a>
59      </div>
60    </section>
61  </div>
62</template>
63
64<script setup>
65import { ref } from 'vue'
66
67const count = ref(0)
68const message = ref('')
69const isActive = ref(true)
70</script>
71
72<style>
73.nova-lab {
74  min-height: 100vh;
75  background: #0a0e27;
76  color: #e0e0e0;
77  padding: 2rem;
78  font-family: system-ui, sans-serif;
79}
80
81h1 {
82  color: #00ff88;
83  text-align: center;
84}
85
86section {
87  background: rgba(26, 30, 55, 0.8);
88  border: 1px solid #00b4d8;
89  border-radius: 12px;
90  padding: 1.5rem;
91  margin: 1.5rem auto;
92  max-width: 600px;
93}
94
95h2 {
96  color: #00b4d8;
97  margin-top: 0;
98}
99
100ul {
101  list-style: none;
102  padding: 0;
103}
104
105ul li {
106  padding: 0.5rem 0;
107  border-bottom: 1px solid rgba(0, 180, 216, 0.2);
108}
109
110ul li::before {
111  content: "» ";
112  color: #00ff88;
113}
114
115.state-demo {
116  display: flex;
117  flex-direction: column;
118  gap: 1rem;
119}
120
121.counter {
122  display: flex;
123  align-items: center;
124  justify-content: center;
125  gap: 1rem;
126}
127
128.counter button {
129  width: 40px;
130  height: 40px;
131  background: #00b4d8;
132  color: #0a0e27;
133  border: none;
134  border-radius: 8px;
135  font-size: 1.25rem;
136  cursor: pointer;
137}
138
139.counter span {
140  font-size: 1.5rem;
141  font-weight: bold;
142  color: #00ff88;
143  min-width: 60px;
144  text-align: center;
145}
146
147.input-demo input {
148  width: 100%;
149  padding: 0.75rem;
150  background: #1a1e37;
151  border: 2px solid #00b4d8;
152  border-radius: 8px;
153  color: #fff;
154}
155
156.input-demo p {
157  color: #00ff88;
158  font-style: italic;
159  min-height: 1.5rem;
160}
161
162.toggle-demo {
163  display: flex;
164  align-items: center;
165  justify-content: space-between;
166}
167
168.toggle-demo label {
169  display: flex;
170  align-items: center;
171  gap: 0.5rem;
172  cursor: pointer;
173}
174
175.status {
176  padding: 0.5rem 1rem;
177  border-radius: 20px;
178  font-weight: bold;
179  background: rgba(255, 68, 68, 0.2);
180  color: #ff4444;
181}
182
183.status.active {
184  background: rgba(0, 255, 136, 0.2);
185  color: #00ff88;
186}
187
188.browser-links {
189  display: flex;
190  gap: 1rem;
191  justify-content: center;
192  flex-wrap: wrap;
193}
194
195.browser-btn {
196  padding: 0.75rem 1.5rem;
197  background: #1a1e37;
198  border: 2px solid #00b4d8;
199  border-radius: 8px;
200  color: #00b4d8;
201  text-decoration: none;
202  transition: all 0.2s;
203}
204
205.browser-btn:hover {
206  background: #00b4d8;
207  color: #0a0e27;
208}
209</style>