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 efek yang terlihat.

Petunjuk untuk properti CSS yang tidak aktif.

Masalah Chromium: 1178508

Mendeteksi XPath dan pemilih teks secara otomatis di panel Perekam

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.

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 menyebabkan kebingungan selama proses debug karena perilaku langkah berbeda antara kode yang diminifikasi dan kode yang ditulis. Hal ini bahkan lebih membingungkan saat menggunakan peta sumber untuk men-debug kode yang diminifikasi dalam hal kode asli, karena developer kemudian melihat titik koma (yang diubah menjadi koma oleh toolchain) tetapi debugger tidak berhenti di titik koma tersebut.

Masalah Chromium: 1370200

Peningkatan setelan Daftar yang diabaikan

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

Tab Daftar yang Diabaikan.

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