Chrome DevTools adalah serangkaian alat developer web yang langsung disertakan ke browser Google Chrome. DevTools memungkinkan Anda mengedit halaman dengan cepat dan mendiagnosis masalah dengan cepat, sehingga membantu Anda membuat situs yang lebih baik dan lebih cepat.
Mulai Pelajari yang baru
DevTools mendukung berbagai tugas pengembangan web umum. Langsung lanjutkan ke halaman ini dan jelajahi beberapa fitur utama DevTools. Tidak tahu harus memulai dari mana atau ini pertama kalinya Anda menggunakan DevTools? Tonton pengantar DevTools.
Insight konsol dan bantuan AI membantu Anda men-debug dan memperbaiki error, performa, dan gaya visual JavaScript secara lebih efisien.
Dapatkan gambaran menyeluruh dan yang dapat ditindaklanjuti tentang performa halaman Anda.
Pelajari cara memeriksa resource yang dimuat oleh halaman dan mengeditnya dari browser.
Menganalisis dan menimpa permintaan dan respons jaringan dengan cepat.

Asisten AI & insight konsol

Pelajari cara inovasi AI di DevTools memungkinkan Anda melakukan lebih banyak hal dengan lebih cepat.
Izinkan Gemini membantu Anda menganalisis dan meningkatkan gaya visual, jaringan, sumber, dan performa situs.
Pelajari kasus penggunaan untuk bantuan AI di Chrome DevTools dan pelajari cara bantuan AI dapat mendukung alur kerja proses debug Anda di seluruh gaya visual, performa, dan lainnya.
Pahami pesan dan error konsol di DevTools dan pelajari cara memperbaikinya - tanpa menyalin dan menempel.

Tips DevTools

Jelajahi serial video bulanan kami yang menjelaskan cara menggunakan DevTools untuk menyelesaikan masalah pengembangan web yang umum.
Pelajari cara merekam rekaman aktivitas performa di DevTools dan menganalisisnya untuk mengidentifikasi dan memperbaiki masalah performa.
Men-debug masalah LCP dan menggunakan data CrUX untuk melihat apakah Anda men-debug pengalaman yang serupa dengan pengguna
Pelajari berbagai jenis cache browser dan cara memeriksa serta mengelolanya di Chrome DevTools.
Mencoba memeriksa elemen, dan “poof” elemen tersebut hilang? Sepertinya kode Anda sedang bermain petak umpet dengan Anda.

Mendapatkan insight performa

Berbagai alat untuk membantu Anda mengukur dan mengoptimalkan berbagai aspek performa runtime: panel Performa, Lighthouse, dan lainnya.
Pelajari semua fitur di panel Performa: cara merekam rekaman aktivitas performa, cara melihat dan menganalisis rekaman aktivitas, dan lainnya.
Pelajari fitur DevTools baru seperti kalibrasi throttling CPU untuk membantu Anda mendasarkan keputusan proses debug performa pada data dari dunia nyata
Pelajari insight performa baru, kecanggihan Lighthouse langsung di panel Performa DevTools.

Berita & info terbaru

Yang baru di DevTools, Chrome 142

Updated 28 Oktober 2025

Saran kode di Konsol dan Sumber, penelusuran performa lengkap dengan Gemini, pengubahan orientasi panel, update server MCP DevTools, dan lainnya.

Penghentian penggunaan pengeditan langsung sumber JavaScript di Chrome DevTools

Updated 22 Oktober 2025

Chrome DevTools menghapus pengeditan langsung di Chrome 145 (Februari 2026) karena penggunaan yang rendah dan alternatif modern seperti Hot Module Replacement (HMR).

Yang baru di DevTools, Chrome 141

Updated 30 September 2025

Chrome DevTools (MCP) untuk agen AI Anda, dukungan AI untuk hierarki dependensi jaringan, ekspor chat AI, konfigurasi jalur yang dipertahankan di Performa, dan lainnya.

Memeriksa dan mengedit resource

Pelajari semua fitur di panel Sumber: cara melihat dan mengedit file, men-debug JavaScript, dan menyiapkan ruang kerja.
Mulai
Workspace memungkinkan Anda menyimpan perubahan yang Anda buat dalam DevTools ke kode sumber yang disimpan di komputer. Pelajari cara menyiapkan ruang kerja di project Anda sendiri.
Baca tutorial

Menganalisis aktivitas jaringan

Pelajari semua fitur di panel Jaringan: periksa isi respons dan permintaan, ganti header, dan lainnya.
Mulai
Tutorial langsung untuk memandu Anda melakukan tugas umum di dalam panel Jaringan.
Baca tutorial

Alat lainnya

Temukan semua fitur dan kemampuan lainnya di DevTools.
Pelajari cara melihat dan mengubah DOM halaman.
Pelajari cara melihat dan mengubah CSS halaman.
Melacak perubahan pada HTML, CSS, dan JavaScript.
Mencatat pesan ke dalam log dan menjalankan JavaScript.
Mengevaluasi performa situs.
Menemukan masalah memori yang memengaruhi performa halaman, termasuk kebocoran memori, dan lainnya.
Periksa, ubah, dan debug aplikasi web, uji cache, lihat penyimpanan, dan lainnya.
Memeriksa dan mengubah animasi.
Rekam, putar ulang, ukur alur pengguna, dan edit langkah-langkahnya.
Temukan kumpulan opsi yang memengaruhi rendering konten web.
Memeriksa dan men-debug alamat yang disimpan.
Menemukan dan memperbaiki masalah pada situs.
Pastikan halaman dilindungi sepenuhnya oleh HTTPS.
Melihat informasi dan men-debug pemutar media per tab browser.
Emulasi sensor perangkat.
Emulasikan pengautentikasi.