Mengganti header respons jaringan
Sekarang Anda dapat mengganti header respons di panel Jaringan. Sebelumnya, Anda memerlukan akses ke server web untuk bereksperimen dengan header respons HTTP.
Dengan penggantian header respons, Anda dapat membuat prototipe perbaikan secara lokal untuk berbagai header, termasuk, tetapi tidak terbatas pada:
Untuk mengganti header, buka Network > Headers > Response Headers, arahkan kursor ke nilai header, klik , lalu edit.
Anda juga dapat menambahkan header kustom.
Untuk mengedit semua penggantian di satu tempat, edit file .headers di Sumber > Penggantian. Di sana, Anda juga dapat mengklik Tambahkan aturan penggantian untuk mengganti beberapa permintaan menggunakan karakter pengganti (*).
Masalah Chromium: 1288023.
Peningkatan kualitas proses debug Nuxt, Vite, dan Rollup
Untuk membantu Anda mengidentifikasi masalah dengan lebih cepat selama proses debug, pelacakan tumpukan yang ditingkatkan kini menyembunyikan frame yang berasal dari sumber yang dihasilkan oleh Nuxt 3.3 atau yang lebih baru. DevTools melewati frame tersebut:
- Dalam rekaman aktivitas Konsol, di bagian link Tampilkan N frame lainnya.
- Di Sources > Call Stack, di bagian
Show ignore-listed frames.
Untuk menghadirkan peningkatan ini, tim DevTools, Nuxt, Vite, dan Rollup berkolaborasi untuk mengadopsi ekstensi peta sumber x_google_ignoreList:
Tim DevTools ingin mengucapkan terima kasih kepada tim Nuxt, Vite, dan Rollup karena telah memungkinkan hal ini. Kami menghargai upaya dan kolaborasi Anda, yang sangat penting bagi keberhasilan penerapan ini. Sekali lagi, terima kasih atas kontribusi Anda.
Peningkatan CSS di Elemen > Gaya
Properti dan nilai CSS tidak valid
Untuk membantu Anda mendiagnosis masalah CSS dengan lebih cepat, panel Gaya kini mencoret:
- Seluruh deklarasi CSS (properti dan nilai) saat properti CSS tidak valid.
- Hanya nilai saat properti CSS valid, tetapi nilainya tidak valid.
Tim DevTools ingin mengucapkan terima kasih kepada Yisi(一丝) atas peluncuran peningkatan ini.
Menautkan ke frame utama dalam properti singkat animasi
Properti CSS singkat animation kini berisi link ke aturan @@keyframes yang sesuai, sehingga Anda dapat menavigasi panel Gaya dengan lebih cepat.
Masalah Chromium: 1420656.
Setelan Konsol baru: Pelengkapan otomatis saat menekan tombol Enter
Mulai dari versi sebelumnya (112), Anda dapat mengonfigurasi Konsol DevTools untuk menerapkan saran pelengkapan otomatis saat Anda menekan Enter.
Secara default, untuk menerima saran pelengkapan otomatis, Anda dapat menekan Tab atau Arrow right. Untuk melengkapi otomatis dengan Enter, aktifkan Settings > Console >
Accept autocomplete suggestion on Enter.
Selain itu, teks setelan lain kini lebih mudah dipahami pengguna: Perlakukan evaluasi kode sebagai tindakan pengguna.
Masalah Chromium: 1276960.
Menu Perintah menekankan file yang dibuat
Dialog buka cepat di Menu Perintah kini mengabui file pihak ketiga yang didaftar sebagai diabaikan untuk lebih menekankan file yang Anda buat.
Masalah Chromium: 1424345.
Penghentian penggunaan Profiler JavaScript: Tahap kedua
Mulai Chrome 58, tim DevTools berencana untuk menghentikan penggunaan JavaScript Profiler dan meminta developer Node.js dan Deno menggunakan panel Performance untuk membuat profil performa CPU JavaScript.
DevTools versi 113 memulai fase kedua penghentian penggunaan Profiler JavaScript empat fase. Selama fase ini, Anda masih dapat membuka panel, tetapi UI-nya tidak lagi tersedia.
Untuk memprofilkan performa CPU, klik Buka panel Performa.
Masalah Chromium: 1354548.
Sorotan lain-lain
Berikut beberapa perbaikan penting dalam rilis ini:
- Memperbaiki bug yang menyebabkan pencetakan yang lebih baik di panel Sumber menangani nama variabel dengan karakter Unicode secara tidak benar (1425055).
- Tab Masalah menambahkan pesan baru untuk masalah Isi Otomatis terkait nilai HTML non-standar (1399414).
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