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 mengapa aturan tidak memiliki efek yang terlihat.

Petunjuk untuk properti CSS yang tidak aktif.

Masalah Chromium: 1178508

Mendeteksi pemilih XPath dan teks secara otomatis di panel Perekam

Panel Perekam kini mendukung pemilih XPath dan teks. Mulai merekam alur pengguna 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

Menelusuri ekspresi yang dipisahkan koma

Anda kini dapat menelusuri ekspresi yang dipisahkan koma selama proses penelusuran bug. Hal ini meningkatkan kemampuan kode yang diminifikasi untuk di-debug.

Menjalankan langkah-langkah ekspresi yang dipisahkan koma.

Sebelumnya, DevTools hanya mendukung penelusuran langkah demi langkah melalui ekspresi yang dipisahkan dengan 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 penelusuran bug karena perilaku penelusuran langkah demi langkah berbeda antara kode yang di-minify dan kode yang ditulis. Hal ini bahkan lebih membingungkan saat menggunakan peta sumber untuk men-debug kode yang di-minify 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

Setelan Daftar yang diabaikan yang ditingkatkan

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

Tab Daftar yang Diabaikan.

Masalah Chromium: 1356517

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

  • Melengkapi otomatis nama properti CSS di panel Styles saat menekan spasi. (1343316)
  • Menghapus scroll otomatis di breadcrumb panel Element. (1369734)

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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