FluentStack

Uji Kompetensi Browser APIs and Debugging

Mode tersedia: dark, light, paper
MasukDaftar
Intermediate · Level 5: JavaScript AdvancedIntermediate70 menitBahasa Indonesia

Uji Kompetensi Browser APIs and Debugging

Checkpoint kesiapan untuk Browser API dasar, transformasi data, dan strategi debugging JavaScript browser.

StatusMemuat progres
ReadinessMemuat...

...

Memuat progres

Menyiapkan langkah berikutnya

Yang dicek

  • Mengecek pemahaman Browser API dasar
  • Memperbaiki flow data sebelum render
  • Menjelaskan bug dan langkah perbaikannya dengan jelas
JavaScriptBrowser APIsDebuggingAssessment

Isi lesson

6 blok
  1. 1.
    Checkpoint: apakah kamu bisa memakai browser sebagai alat kerja?Belum selesaiWajib
  2. 2.
    QuizBelum selesaiWajib
  3. 3.
    Coding practiceBelum selesaiWajib
  4. 4.
    Writing practiceBelum selesaiWajib
  5. 5.
    Docs bridge sebelum TypeScriptBelum selesaiOpsional
  6. 6.
    RingkasanBelum selesaiWajib

Checkpoint: apakah kamu bisa memakai browser sebagai alat kerja?

Wajib

Module ini bukan tentang menghafal semua API browser. Yang dicek adalah kemampuan memilih API kecil dengan tepat, merapikan data sebelum render, dan mencari bug dengan bukti.

Kalau kamu bisa membaca URL, memakai timer sederhana, menyimpan state kecil, mengubah data mentah, mengecek Network panel, dan menjelaskan bug dengan jelas, kamu siap masuk ke TypeScript dengan pondasi JavaScript yang lebih rapi.

Bagian ini memengaruhi progres lesson.

Quiz

Wajib

Uji Kompetensi Browser APIs and Debugging

Jawab pertanyaan satu per satu. Kamu bisa ulang quiz jika belum mencapai target lulus.

Target lulus

70/100

Skor terbaik

0/100

Status

Belum dikerjakan

Blok ini wajib untuk menyelesaikan lesson. Progres quiz naik setelah skor mencapai target lulus.

Pertanyaan 1 dari 5

Target lulus: 70

Saat ingin membaca nilai `?tab=active` dari URL halaman, API apa yang paling tepat?

Coding practice

WajibDibuka di workspace khusus

Debug browser data flow

Checkpoint untuk membaca URL, menyimpan state kecil, mentransform data, dan menampilkan state UI yang benar.

Tujuan awal: Fokus di tab JS.

Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.

Tombol selesai aktif setelah semua validasi wajib lolos.

10 cek otomatis5 checklist
Belum selesaiBuka practice

Writing practice

Wajib

Latihan menulis

Tulis catatan debugging singkat dalam Bahasa Indonesia. Jelaskan bug yang kamu temukan, bukti yang kamu lihat, kemungkinan penyebab, dan fix path yang akan kamu ambil. Gunakan format: - Bug: - Bukti: - Dugaan penyebab: - Fix path:

Tulis draft dulu sebelum menandai writing practice selesai.

Draft kosong

0/160 karakter

Checklist panduan

Checklist ini hanya panduan. Kamu tidak harus mencentang semuanya.

Blok ini wajib untuk menyelesaikan lesson.

Documentation Bridge

Opsional

Docs bridge sebelum TypeScript

Baca dokumentasi resmi sebagai referensi kerja, bukan daftar yang harus dihafalkan.

MDN

URL API

Fokus baca

  • membuat URL object
  • membaca searchParams
  • membedakan href, pathname, dan search

Abaikan dulu

  • blob URL
  • advanced URL encoding details
Buka dokumentasi

MDN

URLSearchParams

Fokus baca

  • mengambil nilai query dengan get
  • membaca beberapa parameter sederhana
  • hubungan URLSearchParams dengan URL.searchParams

Abaikan dulu

  • iterator detail
  • advanced serialization
Buka dokumentasi

MDN

Window setTimeout

Fokus baca

  • aksi sekali jalan setelah delay
  • callback function
  • timer id untuk clearTimeout saat dibutuhkan

Abaikan dulu

  • nested timeout behavior detail
Buka dokumentasi

MDN

Window setInterval

Fokus baca

  • aksi berulang
  • timer id
  • kapan clearInterval diperlukan

Abaikan dulu

  • this binding edge case
  • advanced scheduling
Buka dokumentasi

MDN

Clipboard API

Fokus baca

  • aksi copy dari user
  • permission dan secure context
  • kenapa clipboard operation bisa gagal

Abaikan dulu

  • custom clipboard formats
Buka dokumentasi

MDN

Web Storage API

Fokus baca

  • localStorage untuk data kecil
  • sessionStorage vs localStorage
  • batas aman pemakaian storage di browser

Abaikan dulu

  • storage quota detail
  • IndexedDB
Buka dokumentasi

Chrome DevTools

Inspect network activity

Fokus baca

  • melihat request
  • membaca status dan response
  • menggunakan reload untuk menangkap request awal

Abaikan dulu

  • HAR export
  • advanced throttling
Buka dokumentasi

Chrome DevTools

Debug JavaScript

Fokus baca

  • menaruh breakpoint
  • melihat variable saat pause
  • melangkah melalui kode untuk menemukan nilai yang berubah

Abaikan dulu

  • source maps detail
  • blackboxing scripts
Buka dokumentasi

Aksi setelah membaca

Pilih satu bug kecil di local project, lalu tulis satu catatan README: gejala, bukti, penyebab, dan perubahan yang kamu lakukan.

Opsional, tidak menghambat penyelesaian lesson.

Ringkasan

Wajib
  • Browser API dipakai saat ada kebutuhan produk yang jelas.
  • Data sebaiknya ditransformasi sebelum render.
  • Network panel membantu memastikan request dan response.
  • Console dan breakpoint membantu mengisolasi nilai yang salah.
  • Setelah ini, TypeScript akan membantu memberi struktur yang lebih kuat pada data dan function yang mulai kompleks.

Bagian ini memengaruhi progres lesson.

Langkah berikutnya

Selesaikan bagian wajib checkpoint ini

Lanjutkan blok wajib berikutnya: Checkpoint: apakah kamu bisa memakai browser sebagai alat kerja?.

Memuat progresReview module