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.
Mode Perangkat
Menyimulasikan perangkat seluler.
Panel elemen
Melihat dan mengubah DOM dan CSS.
- Mulai melihat dan mengubah DOM
- Mulai melihat dan mengubah CSS
- Mengedit CSS
- Mengedit DOM
- Menemukan CSS yang tidak valid, diganti, tidak aktif, dan CSS lainnya
- Mengidentifikasi potensi peningkatan CSS
- Mengemulasi tema terang/gelap, kontras, dan fitur media CSS lainnya
- Menemukan CSS yang tidak digunakan
- Memeriksa animasi
Panel konsol
Lihat pesan dan jalankan JavaScript dari Konsol.
Panel sumber
Lakukan debug JavaScript, pertahankan perubahan yang dibuat di DevTools saat pemuatan ulang halaman, simpan dan jalankan cuplikan JavaScript, serta simpan perubahan yang Anda buat di DevTools ke sumber lokal.
- Memulai proses debug JavaScript
- Menjeda kode dengan titik henti sementara
- Mengedit dan menyimpan file di ruang kerja
- Menjalankan cuplikan JavaScript
- Referensi proses debug JavaScript
- Mengganti konten web dan header respons HTTP secara lokal
Panel jaringan
Melihat dan melakukan debug aktivitas jaringan.
Panel Perekam Suara
Merekam, memutar ulang, dan mengukur alur penggunaan.
- Merekam, memutar ulang, dan mengukur alur penggunaan
- Menyesuaikan Perekam Suara dengan ekstensi
- Referensi fitur Perekam Suara
Panel performa
Menemukan cara untuk meningkatkan performa pemuatan dan runtime.
Panel memori
Menemukan dan memperbaiki masalah memori yang memengaruhi performa halaman, misalnya, kebocoran memori.
Panel aplikasi
Periksa semua resource yang dimuat, termasuk database IndexedDB atau Web SQL, penyimpanan lokal dan sesi, cookie, Cache Aplikasi, gambar, font, dan stylesheet.
- Men-debug Progressive Web App
- Melihat dan mengedit penyimpanan lokal
- Melihat, menambahkan, mengedit, dan menghapus cookie
- Melihat informasi uji coba origin
Panel keamanan
Men-debug masalah konten campuran, masalah sertifikat, dan lainnya.
Komunitas
Laporkan bug dan permintaan fitur di Crbug, yang merupakan pelacak bug tim teknik.
Jika Anda ingin memberi tahu kami tentang bug atau permintaan fitur, tetapi tidak memiliki banyak waktu, Anda dapat mengirim tweet ke @ChromeDevTools. Kami membalas dan mengirim pengumuman dari akun secara berkala.
Untuk bantuan dalam menggunakan DevTools, Stack Overflow adalah saluran terbaik.
Untuk melaporkan bug atau permintaan fitur pada dokumen DevTools, buka masalah GitHub.
DevTools juga memiliki saluran Slack, tetapi tim tidak memantaunya secara konsisten.