Chrome DevTools: Elemen, Konsol, Jaringan
Jelajahi panel Elements, Console, dan Network untuk memeriksa gaya, men-debug kesalahan JavaScript, dan memantau permintaan HTTP.
Chrome DevTools: Elemen, Konsol, Jaringan adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Membuka DevTools secara Efisien
Klik kanan elemen apa pun dan pilih Inspect untuk membuka DevTools dengan elemen tersebut terpilih. F12 menampilkan atau menyembunyikan panel. Cmd+Shift+C (Mac) atau Ctrl+Shift+C (Windows) langsung masuk ke mode inspeksi tanpa membuka panel lengkap.
Panel Elements — Pemeriksa DOM
Panel Elements menampilkan pohon DOM aktif yang telah diurai, bukan sumber HTML mentah. Panel ini mencerminkan modifikasi JavaScript. Arahkan kursor ke simpul untuk menyorotnya pada halaman. Klik dua kali untuk mengedit HTML secara langsung.
Panel Styles dan Computed
Setelah elemen dipilih, panel Styles menampilkan semua aturan CSS yang diterapkan, diurutkan berdasarkan kekhususan. Aturan yang dicoret telah ditimpa. Panel Computed menampilkan nilai akhir yang dihitung untuk setiap properti.
Memaksa Status Elemen
Klik tombol :hov di panel Styles untuk memaksa status CSS seperti :hover, :focus, :active, atau :visited. Periksa gaya hover tanpa harus menahan kursor agar tetap diam sempurna.
Visualisasi Model Kotak
Panel Computed menampilkan diagram model kotak interaktif: konten, ruang dalam, batas, dan jarak luar. Arahkan kursor ke setiap bagian untuk melihat nilainya. Klik untuk mengedit nilai jarak luar dan ruang dalam secara langsung.
Dasar-Dasar Konsol — Mencatat dan Menjalankan Kode
Konsol menampilkan galat, peringatan, dan catatan. Ketik ekspresi JavaScript apa pun lalu tekan Enter untuk mengevaluasinya terhadap halaman aktif. Gunakan Konsol sebagai REPL interaktif untuk langsung menguji potongan kode.
// Examples to type in the Console:
document.title
document.querySelectorAll('a').length
['a','b','c'].map(x => x.toUpperCase())Metode API Konsol
Selain console.log: console.warn() (peringatan kuning), console.error() (merah), console.table() (menampilkan larik/objek sebagai tabel), console.group() / console.groupEnd() untuk keluaran yang dikelompokkan, dan console.time() untuk mengukur waktu.
Ikhtisar Panel Jaringan
Setiap permintaan HTTP (HTML, JS, CSS, gambar, XHR, Fetch) muncul sebagai satu baris. Kolom menampilkan metode, status, ukuran, dan waktu. Klik satu baris untuk melihat detail lengkap permintaan dan respons.
Memfilter Permintaan Jaringan
Gunakan bilah filter untuk mencari berdasarkan URL atau memfilter berdasarkan jenis: Semua, XHR/Fetch, JS, CSS, Gambar, Media, Fon, WS. Filter XHR/Fetch paling berguna saat men-debug panggilan API dari JavaScript.
Memeriksa Permintaan dan Respons
Pilih permintaan jaringan untuk melihat: Header (permintaan dan respons), Pratinjau (JSON/HTML yang telah diformat), Respons (isi mentah), dan Waktu (tahapan koneksi). Tab Payload menampilkan parameter isi POST.
Pembatasan — Menyimulasikan Jaringan Lambat
Klik menu tarik-turun pembatasan (default: Tanpa pembatasan) untuk menyimulasikan 3G Lambat, 3G Cepat, atau Luring. Kotak centang Nonaktifkan tembolok mencegah peramban menggunakan sumber daya yang tersimpan di tembolok selama pengujian.
Pemeriksaan Singkat
Di bagian mana pada Chrome DevTools Anda dapat melihat semua aturan CSS yang diterapkan pada elemen terpilih, termasuk aturan yang telah ditimpa?
Rangkuman: Panel Chrome DevTools
Elements: periksa dan edit DOM serta CSS aktif. Paksa status semu untuk memeriksa gaya hover. Konsol: catat, debug, dan jalankan JS secara langsung. Network: pantau semua permintaan HTTP, periksa header dan respons, serta batasi jaringan untuk menyimulasikan koneksi lambat.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Chrome DevTools: Elemen, Konsol, Jaringan” gratis?
Ya — teks lengkap “Chrome DevTools: Elemen, Konsol, Jaringan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Chrome DevTools: Elemen, Konsol, Jaringan”?
Jelajahi panel Elements, Console, dan Network untuk memeriksa gaya, men-debug kesalahan JavaScript, dan memantau permintaan HTTP. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Chrome DevTools: Elemen, Konsol, Jaringan” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Chrome DevTools: Elemen, Konsol, Jaringan
- VSCode: Ekstensi, Emmet, Pintasan
- Pengaturan Prettier dan ESLint
- Kompatibilitas Browser dan caniuse.com