Yang baru di DevTools, Chrome 140

Sofia Emelianova
Sofia Emelianova
GitHub

Men-debug lebih banyak insight dengan Gemini

Di Performa > Insight, Anda kini dapat mengklik Debug dengan AI (sebelumnya Tanya AI) untuk melakukan chat dan proses debug dengan Gemini di panel Bantuan AI untuk mendapatkan lebih banyak insight performa:

  • Meningkatkan penayangan gambar
  • JavaScript Versi Lama
  • JavaScript Duplikat
  • HTTP Modern

Sebelum dan sesudah menambahkan tombol 'Debug dengan AI' ke insight performa lainnya.

Mengemulasi header 'Save-Data' di 'Kondisi jaringan'

Di panel Kondisi jaringan, Anda kini dapat mengemulasi perilaku header permintaan Save-Data. Header ini adalah petunjuk klien jaringan yang menunjukkan preferensi klien untuk mengurangi penggunaan data. Fitur ini juga tersedia melalui navigator.connection.saveData API.

Sebelum dan sesudah menambahkan emulasi header permintaan 'Save-Data' ke 'Kondisi jaringan'.

Masalah Chromium: 40668980.

Melihat status Baseline di tooltip properti CSS

Di Elemen > Gaya, saat mengarahkan kursor ke properti CSS, Anda kini dapat melihat, di bawah definisi properti, ketersediaannya di seluruh browser utama menurut status Dasarnya.

Sebelum dan sesudah menambahkan status Dasar ke tooltip properti CSS.

Masalah Chromium: 417749762.

Mengganti faktor bentuk di petunjuk klien agen pengguna

Di drop-down Kondisi jaringan > Petunjuk klien agen pengguna, Anda kini memiliki opsi untuk mengganti faktor bentuk, khususnya, nilai header permintaan Sec-CH-UA-Form-Factors.

Sebelum dan sesudah menambahkan opsi penggantian faktor bentuk ke petunjuk klien agen pengguna.

Masalah Chromium: 422218341.

Lighthouse 12.8.0

Panel Lighthouse kini menjalankan Lighthouse 12.8.0.

Yang paling penting dalam versi ini, Lighthouse menambahkan laporan baru: Memitigasi XSS berbasis DOM dengan Trusted Types.

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 adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Bantuan AI:
    • Histori chat kini dihapus saat Anda menonaktifkan fitur AI yang sesuai di Setelan.
    • Aksesibilitas: Pembaca layar kini mengumumkan judul konteks lebih awal, "Jawaban sedang dimuat" saat jawaban mulai di-streaming dan "Jawaban siap" saat jawaban selesai.
  • Elemen:
    • Tab Gaya kini dapat mengevaluasi fungsi CSS sibling-index(), sibling-count(), dan env() (crbug.com/417128001, crbug.com/40196710).
    • Menambahkan dukungan untuk elemen semu ::view-transition-group-children (crbug.com/425901164).
    • Menambahkan dukungan untuk masalah aksesibilitas terkait konten interaktif dalam elemen <summary> (crbug.com/427172874).
    • Dari tab Computed, Anda kini dapat membuka properti panjang di Styles (crbug.com/41486012).
    • Editor Easing, Color: Anda kini dapat berinteraksi dengan contoh bezier untuk transisi animasi dan contoh warna menggunakan keyboard (crbug.com/401213421).
  • Jaringan: Impor file HAR kini juga mencakup cookie permintaan dan respons (crbug.com/432995868).
  • Mode perangkat: Mengupdate agen pengguna untuk perangkat Apple ke Safari 18.5 terbaru.

Mendownload 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 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.