Yang baru di DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Temukan fitur tersembunyi

Untuk merayakan April Mop tahun ini Hari ini, tim DevTools telah menyembunyikan pesan Paskah di suatu tempat di DevTools.

Untuk menemukannya, cari emoji 💫 berwarna-warni.

Update panel elemen

Versi ini menghadirkan beberapa update pada panel Elements.

Emulasikan halaman terfokus di Elemen > Gaya

Elemen > Tab Gaya kini memiliki opsi check_box Emulasikan halaman yang difokuskan di bagian tombol Aktifkan/nonaktifkan status elemen (:hov). Sebelumnya, Anda hanya dapat menemukan opsi ini di panel Rendering.

Jika Anda mengalihkan fokus dari halaman ke DevTools, beberapa elemen overlay disembunyikan secara otomatis jika dipicu oleh fokus. Misalnya, daftar drop-down, menu, atau pemilih tanggal. Opsi Emulasikan halaman yang difokuskan memungkinkan Anda men-debug elemen tersebut seolah-olah elemen tersebut sedang menjadi fokus.

Sebelum dan sesudah mengemulasi halaman terfokus di tab Gaya.

Masalah Chromium: 1468393.

Pemilih Warna, Jam Sudut, dan Easing Editor di penggantian var()

Untuk menyederhanakan pengeditan CSS, Elemen > Tab Gaya kini memungkinkan Anda menggunakan Pemilih Warna, Jam Sudut, dan Editor Easing di penggantian var().

Sebelum dan sesudah merender alat Pemilih Warna, Jam Sudut, dan Easing Editor di penggantian var().

Masalah Chromium: 1520417.

Alat durasi CSS tidak digunakan lagi

Alat pembuatan durasi CSS tidak digunakan lagi karena masukan bahwa alat ini memperlambat alur kerja dan tidak memberikan banyak nilai.

Anda tidak dapat lagi menarik untuk menyesuaikan nilai atau memilih jenis unit dari menu drop-down. Sebagai gantinya, klik dua kali nilai dan ketik nilai baru.

Untuk mengaktifkan kembali alat durasi, hapus setelan Setelan > Eksperimen > check_box Hentikan penggunaan CSS <length> di tab Gaya.

Jika Anda masih ingin menggunakan alat ini, tim DevTools ingin mendengar pendapat Anda dan bagaimana alat {i>length<i} membantu Anda dalam alur kerja. Jangan ragu untuk memberikan masukan di crbug/1522657.

Eksperimen penghentian penggunaan dinonaktifkan.

Pop-up untuk hasil penelusuran yang dipilih di tab Performa > Trek utama

Untuk mempermudah penelusuran, flame chart di bagian Performa > Trek utama kini menampilkan pop-up di atas peristiwa yang sesuai saat Anda melihat seluruh hasil penelusuran.

Bagian sebelum dan sesudah menampilkan pop-up di atas hasil penelusuran yang dipilih.

Masalah Chromium: 1523279.

Update panel jaringan

Versi ini menghadirkan beberapa update ke panel Network.

Tombol hapus dan filter penelusuran di Jaringan > Tab EventStream

Bagian Jaringan > Tab EventStream mendapatkan:

  • Tombol blokir Hapus yang menghapus peristiwa yang direkam di tabel.
  • Filter penelusuran yang memahami ekspresi reguler.

Sebelum dan sesudah penambahan tombol Hapus dan filter penelusuran.

Tim DevTools ingin berterima kasih kepada Charles Vazac karena telah memberikan fitur ini.

Selain itu, tab EventStream kini juga merekam peristiwa yang dikirim server melalui pengambilan/XHR, bukan hanya EventSource API. Coba di halaman demo ini.

Masalah Chromium: 1488863, 40659493.

Tooltip dengan alasan pengecualian untuk cookie pihak ketiga di Jaringan > {i>Cookies<i}

Bagian Jaringan > Tab Cookie kini menampilkan tooltip dengan alasan pengecualian di samping cookie yang seharusnya diblokir oleh penghentian cookie pihak ketiga.

Bagian sebelum dan sesudah menampilkan tooltip dengan alasan pengecualian untuk cookie pihak ketiga.

Cookie pihak ketiga mungkin diizinkan karena alasan berikut:

Masalah Chromium: 41491846.

Mengaktifkan dan menonaktifkan semua titik henti sementara di Sumber

Kolom Sumber > Bagian Titik henti sementara menghadirkan kembali opsi Aktifkan dan Nonaktifkan semua titik henti sementara ke menu drop-down. Sebelumnya, opsi ini dihilangkan oleh desain ulang titik henti sementara.

Untuk mengaktifkan atau menonaktifkan semua titik henti sementara, klik kanan titik henti sementara di Sources > Titik henti sementara dan pilih opsi yang sesuai.

Sebelum dan sesudah memunculkan kembali opsi aktifkan dan nonaktifkan.

Masalah Chromium: 1522037.

Lihat skrip yang dimuat di DevTools untuk Node.js

DevTools untuk Node.js kini menampilkan skrip yang dimuat di hierarki navigasi di Sumber > Skrip.

Sebelum dan sesudah penambahan tab Script dengan hierarki skrip yang dimuat.

Masalah Chromium: 1518364.

Mercusuar 11.5.0

Panel Lighthouse sekarang menjalankan Lighthouse 11.5.0. Lihat daftar lengkap perubahan.

Di antara perubahan penting adalah audit baru yang memperkirakan penyebab utama pergeseran tata letak. Audit ini menggantikan audit elemen pergeseran tata letak yang hanya mencantumkan elemen yang terpengaruh oleh pergeseran tata letak.

Audit baru yang memperkirakan penyebab utama pergeseran tata letak.

Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

  • Pembaca layar kini mengumumkan:
    • Teks link Pelajari lebih lanjut di samping jenis pemilih di panel Perekam.
    • Jika tidak ada eksperimen yang cocok dengan filter di setelan Setelan > Eksperimen.
    • Konfirmasi tindakan saat menghapus, mengonfirmasi, atau memulihkan pintasan di setelan Setelan > Pintasan.
  • Tabel di setelan Setelan > Lokasi kini dirender dengan benar sebagai tabel untuk alat aksesibilitas.

Masalah Chromium: 1516957, 324282443, 324467508, 324930007.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Font di DevTools diupdate agar sesuai dengan Chrome (1523538).
  • Performa: Memperbaiki tampilan screenshot saat mengarahkan kursor ke linimasa (1519469).
  • Sumber: Tinggi baris di Editor ditingkatkan agar kode lebih mudah dibaca (1523640).
  • Jaringan > Respons: Memperbaiki berbagai masalah tampilan dengan format dan encoding yang berbeda (1523128, 1509336, 1523128, 41481944, 1509336).

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.