Yang Baru di DevTools (Chrome 118)

Bagian baru untuk properti kustom di Elemen > Gaya

Panel Elemen kini mendukung CSS@property di aturan. Dengan ini, Anda dapat menentukan properti kustom CSS secara eksplisit dan mendaftarkannya dalam stylesheet tanpa menjalankan JavaScript apa pun.

Untuk memeriksa properti kustom terdaftar, di Elemen > Gaya, arahkan kursor ke nama properti dan lihat deskripsinya di tooltip. Di tooltip, klik link untuk melihat properti terdaftar di bagian @property yang dapat diciutkan.

Masalah Chromium: 1471102, 1471103, 1471105.

Peningkatan penggantian lokal lainnya

Melanjutkan aliran peningkatan di versi sebelumnya, penggantian lokal kini melakukan hal berikut:

• Di Sumber > Halaman, saat Anda mengklik kanan file yang dipetakan sumber dan memilih Ganti konten, DevTools akan menampilkan dialog yang mengarahkan Anda ke sumber asli. Konten file yang dipetakan sumber tidak dapat diganti.

  

• Panel Jaringan mendapatkan kolom Memiliki penggantian baru dan filter has-overrides:[content|headers|yes|no] yang sesuai. Untuk melihat kolom Memiliki penggantian, klik kanan header tabel lalu pilih header tersebut.

  

• Di Sumber > Penggantian, opsi menu Hapus semua penggantian telah diganti dengan opsi Hapus dengan perilaku yang tepat.

  

Hapus semua penggantian sebelumnya membingungkan karena hanya menghapus penggantian yang aktif dalam sesi saat ini, yang ditandai dengan ikon titik ungu .

Opsi Hapus yang baru, pertama-tama akan menampilkan pesan peringatan dan meminta konfirmasi, lalu menghapus folder yang Anda klik beserta semua kontennya.

Untuk mengaktifkan kembali opsi sebelumnya, centang Aktifkan "Hapus semua penggantian untuk sementara" di Setelan > Eksperimen.

Masalah Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

Penelusuran yang ditingkatkan

Hasil Penelusuran kini menampilkan entri untuk semua kecocokan yang ditemukan dalam satu baris kode. Sebelumnya, hanya menampilkan kecocokan pertama per baris kode. Perilaku baru ini sangat berguna saat Anda menelusuri file yang diminifikasi. Saat Anda mengklik hasil penelusuran, file akan terbuka di editor dan kini menampilkan hasil yang cocok tidak hanya secara vertikal, tetapi juga secara horizontal.

Selain itu, Penelusuran mendapatkan peningkatan kecepatan. Lihat perbandingan sebelum (kiri) dan sesudah (kanan) di video berikutnya.

Terakhir, Penelusuran kini mendukung abaikan listingan dan tidak akan menampilkan hasil dari file yang diabaikan.

Masalah Chromium: 1468875, 1472019.

Panel Sumber yang ditingkatkan

Ruang kerja yang disederhanakan di panel Sumber

Fitur ruang kerja di panel Sumber kini lebih sederhana:

• Penamaan yang konsisten. Yang paling penting, panel Sources > Filesystem diganti namanya menjadi Workspace. Berbagai teks UI di panel ini kini lebih jelas dan bebas redundansi.
• Peningkatan penyiapan. Lihat petunjuk yang lebih baik untuk menyeret dan melepas folder atau klik tautan untuk memilih folder.

Sumber > Ruang kerja memungkinkan Anda menyinkronkan perubahan yang Anda buat di DevTools langsung ke file sumber.

Lihat cara kerja penyiapan dan alur kerja baru:

Masalah Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Mengurutkan ulang panel di Sumber

Sekarang Anda dapat mengurutkan ulang panel di sisi kiri panel Sumber dengan menarik lalu melepas, mirip dengan cara mengurutkan ulang panel, tab, dan panel lainnya.

Masalah Chromium: 1473758.

Penyorotan sintaksis dan pencetakan yang rapi untuk lebih banyak jenis skrip

Panel Sumber sekarang dapat:

• JavaScript inline pretty-print dalam jenis skrip berikut: module, importmap, speculationrules.
• Menandai sintaksis jenis skrip importmap dan speculationrules, yang keduanya menyimpan JSON.

Untuk mengetahui informasi selengkapnya tentang aturan spekulasi, lihat Melakukan pra-rendering halaman di Chrome untuk navigasi halaman instan.

Masalah Chromium: 1473875.

Emulasikan fitur media pilihan dengan transparansi yang lebih rendah

Chrome 118 kini mendukung fitur media prefers-reduced-transparency. Fitur ini memungkinkan developer menyesuaikan konten web dengan preferensi yang dipilih pengguna untuk mengurangi transparansi di OS, seperti setelan Reduce transparency di macOS.

Untuk mengemulasi fitur media ini, buka tab Rendering dan scroll ke bawah.

Masalah Chromium: 1424879.

Mercusuar 11

Panel Lighthouse kini menjalankan Lighthouse 11. Yang paling penting, versi ini menghapus navigasi lama dan menambahkan audit aksesibilitas baru serta mengubah cara kategori aksesibilitas diberi skor.

Lihat juga daftar lengkap perubahan. Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Peningkatan aksesibilitas

DevTools kini mendukung lebih banyak tombol navigasi:

• Ringkasan CSS: Gunakan panah atas dan bawah untuk membuka bagian di sidebar kiri.
• Memory: Di sidebar kiri, fokuskan tombol Save di samping snapshot dengan Tab dan tekan Enter untuk memilih folder.

Selain itu, beberapa masalah pengumuman pembaca layar telah diperbaiki.

Masalah Chromium: 1470401, 1471301, 1474108, 1468631.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

• Jaringan: Ikon baru untuk jenis resource populer: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Pembaruan warna ke warna material 3 di banyak elemen UI, terutama di panel Elemen dan Performa (1456690, 1472243).
• Masalah kini mempertahankan masalah cookie di seluruh navigasi (1466601).
• Berbagai peningkatan Aplikasi > Pemuatan Awal, terutama petak yang dapat diurutkan dan detail kumpulan aturan yang direvisi (1410709).
• Berbagai peningkatan editor perintah di Protocol monitor, terutama peringatan tentang input yang salah, mengedit perintah yang dikirim, editor untuk parameter objek tanpa kunci yang telah ditentukan, dukungan untuk enum yang tidak ditentukan oleh referensi, objek tanpa referensi jenis, perintah filter menurut kecocokan substring, dan banyak lagi (1448050).
• Diagram lingkaran api Performa mendapatkan batas di sekitar kotak total pada diagram lingkaran (1470147).
• Saat ini Sumber tidak memperlakukan tanda hubung sebagai karakter kata dalam CSS (1471354).
• Pelengkapan otomatis kini selalu mengurutkan kata kunci berdasarkan CSS di bagian akhir.
• Filter ekspresi reguler kini mendukung spasi (1346936).
• Elements memperbaiki deteksi fitur kueri media (1472693).

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 yang mutakhir, dan membantu menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

• Kirim masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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