Chrome DevTools adalah serangkaian alat developer web yang langsung disertakan ke dalam browser Google Chrome. DevTools bisa membantu Anda mengedit halaman dengan cepat dan mendiagnosis masalah dengan cepat, yang akan membantu Anda membuat situs yang lebih baik dengan lebih cepat.
Memulai
Semua cara yang dilakukan untuk membuka Chrome DevTools.
Dapatkan info terkini terkait perubahan DevTools terbaru.
Serangkaian video singkat untuk membantu Anda mempelajari fitur di DevTools.

Perintah dan pintasan

Menyelesaikan tugas dengan cepat.
Panduan cara membuka Menu Perintah, menjalankan perintah, membuka file, melihat tindakan lain, dan lainnya.
Baca dokumen
Dokumentasi kanonis untuk pintasan keyboard Chrome DevTools.
Baca dokumen
Lihat tampilan dan perilaku halaman web saat JavaScript dinonaktifkan.
Baca dokumen
Menggunakan perangkat virtual di Mode Perangkat Chrome untuk membuat situs yang memprioritaskan perangkat seluler.
Temukan teks di semua resource yang dimuat dengan tab Penelusuran.

Panel

Temukan kemampuan dari setiap panel DevTools.
Pelajari cara melihat dan mengubah DOM halaman menggunakan Chrome DevTools.
Baca dokumen
Pelajari cara melihat dan mengubah CSS halaman menggunakan Chrome DevTools.
Baca dokumen
Mencatat pesan ke dalam log dan menjalankan JavaScript.
Baca dokumen
Lihat dan edit file, buat Cuplikan, debug JavaScript, dan siapkan Workspace.
Baca dokumen
Catat permintaan jaringan ke dalam log.
Baca dokumen
Evaluasi performa situs dengan DevTools.
Baca dokumen
Menemukan masalah memori yang memengaruhi performa halaman, termasuk kebocoran memori, penggelembungan memori, dan pembersihan sampah memori yang sering.
Baca dokumen
Periksa, ubah, dan debug aplikasi web, cache pengujian, dan lihat penyimpanan.
Baca dokumen
Rekam, putar ulang, ukur alur pengguna, dan edit langkah-langkahnya.
Baca dokumen
Temukan kumpulan opsi yang memengaruhi rendering konten web.
Baca dokumen
Menemukan dan memperbaiki masalah pada situs.
Gunakan panel Keamanan untuk memastikan bahwa halaman dilindungi sepenuhnya oleh HTTPS.
Memeriksa ArrayBuffer, TypedArray, atau DataView di JavaScript, serta WebAssembly dan memori aplikasi C++ Wasm.
Mengganti string agen pengguna. Nonaktifkan Pilih secara otomatis dan pilih dari daftar atau masukkan string kustom.
Gunakan panel Media untuk melihat informasi dan men-debug pemutar media per tab browser.
Memeriksa dan mengubah animasi dengan tab Animations.
Melacak perubahan pada HTML, CSS, dan JavaScript.
Temukan dan analisis kode JavaScript dan CSS yang tidak digunakan di Chrome DevTools.
Gunakan tab panel samping Resource Developer untuk memeriksa apakah peta sumber berhasil dimuat dan memuatnya secara manual.
Identifikasi potensi peningkatan CSS dengan panel Ringkasan CSS.
Optimalkan kecepatan situs dengan panel Lighthouse.
Dapatkan hasil analisis yang bisa ditindaklanjuti tentang performa situs dengan panel Analisis performa.
Emulasi sensor perangkat.
Emulasikan pengautentikasi.

Referensi setelan