Yang baru di DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Menemukan telur Paskah

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

Untuk menemukannya, cari emoji 💫 berwarna-warni.

Pembaruan panel Elemen

Versi ini menghadirkan beberapa update pada panel Elements.

Mengemulasi halaman terfokus di Elemen > Gaya

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

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

Sebelum dan sesudah meniru halaman terfokus di tab Styles.

Masalah Chromium: 1468393.

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

Untuk menyederhanakan pengeditan CSS, tab Elements > Styles kini memungkinkan Anda menggunakan Pemilih Warna, Jam Sudut, dan Editor Easing dalam penggantian var().

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

Masalah Chromium: 1520417.

Alat panjang CSS tidak digunakan lagi

Alat penulisan panjang 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 panjang, hapus Setelan > Eksperimen > Hentikan penggunaan alat penulisan CSS <length> di tab Styles.

Jika Anda masih ingin menggunakan alat ini, tim DevTools ingin mendengar pendapat Anda dan bagaimana alat panjang membantu alur kerja Anda. Jangan ragu untuk memberikan masukan di crbug/1522657.

Eksperimen penghentian penggunaan dinonaktifkan.

Popover untuk hasil penelusuran yang dipilih di Performa > Jalur utama

Untuk mempermudah penelusuran, diagram alur di jalur Performa > Utama kini menampilkan pop-up di atas peristiwa yang sesuai saat Anda melihat hasil penelusuran.

Sebelum dan sesudah menampilkan popover di atas hasil penelusuran yang dipilih.

Masalah Chromium: 1523279.

Pembaruan panel Jaringan

Versi ini menghadirkan beberapa update pada panel Network.

Tombol hapus dan filter penelusuran di tab Network > EventStream

Tab Jaringan > EventStream akan mendapatkan:

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

Sebelum dan sesudah menambahkan tombol Hapus dan filter penelusuran.

Tim DevTools ingin berterima kasih kepada Charles Vazac atas peluncuran 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 > Cookie

Tab Network > Cookies kini menampilkan tooltip dengan alasan pengecualian di samping cookie yang seharusnya diblokir oleh penghentian cookie pihak ketiga.

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

Cookie pihak ketiga dapat diizinkan karena alasan berikut:

Masalah Chromium: 41491846.

Mengaktifkan dan menonaktifkan semua titik henti sementara di Sumber

Bagian Sources > Breakpoints menampilkan kembali opsi Enable dan Disable all breakpoints ke menu drop-down-nya. Sebelumnya, opsi ini tidak disertakan dalam desain ulang titik henti sementara.

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

Sebelum dan setelah mengembalikan opsi aktifkan dan nonaktifkan.

Masalah Chromium: 1522037.

Melihat skrip yang dimuat di DevTools untuk Node.js

DevTools untuk Node.js kini menampilkan skrip yang dimuat di pohon navigasi di Sources > Scripts.

Sebelum dan sesudah menambahkan tab Skrip dengan hierarki skrip yang dimuat.

Masalah Chromium: 1518364.

Lighthouse 11.5.0

Panel Lighthouse kini 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 layout-shift-elements yang hanya mencantumkan elemen yang terpengaruh oleh perubahan 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 > Eksperimen.
    • Konfirmasi tindakan saat menghapus, mengonfirmasi, atau memulihkan pintasan di Setelan > Pintasan.
  • Tabel di Setelan > Lokasi kini dirender dengan benar sebagai tabel untuk alat aksesibilitas.

Masalah Chromium: 1516957, 324282443, 324467508, 324930007.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

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

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