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.

Bikin dua helper yang meniru kerja DevTools. Data dom, data reqs, dan semua console.log di bawahnya sudah ada, biarkan.

1. inspectElement(tree, selector), seperti Ctrl+F dan breadcrumb di Elements:

  1. tree adalah object { tag, id, class, children } (id, class dan children boleh gak ada).
  2. selector bentuknya #id, .class, atau nama tag.
  3. Return array nama tag dari akar ke elemen pertama yang cocok (cek node-nya dulu, lalu anak-anaknya berurutan). Kalau gak ada yang cocok, return [].

2. summarizeNetworkLog(requests), seperti panel Network:

  1. requests adalah array { url, status, type }.
  2. Return object { total, ok, failed, byType }: total jumlah request, ok status 200 sampai 299, failed status 400 ke atas (3xx bukan keduanya), byType jumlah per type, misalnya { doc: 1, fetch: 2, img: 2 }.

Console harus mencetak, berurutan: html>body>main>section>h1, html>body>main>section, html>body>main>section>h1, 0, 5, 3, 2, 2, 2.

Function-nya juga dicek dengan data lain: pada pohon html yang punya anak p berclass note, selector .note harus memberi html>p; request berstatus 302 membuat ok = 0; dan request bertipe xhr membuat byType.xhr = 1.

Hint