Yang Baru di DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova
GitHub

Bagian baru untuk properti kustom di Elemen > Gaya

Panel Elemen kini mendukung CSS@property di aturan. API ini memungkinkan Anda menentukan properti khusus CSS secara eksplisit dan mendaftarkannya di stylesheet tanpa menjalankan JavaScript apa pun.

Untuk memeriksa properti kustom terdaftar Anda, di Elements > Gaya, arahkan kursor ke nama properti, lalu lihat deskripsinya 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 aliran peningkatan di versi sebelumnya, penggantian lokal kini melakukan hal berikut:

  • Di Sources > Page, jika 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 akan membawa 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 header tersebut.

    Memfilter 'has-overrides:yes' di kolom 'Memiliki penggantian' .

  • Di Sources > Ganti, opsi menu Hapus semua penggantian telah diganti dengan opsi Hapus dengan perilaku yang akurat.

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

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

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

Untuk memunculkan kembali 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 untuk semua kecocokan yang ditemukan dalam satu baris kode. Sebelumnya, opsi ini hanya menampilkan kecocokan pertama per baris kode. Perilaku baru ini sangat berguna saat Anda melakukan penelusuran di seluruh 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.

Sebelum dan sesudah melakukan penelusuran akan menampilkan semua kecocokan per baris.

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 disederhanakan:

  • Penamaan yang konsisten. Terutama, Sumber > Panel Filesystem diganti namanya menjadi Workspace. Berbagai teks UI di panel ini kini lebih jelas dan bebas dari redundansi.
  • Penyiapan yang ditingkatkan. Lihat petunjuk yang lebih baik untuk menyeret dan melepas folder atau klik tautan untuk memilih folder.

Sumber > Workspace memungkinkan Anda menyinkronkan perubahan yang dibuat di DevTools langsung ke file sumber.

Lihat cara kerja penyiapan dan alur kerja baru:

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

Menyusun 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 presisi cetak untuk lebih banyak jenis skrip

Panel Sumber sekarang dapat:

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

Sebelum dan setelah pencetakan normal dan penyorotan sintaksis jenis skrip aturan spekulasi.

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 Mengurangi 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. Yang terutama, versi ini menghapus navigasi lama dan menambahkan audit aksesibilitas baru serta mengubah cara penilaian 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 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).
  • Update warna pada warna material 3 di banyak elemen UI, terutama di panel Elemen dan Performa (1456690, 1472243).
  • Issues kini mempertahankan masalah cookie di seluruh navigasi (1466601).
  • Berbagai Aplikasi > Peningkatan Pramuat, terutama petak yang dapat diurutkan dan revisi detail kumpulan aturan (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).
  • Flame chart Performa memiliki 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 yang menggunakan CSS di akhir.
  • Filter RegEx kini mendukung spasi (1346936).
  • Deteksi fitur kueri media tetap Elemen (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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

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

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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