Vue DevTools - інструмент налагодження Vue-застосунків. Доступний як розширення браузера та як плагін Vite (vite-plugin-vue-devtools), що вбудовує панель прямо в сторінку під час розробки.
Що в ньому корисно:
1. Дерево компонентів. Ієрархія компонентів сторінки, як вона є в застосунку, а не в DOM. Для обраного компонента видно:
- props, які він отримав;
- внутрішній стан (
ref,reactive,computed) - значення можна змінювати на льоту й одразу бачити результат; - події, які він випромінює.
Клік по елементу сторінки в режимі вибору показує, який компонент його відрендерив і в якому файлі він лежить.
2. Pinia. Стан кожного стору, геттери, і історія змін з можливістю повернутися до попереднього стану (time travel). Видно, яка дія що змінила.
3. Vue Router. Поточний маршрут, параметри, список маршрутів, історія переходів.
4. Хронологія (Timeline). Події компонентів, дії Pinia, переходи маршрутизатора, а також рендери й оновлення з тривалістю. Тут видно, який компонент перерендерюється частіше, ніж мав би.
5. Продуктивність. Час рендеру й оновлення кожного компонента - перша зупинка, коли інтерфейс гальмує.
Що варто знати:
- у продакшен-збірці DevTools за замовчуванням вимкнені: Vue прибирає службовий код для них, і розширення нічого не бачить. Це правильно - не вмикайте їх на продакшені без потреби;
- з
<script setup>компоненти показуються з назвою файлу; для анонімних компонентів назву можна задати черезdefineOptions({ name: 'OrderCard' }); - для Inertia-застосунків на Laravel DevTools працюють так само: сторінки Inertia - звичайні Vue-компоненти.
Порядок налагодження «чому не оновлюється»: подивитися в DevTools, чи змінився стан. Якщо змінився, а екран ні - проблема в рендері (ключі, реактивність). Якщо не змінився - у логіці, що мала його змінити.