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.
Panel Performa telah membantu developer mengukur dan mengoptimalkan performa runtime mereka selama lebih dari 15 tahun. Pelajari perkembangannya ke depannya.
Anotasikan rekaman aktivitas di tempat dan simpan langsung dalam file rekaman aktivitas untuk berbagi dengan mudah.

Berita & info terbaru

Navigasi dan pemfilteran yang lebih baik di panel Performa DevTools

Updated 19 Maret 2025

Pembaruan panel Performa DevTools mempermudah navigasi dalam dan pemfilteran rekaman aktivitas.

Meningkatkan analisis jaringan dengan Chrome DevTools

Updated 27 Februari 2025

Meningkatkan analisis jaringan dengan Chrome DevTools.

Cara kami memperkenalkan Gemini ke Chrome DevTools

Updated 14 Januari 2025

Pelajari kasus penggunaan yang menyenangkan dan menarik dari panel bantuan AI baru di DevTools

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.