Menyesuaikan pintasan keyboard di DevTools
Anda kini dapat menyesuaikan pintasan keyboard untuk perintah favorit di DevTools.
Buka Setelan > Pintasan, arahkan kursor ke perintah, lalu klik tombol Edit (ikon pensil) untuk menyesuaikan pintasan keyboard. Anda juga dapat membuat kombinasi tombol (alias pintasan penekanan beberapa tombol).
Masalah Chromium: 1335274, 174309
Beralih antara tema terang dan gelap dengan pintasan keyboard
Konfigurasi pintasan keyboard untuk beralih antara tema terang dan gelap dengan mudah. Secara default, tindakan tidak dipetakan ke pintasan keyboard apa pun.
Masalah Chromium: 1280398, 1226363
Menyoroti objek C/C++ di Pemeriksa Memori
Pemeriksa Memori menandai semua byte objek memori C/C++.
Mengenali byte objek di antara memori WebAssembly di sekitarnya adalah poin masalah. Anda harus mengetahui ukuran objek dan menghitung byte dari awal objek.
Dengan fitur ini, Anda dapat membedakannya dari memori di sekitarnya. Lihat Memperluas Memory Inspector untuk proses debug C/C++ guna mempelajari perubahan lebih lanjut.
Masalah Chromium: 1336568
Mendukung informasi inisiasi lengkap untuk impor HAR
Informasi Pemrakarsa lengkap kini tersedia untuk impor HAR. Sebelumnya, panel Network hanya menampilkan informasi inisiasi sebagian selama impor.
Informasi inisiasi membantu developer melacak asal permintaan jaringan dan mengidentifikasi masalah terkait jaringan.
Masalah Chromium: 1343185
Mulai penelusuran DOM setelah menekan Enter
Sekarang Anda dapat menonaktifkan setelan Telusuri saat Anda mengetik agar selalu memulai penelusuran DOM setelah menekan Enter.
Di panel Elemen, aktifkan/nonaktifkan kotak penelusuran dengan Control atau Command + F. Saat Anda mengetik kueri di kotak teks penelusuran, hierarki DOM akan melompat ke elemen pertama yang cocok dan menandainya secara default.
Bagi pengguna, terutama penguji yang selalu menggunakan kueri penelusuran yang panjang, perilaku ini tidak ideal. Pohon DOM mungkin melompat beberapa kali saat Anda mengetik kueri penelusuran yang panjang (misalnya, //div[@id="example"]). Perilaku ini menciptakan gerakan yang tidak perlu.
Buka Setelan > Preferensi, nonaktifkan Telusuri saat Anda mengetik. Dengan perubahan ini, penelusuran akan dimulai hanya setelah Anda menekan Enter.
Masalah Chromium: 1344526
Menampilkan ikon start dan end untuk properti flexbox CSS align-content
Di panel Styles, edit properti align-content di class CSS dengan display: flex atau display: inline-flex. start dan end ditampilkan di dropdown pelengkapan otomatis dengan ikon.
Masalah Chromium: 1139945
Sorotan lain-lain
- Menampilkan jumlah pesan yang benar di sidebar Konsol. Sebelumnya, jumlah tidak di-refresh saat menghapus pesan konsol. (1343311)
Download saluran pratinjau
Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk mendiskusikan fitur baru, update, atau hal lain yang terkait dengan DevTools.
- Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet di @ChromeDevTools.
- Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.
Yang baru di DevTools
Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.
- Update server MCP DevTools
- Peningkatan berbagi rekaman aktivitas
- Dukungan untuk @starting-style
- Widget editor untuk tampilan: masonry
- Lighthouse 13
- Saran kode dari Gemini
- Peningkatan untuk server MCP DevTools
- Akses yang lebih cepat ke bantuan AI
- Men-debug rekaman aktivitas performa lengkap dengan Gemini
- Alihkan orientasi panel samping
- Program Developer Google
- Sorotan lain-lain
- Chrome DevTools (MCP) untuk agen AI Anda
- Men-debug hierarki dependensi jaringan dengan Gemini
- Mengekspor percakapan Anda dengan Gemini
- Konfigurasi jalur yang dipertahankan di panel Performa
- Memfilter permintaan jaringan yang dilindungi IP
- Tab Elemen > Tata Letak menambahkan dukungan tata letak masonry
- Lighthouse 12.8.2
- Sorotan lain-lain
- Menemukan lebih banyak insight dengan Gemini
- Mengemulasi header 'Save-Data' di 'Network conditions'
- Melihat status Dasar di tooltip properti CSS
- Mengganti faktor bentuk di petunjuk klien agen pengguna
- Lighthouse 12.8.0
- Sorotan lain-lain
- Chrome DevTools yang lebih andal dan produktif
- Mengupload gambar dalam bantuan AI untuk penataan gaya
- Menambahkan header permintaan ke tabel di Jaringan
- Lihat sorotan dari Google I/O 2025
- Sorotan lain-lain
- Peningkatan panel performa
- Insight 'Hierarki dependensi jaringan' untuk origin yang dihubungkan sebelumnya
- Waktu respons dan pengalihan server dalam insight 'Latensi permintaan dokumen'
- Pengalihan di Ringkasan permintaan jaringan
- Mengurangi derau dalam rekaman aktivitas performa
- 'Nonaktifkan contoh JavaScript' tidak digunakan lagi
- Parameter akurasi geolokasi di Sensor
- Peningkatan panel elemen
- Men-debug nilai CSS kompleks dengan lebih mudah
- Dukungan@function di Elemen > Gaya
- Peningkatan panel Jaringan
- Filter has-request-header
- Direct Sockets di Aplikasi Web Terisolasi (IWA)
- Sorotan lain-lain
- Aksesibilitas
- Edisi Google I/O 2025
- Mengubah dan menyimpan perubahan CSS ke ruang kerja Anda dengan Gemini
- Menghubungkan folder ruang kerja dan menyimpan kembali perubahan ke file sumber Anda
- Bertanya kepada Gemini tentang insight performa
- Memberi anotasi pada temuan performa dengan Gemini
- Menambahkan screenshot ke percakapan Anda dengan Gemini
- Insight baru di panel Performa
- JavaScript Duplikat
- JavaScript lama
- Spekulasi kini mendukung tag aturan
- Lighthouse 12.6.0
- Sorotan lain-lain
- Aksesibilitas
- Peningkatan panel performa
- Insight performa baru
- Klik untuk menandai
- Waktu server di Ringkasan permintaan jaringan
- Memfilter cookie di 'Privasi dan keamanan'
- Ukuran dalam satuan kB di tabel di seluruh panel
- Pelengkapan otomatis mendukung corner-shape dan corner-*-shape di Elements > Styles
- Eksperimental: Menandai masalah pada elemen dan atribut di DOM
- Lighthouse 12.5.0
- Sorotan lain-lain
- Peningkatan panel performa
- Link origin dan skrip untuk panggilan profil dan fungsi di tab Performa
- Dukungan data kolom LCP menurut fase
- Insight hierarki dependensi jaringan
- Durasi, bukan total dan waktu mandiri di Ringkasan
- Penyorotan stack terberat
- Peningkatan status kosong untuk berbagai panel
- Tampilan hierarki aksesibilitas di Elemen
- Lighthouse 12.4.0
- Sorotan lain-lain
- Panel privasi dan keamanan
- Peningkatan panel performa
- Preset throttling CPU yang dikalibrasi
- Memilih peristiwa performa yang berbeda dalam percakapan AI yang sama
- Penyorotan pihak pertama dan ketiga di Performa
- Data kolom dalam tooltip dan insight penanda
- Insight perubahan tata letak yang dipaksa
- Insight'Optimalkan ukuran DOM'
- Memperluas rekaman aktivitas performa dengan console.timeStamp
- Peningkatan panel elemen
- Nilai real-time gaya animasi
- Dukungan untuk pseudo-class :open dan berbagai pseudo-element
- Menyalin semua pesan konsol
- Unit byte di panel Memori