DevTools
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.
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.
Mendapatkan bantuan AI
Insight konsol dan bantuan AI membantu Anda men-debug dan memperbaiki error, performa, dan gaya visual JavaScript secara lebih efisien.
Memahami performa
Dapatkan gambaran menyeluruh dan yang dapat ditindaklanjuti tentang performa halaman Anda.
Memeriksa resource
Pelajari cara memeriksa resource yang dimuat oleh halaman dan mengeditnya dari browser.
Menganalisis jaringan
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.
Mulai
Izinkan Gemini membantu Anda menganalisis dan meningkatkan gaya visual, jaringan, sumber, dan performa situs.
Dapatkan inspirasi
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.
Memahami pesan konsol
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.
Merekam dan menganalisis rekaman aktivitas performa
Pelajari cara merekam rekaman aktivitas performa di DevTools dan menganalisisnya untuk mengidentifikasi dan memperbaiki masalah performa.
Memantau Core Web Vitals secara live
Men-debug masalah LCP dan menggunakan data CrUX untuk melihat apakah Anda men-debug pengalaman yang serupa dengan pengguna
Menjelaskan caching
Pelajari berbagai jenis cache browser dan cara memeriksa serta mengelolanya di Chrome DevTools.
Membekukan layar & memeriksa elemen yang menghilang
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.
Ringkasan alat performa
Pelajari semua fitur di panel Performa: cara merekam rekaman aktivitas performa, cara melihat dan menganalisis rekaman aktivitas, dan lainnya.
Masa depan alat performa
Panel Performa telah membantu developer mengukur dan mengoptimalkan performa runtime mereka selama lebih dari 15 tahun. Pelajari perkembangannya ke depannya.
Membuat anotasi pada rekaman aktivitas performa
Anotasikan rekaman aktivitas di tempat dan simpan langsung dalam file rekaman aktivitas untuk berbagi dengan mudah.
Berita & info terbaru
Memeriksa dan mengedit resource
Referensi fitur
Pelajari semua fitur di panel Sumber: cara melihat dan mengedit file, men-debug JavaScript, dan menyiapkan ruang kerja.
Siapkan ruang kerja
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.
Menganalisis aktivitas jaringan
Panel jaringan
Pelajari semua fitur di panel Jaringan: periksa isi respons dan permintaan, ganti header, dan lainnya.
Memeriksa aktivitas jaringan
Tutorial langsung untuk memandu Anda melakukan tugas umum di dalam panel Jaringan.
Alat lainnya
Temukan semua fitur dan kemampuan lainnya di DevTools.
Elemen
Pelajari cara melihat dan mengubah DOM halaman.
Gaya
Pelajari cara melihat dan mengubah CSS halaman.
Perubahan
Melacak perubahan pada HTML, CSS, dan JavaScript.
Konsol
Mencatat pesan ke dalam log dan menjalankan JavaScript.
Performa
Mengevaluasi performa situs.
Memori
Menemukan masalah memori yang memengaruhi performa halaman, termasuk kebocoran memori, dan lainnya.
Aplikasi
Periksa, ubah, dan debug aplikasi web, uji cache, lihat penyimpanan, dan lainnya.
Animasi
Memeriksa dan mengubah animasi.
Perekam Suara
Rekam, putar ulang, ukur alur pengguna, dan edit langkah-langkahnya.
Rendering
Temukan kumpulan opsi yang memengaruhi rendering konten web.
Isi otomatis
Memeriksa dan men-debug alamat yang disimpan.
Masalah
Menemukan dan memperbaiki masalah pada situs.
Privasi & Keamanan
Pastikan halaman dilindungi sepenuhnya oleh HTTPS.
Media
Melihat informasi dan men-debug pemutar media per tab browser.
Sensor
Emulasi sensor perangkat.
WebAuthn
Emulasikan pengautentikasi.