Yang baru di DevTools, Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Edisi Google I/O 2025

Chrome DevTools akan hadir secara intensif di Google I/O tahun ini. Akan ada campuran sesi live dan sesi rekaman.

Untuk mempelajari fitur baru yang menarik, tonton acara berikut:

Selain itu, jangan lupa untuk menonton sesi What's new on the web Rachel Andrew pada 20 Mei 2025 | 16.30 PT.

Tonton video terbaru kami untuk ringkasan singkat tentang sorotan terbaru kami:

Mengubah dan menyimpan perubahan CSS ke ruang kerja Anda dengan Gemini

Dengan beberapa klik, Anda kini dapat meminta Gemini mengubah dan memperbaiki CSS untuk Anda dan, dengan folder ruang kerja yang terhubung, menyimpan perubahan kembali ke file sumber di komputer Anda.

Ruang kerja otomatis adalah fitur eksperimental. Anda dapat menghubungkan folder sumber yang ada atau mencoba demo.

Dengan folder ruang kerja yang terhubung, di panel Elemen, klik Minta AI, minta Gemini untuk mengubah CSS, klik Lanjutkan untuk menguji perubahan secara langsung, lalu luaskan Perubahan yang belum disimpan, klik Terapkan ke ruang kerja, tinjau perbedaan, lalu klik Simpan semua.

Menghubungkan folder ruang kerja dan menyimpan perubahan kembali ke file sumber Anda

Sekarang Anda dapat menghubungkan folder ruang kerja secara otomatis (atau manual) agar DevTools dapat menyimpan perubahan JavaScript, HTML, dan CSS kembali ke file sumber yang disimpan di komputer Anda.

Lihat cara kerjanya dengan JavaScript:

Masalah Chromium: 404170628.

Menanyakan insight performa kepada Gemini

Dengan mengklik tombol, Anda kini dapat memulai percakapan dengan Gemini untuk menyelidiki dan mengambil tindakan berdasarkan insight performa berikut:

  • LCP menurut fase
  • Penemuan permintaan LCP
  • Permintaan pemblokiran rendering
  • Penyebab pergeseran tata letak
  • Latensi permintaan dokumen

Sebelum dan sesudah menambahkan tombol 'Tanya AI' ke insight di panel Performa.

Jangan ragu untuk memberikan masukan Anda tentang fitur ini di crbug.com/371170842.

Memberi anotasi pada temuan performa dengan Gemini

Anda kini dapat meminta Gemini untuk membuat anotasi tentang peristiwa dalam rekaman aktivitas performa.

Klik dua kali peristiwa di jalur Utama, lalu klik Buat label di samping kolom input. Gemini dapat menyarankan label berdasarkan stack trace dan konteks.

Menambahkan screenshot ke percakapan Anda dengan Gemini

Di panel Bantuan AI, Anda kini dapat mengklik tombol Ambil screenshot untuk mengambil screenshot halaman dan mengirimkannya ke percakapan Anda dengan Gemini.

Anda dapat menggunakan screenshot untuk memberikan konteks visual tambahan pada perintah Anda, misalnya, untuk memeriksa apakah semua tombol yang terlihat memiliki jarak yang sama.

Sebelum dan sesudah menambahkan tombol 'Ambil screenshot' ke panel 'Bantuan AI'.

Insight baru di panel Performa

Versi ini menghadirkan dua insight baru ke panel Performa: JavaScript Duplikat dan JavaScript Lama.

JavaScript Duplikat

Performa > Insight > JavaScript Duplikat baru akan menandai permintaan untuk modul JavaScript duplikat besar dalam paket Anda di jalur Jaringan jika ada di halaman Anda.

Insight 'JavaScript yang Diduplikasi' di panel Performa.

Anda juga dapat mengklik Lihat Peta Hierarki dalam insight untuk menjelajahi dependensi JavaScript.

JavaScript Versi Lama

Performa > Insight > JavaScript Lama yang baru akan menandai permintaan untuk JavaScript lama di jalur Jaringan jika ada di halaman Anda, misalnya, polyfill dan transformasi yang memungkinkan browser lama menggunakan fitur JavaScript baru. Namun, banyak di antara fitur tersebut yang tidak diperlukan browser modern.

Insight 'JavaScript Lama' di panel Performa.

Spekulasi kini mendukung tag aturan

Aplikasi > Pemuatan spekulatif kini menampilkan tag, bukan URL untuk set aturan, jika ada tag.

Sebelum dan sesudah mengganti URL set aturan dengan tag.

Masalah Chromium: 393408589.

Lighthouse 12.6.0

Panel Lighthouse kini menjalankan Lighthouse 12.6.0.

Yang paling penting dalam versi ini, Lighthouse beralih ke audit insight performa. Di kategori Performa dalam laporan Lighthouse, Anda kini dapat Mencoba insight.

Sebelum dan sesudah menambahkan opsi untuk beralih ke insight dalam laporan Lighthouse.

Lihat juga daftar lengkap perubahan.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 40543651.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Jaringan: Menambahkan parsing untuk format waktu server yang diketahui.
  • Anda kini dapat membatalkan pilihan baris dalam tabel dengan Cmd/Ctrl + klik (Masalah Chromium: 409474445).
  • Performa > Insight > Gunakan masa aktif cache yang efisien kini mengabaikan aset dengan TTL yang sama atau lebih lama dari 30 hari.

Aksesibilitas

Versi ini menghadirkan peningkatan aksesibilitas berikut:

  • Performa: Panah pemrakarsa dalam rekaman aktivitas kini lebih terlihat.
  • Elemen: Anda kini dapat beralih ke tampilan hierarki aksesibilitas layar penuh dengan pintasan A (masalah Chromium: 40888478).

  • Pembaca layar kini mengumumkan, antara lain:

    • "Disalin ke papan klip" saat Anda menyalin dari blok kode.
    • "Menerapkan ke ruang kerja" saat Anda menerapkan perubahan ke ruang kerja di chat bantuan AI.
    • "Membuat label" saat Anda meminta AI untuk membuatnya di Performa > Anotasi.
    • Perhatikan bahwa ada saran perintah di chat Bantuan AI.
    • Membacakan perkiraan penghematan untuk insight yang relevan di Performa > Insight.

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.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.