Framework DevTools: Vue & Angular

React DevTools bukan satu-satunya — Vue dan Angular punya browser extension setara yang penting dikuasai kalau bekerja di stack tersebut. Semuanya menambah tab baru ke Chrome/Firefox DevTools dengan capability framework-specific.

Vue DevTools

Install Vue.js devtools dari Chrome Web Store (support Vue 2 dan Vue 3). Tab baru muncul: Vue.

Components Tab

Tree komponen mirip React DevTools, tapi dengan informasi khas Vue:

<App>
├── <HeaderBar>
│   └── <UserMenu>
├── <ProductList>
│   ├── <ProductCard> × 10
│   └── <Pagination>
└── <Footer>

Klik komponen → panel kanan tampilkan:

• Props — nilai prop dari parent
• Data / Setup — reactive state lokal (ref, reactive, atau data())
• Computed — computed values (yang akan re-evaluate saat dependency berubah)
• Events — event yang di-emit (dengan history!)

Kamu bisa edit nilai data langsung dari panel — komponen re-render otomatis.

Pinia / Vuex Tab

Kalau pakai store:

• Pinia tab menampilkan semua store (state + getters + actions)
• Vuex tab menampilkan modules, mutations, actions

Fitur paling powerful: time-travel debugging — list mutation/action dengan timestamp, klik untuk "rollback" state ke titik itu. Mirip Redux DevTools.

Performance Tab

Catat performa render:

1. Klik Start recording
2. Interaksi di app
3. Stop — tampilkan list komponen yang re-render dengan durasi

Berguna untuk menemukan komponen yang re-render berlebihan (biasanya karena prop reference berubah atau v-for tanpa :key stabil).

Routing Tab

Kalau pakai Vue Router: tampilkan route tree, current route params/query, history navigation. Bisa navigate langsung dari panel.

Angular DevTools

Install Angular DevTools dari Chrome Web Store (support Angular 9+). Tab baru: Angular.

Components Tab

Tree komponen + directive. Mirip Vue/React tapi dengan informasi DI (Dependency Injection):

<app-root>
├── <app-header>
├── <app-product-list>
│   └── <app-product-card> × 10
└── <app-footer>

Klik komponen → panel kanan:

• Properties — @Input values + internal state
• Output — @Output emitters
• Injectors — unik Angular — tampilkan injector tree (hierarchical DI)

Profiler Tab

Inti debugging performa Angular:

1. Klik Start recording
2. Interaksi di app
3. Stop — tampilkan change detection cycles

Setiap "tick" Angular dicatat: komponen mana yang di-check, berapa lama, apakah view update. Ini krusial karena Angular default-nya check SEMUA komponen di setiap tick (Zone.js) — OnPush strategy dan signal (Angular 16+) mengurangi beban.

Look for:

• Frequent ticks — ada event yang trigger terlalu sering
• Long ticks — satu cycle > 16ms menyebabkan jank
• Unnecessary checks — komponen yang re-check tanpa input berubah → kandidat OnPush

Injector Tree

Angular punya hierarchical injector — service bisa di-provide di root, module, atau component. Tab ini visualkan hierarchy + tampilkan provider mana yang di-inject oleh komponen tertentu.

Berguna saat debug "kenapa service ini punya state berbeda di 2 tempat?" — biasanya karena ada multiple provider di level berbeda.

Change Detection Strategy

Klik komponen → tampilkan strategy:

• Default — check di setiap tick
• OnPush — check hanya saat @Input reference berubah atau event handler ter-trigger
• Signal-based (Angular 16+) — fine-grained reactivity, hanya yang baca signal yang re-check

Perbandingan dengan React DevTools

Insight:

• React lebih minimal — ekosistem memberi tool terpisah
• Vue lebih "batteries included" — store + router + performance satu extension
• Angular lebih enterprise — DI inspector dan change detection cycle khas framework ini

Workflow Debugging (Generic)

1. Start with Components tab — lihat tree + state saat reproduce bug
2. Edit state live — konfirmasi hypothesis tanpa edit code
3. Record profile — kalau masalah performa, bukan logika
4. Cek store/state management — kalau bug di data yang shared
5. Cek routing (kalau relevan)

Tips

1. Aktifkan Vue/Angular DevTools di production build biasanya dimatikan — debug di dev build atau special preview build
2. Di Vue, app.config.performance = true memberi measure lebih detail di Performance tab
3. Di Angular, Augury (tool lama) sudah deprecated — pastikan pakai Angular DevTools official
4. Framework DevTools tidak bisa debug framework-internal code (virtual DOM diff, dirty-checking loop) — untuk itu, pakai Sources tab biasa