Frontend Academy · Pelajaran

Alat Pengembang: Membuka dan Menggunakan DevTools

Buka Chrome DevTools, periksa elemen, baca konsol, pantau permintaan jaringan, dan edit CSS secara langsung di browser.

Pelajaran 4 dari 413 langkah

Alat Pengembang: Membuka dan Menggunakan DevTools adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Apa Itu DevTools Browser?

Setiap browser modern dilengkapi seperangkat alat pengembang bawaan. DevTools memungkinkan Anda memeriksa HTML dan CSS, men-debug JavaScript, menganalisis kinerja, memantau permintaan jaringan, dan masih banyak lagi — semuanya tanpa meninggalkan browser.

Membuka DevTools

Buka DevTools dengan F12 (Windows/Linux) atau Cmd+Option+I (Mac). Anda juga dapat mengeklik kanan elemen apa pun dan memilih Inspect. Pintasan Ctrl+Shift+J / Cmd+Option+J membuka Konsol secara langsung.

Panel Elemen

Panel Elemen menampilkan pohon DOM secara langsung. Klik elemen apa pun untuk memilihnya dan melihat gaya terhitungnya di panel Gaya. Anda dapat mengeklik dua kali untuk mengedit nilai HTML atau CSS secara langsung — perubahan tersebut segera terlihat, tetapi tidak disimpan ke berkas Anda.

Mengedit CSS Secara Langsung

Di panel Gaya, klik nilai properti apa pun untuk mengubahnya. Tambahkan aturan baru dengan tombol +. Gunakan kotak centang pengalih untuk menonaktifkan aturan. Ini adalah cara tercepat untuk membuat prototipe CSS tanpa beralih ke editor Anda.

Panel Konsol

Konsol menampilkan pesan yang dicatat, peringatan, dan kesalahan. Anda juga dapat mengetik JavaScript secara langsung dan menjalankannya. Gunakan console.log(), console.warn(), console.error(), dan console.table() untuk mengeluarkan data selama penelusuran kesalahan.

// Log different types
console.log('value:', myVar);
console.table([{name:'Alice'}, {name:'Bob'}]);
console.error('Something went wrong');

Panel Jaringan

Panel Jaringan menampilkan setiap permintaan HTTP yang dibuat halaman. Pilih permintaan untuk melihat header-nya, melihat pratinjau isi respons, dan memeriksa diagram waktu. Saring berdasarkan jenis: XHR/Fetch, JS, CSS, Gambar, Fon.

Membaca Waktu Permintaan

Setiap permintaan menampilkan: Dalam Antrean, Pencarian DNS, Koneksi Awal, SSL, Permintaan Terkirim, Menunggu (TTFB), dan Pengunduhan Konten. TTFB (Waktu hingga Byte Pertama) mencerminkan waktu respons server.

Membatasi Jaringan

Gunakan menu tarik-turun pembatasan di panel Jaringan untuk menyimulasikan kondisi 3G lambat atau luring. Cara ini mengungkap masalah kinerja yang tidak terlihat pada koneksi broadband cepat dan membantu Anda membangun pengalaman yang berfungsi bagi pengguna dengan koneksi buruk.

Mode Perangkat

Klik ikon perangkat (Ctrl+Shift+M / Cmd+Shift+M) untuk masuk ke Mode Perangkat. Simulasikan area pandang seluler, DPR, peristiwa sentuh, dan kondisi jaringan. Pilih dari prasetel seperti iPhone 14 atau tetapkan lebar khusus.

Panel Sumber

Panel Sumber memungkinkan Anda membaca dan menetapkan titik henti dalam berkas JavaScript. Titik henti menghentikan sementara eksekusi agar Anda dapat memeriksa nilai variabel dan tumpukan pemanggilan, lalu menelusuri kode baris demi baris dengan F10 (lewati) dan F11 (masuk ke).

Titik Henti dan Alat Penelusuran Kesalahan

Tambahkan titik henti dengan mengeklik nomor baris di Sumber. Saat eksekusi dijeda, arahkan kursor ke variabel untuk melihat nilainya atau ketikkan variabel tersebut di Konsol. Gunakan panel Tumpukan Panggilan untuk melihat fungsi-fungsi yang mengarah ke titik ini.

// You can also trigger a breakpoint in code:
debugger; // execution pauses here when DevTools is open

Pemeriksaan Singkat

Panel DevTools mana yang menampilkan semua permintaan HTTP yang dibuat halaman, termasuk kode status dan waktu responsnya?

Jawab di pelajaran interaktif

Rangkuman: Perkakas DevTools Anda

Elemen: periksa dan edit DOM langsung. Konsol: log dan jalankan JavaScript. Jaringan: pantau lalu lintas HTTP. Sumber: tetapkan titik henti dan lakukan penelusuran kesalahan. Mode Perangkat: uji tata letak responsif. Menguasai keempat panel ini akan mengubah alur kerja penelusuran kesalahan Anda.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Alat Pengembang: Membuka dan Menggunakan DevTools” gratis?

Ya — teks lengkap “Alat Pengembang: Membuka dan Menggunakan DevTools” 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 “Alat Pengembang: Membuka dan Menggunakan DevTools”?

Buka Chrome DevTools, periksa elemen, baca konsol, pantau permintaan jaringan, dan edit CSS secara langsung di browser. 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 4 dari 4.

Berapa lama pelajaran “Alat Pengembang: Membuka dan Menggunakan DevTools” 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

DNS dan HTTP Browser: Siklus Hidup Permintaan
HTML, CSS, dan JavaScript: Tugas Setiap Lapisan
Cara Halaman Dirender: Parsing DOM, CSSOM, Tata Letak, Paint
Alat Pengembang: Membuka dan Menggunakan DevTools

← Kembali ke Frontend Academy