Latihan 1: Chrome DevTools: Elements — Debugging

Latihan 1 dari materi Chrome DevTools: Elements di Debugging — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Simulasikan workflow DevTools Elements + Network — helper untuk memeriksa DOM dan request.

1. inspectElement(tree, selector)

tree: object { tag, id?, class?, children?: [...] }
selector: CSS selector sederhana — "#id", ".class", atau "tag"
Return array path tag dari root ke element pertama yang match, contoh ["html","body","main","section","h1"]. Return [] kalau tidak ditemukan.

2. summarizeNetworkLog(requests)

requests: array { url, status, type }
Return object { total, ok, failed, byType }:
- ok = status 200-299, failed = 400+
- byType = object count per type ("fetch", "img", dll)

Hint

inspectElement: DFS rekursif. Pass path array yang di-extend di setiap level. Kalau selector match node sekarang → return [...path, node.tag]. Kalau tidak dan ada children → rekursif.
Match selector: selector.startsWith("#") → node.id === selector.slice(1); startsWith(".") → node.class === selector.slice(1); else → node.tag === selector.
summarizeNetworkLog: reduce ke { total, ok, failed, byType }. ok: status >= 200 && status < 300. failed: status >= 400. byType[req.type] = (byType[req.type] || 0) + 1.