Yang Baru di DevTools (Chrome 118)

Bagian baru untuk properti kustom di Elemen > Gaya

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

Untuk memeriksa properti kustom terdaftar, di Elements > Styles, arahkan kursor ke nama properti dan lihat deskriptornya dalam 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 serangkaian peningkatan di versi sebelumnya, penggantian lokal kini melakukan hal berikut:

• Di Sources > Page, saat Anda mengklik kanan file yang dipetakan sumber dan memilih Override content, DevTools akan menampilkan dialog yang mengarahkan Anda ke sumber asli. Konten file yang dipetakan sumber tidak dapat diganti.

  

• Panel Network mendapatkan kolom Has overrides baru dan filter has-overrides:[content|headers|yes|no] yang sesuai. Untuk melihat kolom Memiliki penggantian, klik kanan header tabel, lalu pilih kolom 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 di 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 isinya.

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

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

Penelusuran yang ditingkatkan

Hasil Penelusuran kini menampilkan entri per semua kecocokan yang ditemukan dalam satu baris kode. Sebelumnya, hanya kecocokan pertama per baris kode yang ditampilkan. Perilaku baru ini sangat berguna saat Anda menelusuri file yang di-minify. Saat Anda mengklik hasil penelusuran, file akan terbuka di editor dan sekarang mencocokkan scroll ke tampilan 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 daftar abaikan 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. Terutama, panel Sources > Filesystem diganti namanya menjadi Workspace. Berbagai teks UI di panel ini kini lebih jelas dan tidak berlebihan.
• Konfigurasi yang lebih baik. Melihat petunjuk yang lebih baik untuk menarik lalu melepas folder atau mengklik link untuk memilih folder.

Sources > Workspace memungkinkan Anda menyinkronkan perubahan yang Anda buat di DevTools langsung ke file sumber Anda.

Lihat cara kerja penyiapan dan alur kerja baru:

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

Mengurutkan ulang panel di Sumber

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

Masalah Chromium: 1473758.

Penyorotan sintaksis dan pencetakan yang lebih baik untuk jenis skrip lainnya

Panel Sumber kini dapat:

• Mencetak JavaScript inline dengan rapi dalam jenis skrip berikut: module, importmap, speculationrules.
• Menyoroti sintaksis jenis skrip importmap dan speculationrules, yang keduanya menyimpan JSON.

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

Masalah Chromium: 1473875.

Mengemulasi fitur media prefers-reduced-transparency

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 Kurangi transparansi di macOS.

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

Masalah Chromium: 1424879.

Lighthouse 11

Panel Lighthouse kini menjalankan Lighthouse 11. Terutama, versi ini menghapus navigasi lama dan menambahkan audit aksesibilitas baru serta mengubah cara pemberian skor kategori aksesibilitas.

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 penekanan tombol navigasi:

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

Selain itu, beberapa masalah pengumuman pembaca layar telah diperbaiki.

Masalah Chromium: 1470401, 1471301, 1474108, 1468631.

Sorotan lain-lain

Berikut 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 pada 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 > Pramuat, terutama pada petak yang dapat diurutkan dan detail set aturan yang direvisi (1410709).
• Berbagai peningkatan pada editor perintah di Monitor protokol, terutama peringatan pada input yang salah, pengeditan perintah yang dikirim, editor untuk parameter objek tanpa kunci yang telah ditentukan sebelumnya, dukungan untuk enum yang tidak ditentukan oleh referensi, objek tanpa referensi jenis, perintah filter berdasarkan kecocokan substring, dan lainnya (1448050).
• Diagram flame Performa mendapatkan batas di sekitar kotak total pada diagram lingkaran (1470147).
• Sumber kini tidak memperlakukan tanda hubung sebagai karakter kata dalam CSS (1471354).
• Pelengkapan otomatis kini selalu mengurutkan kata kunci CSS di bagian akhir.
• Filter RegEx kini mendukung spasi (1346936).
• Elemen 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 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 more_vert 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.