Narzędzia Diagnostyczne

W kosmosie diagnostyka to kwestia życia i śmierci. Vue DevTools to nasz skaner systemów.

Vue DevTools

Zainstaluj rozszerzenie przeglądarki:

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

Funkcje Diagnostyczne

1. Component Inspector - skanuj drzewo modułów
2. State Inspector - monitoruj dane reaktywne w czasie rzeczywistym
3. Timeline - śledź historię zdarzeń i zmian
4. Router - debuguj nawigację
5. Pinia - zarządzaj bazą danych misji

Protokoły Debugowania

Logowanie zmian systemowych

1import { ref, watch } from 'vue'
2
3const oxygenLevel = ref(98.5)
4
5// Monitoring zmian
6watch(oxygenLevel, (newLevel, oldLevel) => {
7  console.log(`⚠️ Poziom tlenu: ${oldLevel}% → ${newLevel}%`)
8
9  if (newLevel < 90) {
10    console.error('🚨 ALERT: Niski poziom tlenu!')
11  }
12})

Debug w template

1<template>
2  <!-- Panel diagnostyczny -->
3  <div v-if="debugMode" class="debug-panel">
4    <pre>{{ JSON.stringify(systemData, null, 2) }}</pre>
5  </div>
6
7  <!-- Wskaźniki krytyczne -->
8  <div class="critical-systems">
9    <span>O2: {{ oxygen }}%</span>
10    <span>Temp: {{ temperature }}°C</span>
11    <span>Ciśnienie: {{ pressure }} hPa</span>
12  </div>
13</template>

Hot Module Replacement

Vite automatycznie aktualizuje moduły bez restartu:

1[vite] hmr update /src/components/LifeSupport.vue

Zmiany są widoczne natychmiast - krytyczne podczas rozwoju systemów!

Komendy Operacyjne

| Komenda | Opis | |---------|------| |

npm run dev

| Tryb deweloperski (symulator) | |

npm run build

| Kompilacja do wdrożenia | |

npm run preview

| Test wersji produkcyjnej | |

npm run test

| Uruchom testy jednostkowe | |

npm run lint

| Sprawdź jakość kodu |

Przygotowanie do Wdrożenia

1# Kompilacja systemu
2npm run build
3
4# Wynik w katalogu /dist
5dist/
6├── index.html
7├── assets/
8│   ├── index-[hash].js    # Skompilowana logika
9│   └── index-[hash].css   # Skompilowane style

Ten kod poleci na Marsa. Każdy błąd może kosztować życie załogi. Testuj dokładnie!