WEB06 / BELAJAR DAN MENCOBA
DevTools untuk observasi
Masih dalam pengembangan. Belajar pelan-pelan. Gunakan komputer sendiri dan data contoh.
Isi pelajaran ini
Kita belajar apa?
DevTools adalah alat bawaan browser untuk melihat halaman dan pesan jaringan. Mengubah tampilan melalui alat ini biasanya hanya mengubah browsermu, bukan file di server. Jangan menempel kode asing ke Console.
Bayangkan seperti ini
Seperti membuka kaca penutup mesin agar bisa mengamati, bukan otomatis mengubah pabrik pembuatnya.
Arti kata yang mungkin baru
- server
- program yang menerima permintaan lalu memberi jawaban
- browser
- aplikasi untuk membuka website
- DevTools
- alat bawaan browser untuk melihat halaman dan pesan jaringan
Penjelasan tambahan jika kamu ingin tahu lebih jauh
DevTools membantu inspeksi tanpa mengganti aplikasi server. Network menunjukkan request, Elements menunjukkan DOM, Console menjalankan JavaScript dalam origin halaman, dan Application/Storage memperlihatkan penyimpanan. Menempel kode asing di Console dapat membahayakan akun pada origin tersebut.
Persiapan
Siapkan catatan dan baca panduan perangkat. Pakai data buatan, bukan data pribadi. Baca satu langkah, kerjakan, lalu periksa hasilnya sebelum melanjutkan.
Pelajaran ini tidak meminta kamu menjalankan server lab. Siapkan aplikasi atau file yang disebut pada langkah latihan di bawah.
Langkah latihan
- Buka CyberKit dan alat pengembang browser.
- Lihat Network untuk mencari style.css.
- Lihat Elements atau Inspector dan ubah satu tulisan sementara.
- Muat ulang halaman dan lihat tulisan kembali.
- Lihat penyimpanan progres hanya pada browser sendiri.
Hasil yang diharapkan
Kamu bisa membedakan file sumber, tampilan sementara, dan data yang disimpan browser.
Bandingkan dengan hasilmu sendiri. Jika berbeda, tulis apa yang terlihat lalu baca bagian bantuan di bawah. Jangan mengaku berhasil jika langkahnya belum kamu coba.
Jika terhambat
Berhenti sebentar dan baca pesan yang muncul. Periksa nama file, folder, alamat, dan apakah program latihan masih berjalan. Ulangi satu langkah saja. Jika tetap bingung, minta bantuan guru atau pendamping; jangan mematikan keamanan perangkat.
Petunjuk khusus untuk pelajaran ini
Jangan paste skrip dari pihak lain atau menonaktifkan peringatan paste browser.
Apa yang perlu kamu catat?
Tulis langkah yang kamu lakukan dan hasil yang benar-benar terlihat. Tambahkan satu kalimat: “Saya belajar bahwa …”. Untuk latihan menggambar, simpan gambar dan jawabanmu.
Cek pemahamanmu
Apakah edit Elements mengubah file server?
Buka pembahasan
Tidak.
Tantangan mandiri
Bedakan perubahan file sumber, DOM, dan localStorage.
Pedoman penilaian tantangan
Jawaban harus sesuai hasil aktual, menyebut batas kesimpulan, dan tidak keluar scope. Gunakan langkah serta hasil harapan pelajaran sebagai pembanding; nilai 0 bila belum ada, 1 bila sebagian, 2 bila jelas dan dapat ditinjau.
Perbaikan & retest
Gunakan profil latihan terpisah dan kosongkan data latihan bila selesai.