Chrome DevTools adalah serangkaian alat developer web yang terintegrasi langsung ke browser Google Chrome. DevTools dapat membantu Anda mengedit halaman dengan cepat, dan mendiagnosis masalah dengan cepat, yang pada akhirnya membantu Anda membangun situs yang lebih baik dan cepat.
Tonton video untuk demonstrasi langsung alur kerja DevTools inti, termasuk men-debug CSS, membuat prototipe CSS, men-debug JavaScript, dan menganalisis performa beban.
Buka DevTools
Ada banyak cara untuk membuka DevTools, karena pengguna yang berbeda menginginkan akses cepat ke berbagai bagian UI DevTools.
- Untuk menggunakan DOM atau CSS, klik kanan elemen di halaman, lalu pilih Periksa untuk melompat ke panel Elemen. Atau, tekan Command+Option+C (Mac) atau Control+Shift+C (Windows, Linux, ChromeOS).
- Untuk melihat pesan yang dicatat dalam log atau menjalankan JavaScript, tekan Command+Option+J (Mac) atau Control+Shift+J (Windows, Linux, ChromeOS) untuk langsung membuka panel Konsol.
Lihat Membuka Chrome DevTools untuk detail dan alur kerja selengkapnya.
Memulai
Jika Anda adalah developer web yang lebih berpengalaman, berikut titik awal yang direkomendasikan untuk mempelajari cara DevTools meningkatkan produktivitas Anda:
- Melihat dan mengubah DOM
- Melihat dan mengubah CSS
- Men-debug JavaScript
- Melihat pesan dan menjalankan JavaScript di Konsol
- Mengoptimalkan kecepatan situs
- Memeriksa aktivitas jaringan
Jelajahi DevTools
UI DevTools bisa sedikit membingungkan... ada begitu banyak tab! Namun, jika Anda meluangkan waktu untuk memahami setiap tab guna memahami apa saja yang dapat dilakukan, Anda mungkin akan mendapati bahwa DevTools dapat meningkatkan produktivitas Anda.