Ringkasan

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 membuat situs yang lebih baik dengan lebih cepat.

Tonton video untuk melihat demonstrasi langsung alur kerja inti DevTools, termasuk men-debug CSS, membuat prototipe CSS, men-debug JavaScript, dan menganalisis performa pemuatan.

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 membuka 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 Console.

Lihat Membuka Chrome DevTools untuk detail dan alur kerja selengkapnya.

Mulai

Jika Anda adalah developer web yang lebih berpengalaman, berikut adalah titik awal yang direkomendasikan untuk mempelajari cara DevTools meningkatkan produktivitas Anda:

Jelajahi DevTools

UI DevTools bisa sedikit membingungkan... ada begitu banyak tab! Namun, jika Anda meluangkan waktu untuk membiasakan diri dengan setiap tab untuk memahami apa yang dapat dilakukan, Anda mungkin menemukan bahwa DevTools dapat benar-benar meningkatkan produktivitas Anda.

Mode Perangkat

Mode perangkat diaktifkan di area pandang.

Menyimulasikan perangkat seluler.

Panel elemen

Panel elemen.

Melihat dan mengubah DOM dan CSS.

Panel konsol

Panel konsol.

Lihat pesan dan jalankan JavaScript dari Console.

Panel sumber

Panel sumber.

Lakukan debug pada 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.

Panel jaringan

Panel Jaringan.

Melihat dan melakukan debug aktivitas jaringan.

Panel perekam

Panel Perekam.

Merekam, memutar ulang, dan mengukur alur penggunaan.

Panel performa

Panel performa.

Menemukan cara untuk meningkatkan performa pemuatan dan runtime.

Panel memori

Panel memori.

Temukan dan perbaiki masalah memori yang memengaruhi performa halaman, misalnya, kebocoran memori.

Panel aplikasi

Panel Application dengan bagian Service worker terbuka.

Periksa semua resource yang dimuat, termasuk database IndexedDB atau Web SQL, penyimpanan lokal dan sesi, cookie, Cache Aplikasi, gambar, font, dan stylesheet.

Panel keamanan

Panel keamanan.

Men-debug masalah konten campuran, masalah sertifikat, dan lainnya.

Interaksi

Laporkan bug dan permintaan fitur di Crbug, yang merupakan pelacak bug tim teknik.

Crbug

Jika Anda ingin memberi tahu kami tentang bug atau permintaan fitur tetapi tidak punya banyak waktu, Anda dapat mengirim tweet ke @ChromeDevTools. Kami membalas dan mengirim pengumuman dari akun secara rutin.

Twitter

Untuk bantuan dalam menggunakan DevTools, Stack Overflow adalah saluran terbaik.

Stack Overflow

Untuk melaporkan bug atau permintaan fitur di dokumen DevTools, buka masalah GitHub.

Masalah Dokumen

DevTools juga memiliki saluran Slack, tetapi tim tidak memantaunya secara konsisten.

Slack