Yang Baru di DevTools (Chrome 108)

Jecelyn Yeen
Jecelyn Yeen

Petunjuk untuk properti CSS yang tidak aktif

DevTools kini mengidentifikasi gaya CSS yang valid, tetapi tidak memiliki efek yang terlihat. Di panel Styles, 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 Recorder kini mendukung pemilih XPath dan teks. Mulai merekam alur penggunaan dan perekam akan otomatis memilih XPath dan teks unik terpendek dari suatu elemen sebagai pemilih jika tersedia.

Pemilih XPath dan teks di panel Perekam Suara.

Masalah Chromium: 1327206,1327209

Melewati ekspresi yang dipisahkan koma

Sekarang Anda dapat melangkah melalui ekspresi yang dipisahkan koma selama proses debug. Hal ini meningkatkan kemampuan debug kode yang diminifikasi.

Melewati ekspresi yang dipisahkan koma.

Sebelumnya, DevTools hanya mendukung 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

Setelan daftar pengabaian yang ditingkatkan

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

Tab Daftar Abaikan.

Masalah Chromium: 1356517

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

  • Nama properti CSS Autocomplete di panel Styles saat menekan spasi. (1343316)
  • Hapus scroll otomatis di breadcrumb panel Elemen. (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, 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.