Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 118)

Sofia Emelianova

Bagian baru untuk properti khusus di Elemen > Gaya

Panel Elemen kini mendukung CSS at-rule@property. Hal ini memungkinkan Anda menentukan properti kustom CSS secara eksplisit dan mendaftarkannya dalam stylesheet tanpa menjalankan JavaScript apa pun.

Untuk memeriksa properti kustom terdaftar Anda, 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 pada 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.
Di Sumber > Ganti, opsi menu Hapus semua penggantian telah diganti dengan opsi Hapus dengan perilaku yang akurat.

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

Opsi Delete baru, pertama-tama 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 disempurnakan

Hasil penelusuran kini menampilkan entri untuk semua kecocokan yang ditemukan dalam baris kode. Sebelumnya, cara ini hanya menampilkan kecocokan pertama per baris kode. Perilaku baru ini sangat berguna saat Anda menelusuri seluruh file yang diminifikasi. Saat Anda mengklik hasil penelusuran, {i>file<i} di editor akan terbuka dan hasil tersebut akan men-scroll sehingga terlihat tidak hanya secara vertikal tetapi juga horizontal.

Bagian sebelum dan sesudah melakukan penelusuran menampilkan semua kecocokan per baris.

Selain itu, Penelusuran mengalami 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 disederhanakan:

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

Sumber > Workspace 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

Anda kini dapat menyusun 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 sintaks dan GPU-printing untuk tipe skrip lainnya

Panel Sumber kini dapat:

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

Sebelum dan sesudah {i>pre-printing<i} dan penyorotan
sintaksis pada jenis skrip aturan spekulasi.

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

Masalah Chromium: 1473875.

Emulasikan fitur media preferensi yang dikurangi transparansi

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.

Mercusuar 11

Panel Lighthouse sekarang 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 tombol navigasi:

CSS Overview: Gunakan panah atas dan bawah untuk membuka bagian di sidebar kiri.
Memori: Di sidebar kiri, fokuskan tombol Simpan 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 lain-lain

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).
Warna diperbarui pada warna material 3 di banyak elemen UI, terutama di panel Elements dan Performance (1456690, 1472243).
Masalah kini mempertahankan masalah cookie di seluruh navigasi (1466601).
Berbagai peningkatan Aplikasi > Pramuat, terutama petak yang dapat diurutkan dan detail kumpulan aturan yang direvisi (1410709).
Berbagai peningkatan editor perintah di Pemantauan protokol, terutama peringatan tentang input yang salah, mengedit perintah yang dikirim, editor untuk parameter objek tanpa kunci yang telah ditetapkan sebelumnya, dukungan untuk enum yang tidak ditentukan oleh referensi, objek tanpa referensi jenis, filter perintah berdasarkan kecocokan substring, dan banyak lagi (1448050).
Diagram api Performa mendapatkan batas di sekeliling kotak total pada diagram lingkaran (1470147).
Sumber kini tidak memperlakukan tanda hubung sebagai karakter kata di CSS (1471354).
Pelengkapan otomatis kini selalu mengurutkan kata kunci sesuai CSS di akhir.
Filter RegEx kini mendukung ruang (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, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.