Simulasikan skenario debugging dengan framework DevTools — analisis component tree, state, dan change detection.

1. findComponentByState(tree, predicate)

• tree: component tree { name, state, children? }
• predicate(state): return true kalau state match
• Return array nama komponen (dari root ke match) untuk komponen pertama yang match — mirip klik di Components tab Vue/Angular DevTools.

2. analyzeChangeDetection(cycles)

• cycles: array { componentName, checked, duration, inputChanged }
• Return { unnecessaryChecks, avgDuration, recommendation }:
  • unnecessaryChecks = count cycle di mana checked === true tapi inputChanged === false
  • avgDuration = rata-rata durasi SEMUA cycle (bulatkan integer)
  • recommendation: "OnPush" kalau unnecessaryChecks > 50% total, else "OK"

3. pickDevTools(framework)

• Input: "react", "vue", atau "angular"
• Return nama extension resmi sebagai string.

Hint

• findComponentByState: DFS rekursif, track path. Kalau predicate(node.state) true → return [...path, node.name]. Else rekursif ke children. Kalau tidak ada match di subtree → return null, lanjut sibling.
• analyzeChangeDetection: unnecessaryChecks = cycles.filter(c => c.checked && !c.inputChanged).length. avgDuration = Math.round(sum(durations)/length). recommendation = unnecessaryChecks > cycles.length / 2 ? "OnPush" : "OK".
• pickDevTools: map sederhana { react: "React Developer Tools", vue: "Vue.js devtools", angular: "Angular DevTools" }[framework]. Nama extension harus persis.