Yang Baru di DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Bagian baru untuk properti kustom di Elemen > Gaya

Panel Elemen kini mendukung aturan@property CSS. 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.

    Dialog yang mengarahkan Anda ke kode asli, bukan file yang dipetakan sumber.

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

    Memfilter nilai 'has-overrides:yes' di kolom 'Has overrides'.

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

    Sebelum dan sesudah mengganti 'Hapus semua penggantian' dengan 'Hapus'.

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

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

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

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

Hasil Penelusuran kini menampilkan entri per semua kecocokan yang ditemukan dalam 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 sekarang men-scroll kecocokan ke tampilan tidak hanya secara vertikal, tetapi juga secara horizontal.

Sebelum dan sesudah melakukan penelusuran, semua kecocokan akan ditampilkan per baris.

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. 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 menarik lalu melepas folder atau klik link 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 kini dapat:

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

Sebelum dan sesudah pencetakan yang rapi dan penyorotan sintaksis jenis skrip aturan spekulasi.

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

Masalah Chromium: 1473875.

Meniru 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 Reduce transparency 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. 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 Pemantau protokol, terutama peringatan pada input yang salah, pengeditan 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 berdasarkan pencocokan substring, dan lainnya (1448050).
  • Diagram lingkaran api Performa mendapatkan batas di sekitar 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 berdasarkan CSS di bagian akhir.
  • Filter ekspresi reguler kini mendukung spasi (1346936).
  • Elements memperbaiki deteksi fitur kueri media (1472693).

Mendownload saluran pratinjau

Sebaiknya gunakan 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 melakukannya.

Hubungi tim Chrome DevTools

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

Yang baru di DevTools

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