Yang Baru di DevTools (Chrome 108)

Jecelyn Yeen

Petunjuk untuk properti CSS yang tidak aktif

DevTools kini mengidentifikasi gaya CSS yang valid, tetapi tidak memiliki efek yang terlihat. Di panel Gaya, DevTools memudarkan properti yang tidak aktif. Arahkan kursor ke ikon di sampingnya untuk memahami alasan aturan tidak memiliki pengaruh yang terlihat.

Petunjuk untuk properti CSS yang tidak aktif.

Masalah Chromium: 1178508

Deteksi otomatis XPath dan pemilih teks di panel Perekam Suara

Panel Perekam Suara kini mendukung pemilih XPath dan teks. Mulai rekam alur penggunaan dan perekam akan otomatis memilih XPath dan teks unik terpendek dari elemen sebagai pemilih jika tersedia.

Pemilih XPath dan teks di panel Perekam Suara.

Masalah Chromium: 1327206,1327209

Menyusuri ekspresi yang dipisahkan koma

Anda kini dapat menelusuri ekspresi yang dipisahkan koma selama proses debug. Hal ini meningkatkan kemampuan debug kode yang diminifikasi.

Lewati ekspresi yang dipisahkan koma.

Sebelumnya, DevTools hanya mendukung langkah-langkah melalui ekspresi yang dipisahkan titik koma.

Dengan kode di bawah ini,

function foo() {}

function bar() {
  foo();
  foo();
  return 42;
}

Transpiler dan minifier dapat mengubahnya menjadi ekspresi yang dipisahkan koma.

function bar(){return foo(),foo(),42}

Hal ini menimbulkan kebingungan selama proses debug karena perilaku pengurangan akan berbeda antara kode yang diminifikasi dan yang ditulis. Akan lebih membingungkan lagi saat menggunakan peta sumber untuk men-debug kode yang diminifikasi dalam hal kode asli, karena developer kemudian melihat titik koma (yang ada di balik layar berubah menjadi koma berdasarkan toolchain), tetapi debugger tidak berhenti.

Masalah Chromium: 1370200

Peningkatan setelan Daftar yang diabaikan

Buka Setelan > Daftar Pengabaian. DevTools meningkatkan desain untuk membantu Anda mengonfigurasi aturan guna mengabaikan satu skrip atau pola skrip.

Tab Daftar Abaikan.

Masalah Chromium: 1356517

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

  • Pelengkapan otomatis nama properti CSS di panel Styles saat menekan spasi. (1343316)
  • Hapus scroll otomatis di breadcrumb panel Elemen. (1369734)

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

Yang baru di DevTools

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