Yang baru di DevTools, Chrome 135

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Link asal dan skrip untuk panggilan profil dan fungsi di Performa

Tab Performa > Ringkasan kini menampilkan link ke skrip dan origin yang relevan untuk panggilan profil dan fungsi, sehingga Anda tidak perlu mengarahkan kursor ke peristiwa ini di jalur Utama.

Sebelum dan sesudah menambahkan sumber dan asal ke tab Ringkasan.

Selain itu, jalur Jaringan dan Utama kini menampilkan nama pihak ketiga, jika ada, dalam tooltip saat Anda mengarahkan kursor ke peristiwa.

Masalah Chromium: 368541957.

Dukungan data kolom 'LCP menurut fase'

Dengan data kolom diaktifkan, insight Performa > Insight > LCP menurut fase kini menampilkan waktu render gambar persentil ke-75 dari laporan UX Chrome dalam tabel tambahan, sehingga Anda dapat membandingkan waktu render langsung di insight.

Sebelum dan sesudah menambahkan dukungan data kolom ke insight 'LCP menurut fase'.

Insight 'Hierarki dependensi jaringan'

Tab Performa > Insight menambahkan insight Hierarki dependensi jaringan baru ke koleksinya. Insight ini memberi tahu Anda jika Anda telah membuat rantai permintaan penting, yang tidak direkomendasikan. Arahkan kursor ke permintaan yang tercantum dalam insight untuk melihatnya ditandai di jalur Jaringan.

Untuk mempelajari lebih lanjut, lihat Menghindari rantai permintaan penting.

Penyorotan stack terberat

Panel Performa kini menandai item di jalur Utama saat Anda mengarahkan kursor ke item tersebut di sidebar Hierarki panggilan atau Bottom-up > Stack terberat dan meredupkan item lainnya. Hal ini memungkinkan Anda menemukan item bertingkat dalam stack panggilan yang paling banyak menghabiskan waktu secara visual.

Tampilan hierarki aksesibilitas di Elemen

Tampilan hierarki aksesibilitas dalam layar penuh kini diaktifkan secara default di panel Elemen.

Sebelumnya, Anda dapat menjelajahi hierarki aksesibilitas terpisah di tab Elemen > Aksesibilitas. Sekarang Anda dapat mengklik tombol Switch to Accessibility Tree view di sudut kanan atas hierarki DOM di panel Elements untuk beralih antara DOM dan hierarki aksesibilitas halaman penuh, sehingga Anda dapat menjelajahi hierarki dan hubungannya dengan lebih mudah.

Tampilan sebelum dan sesudah mengaktifkan tampilan hierarki aksesibilitas dalam layar penuh secara default .

Hierarki aksesibilitas memungkinkan Anda memeriksa cara teknologi pendukung melihat konten Anda dan menampilkan atribut ARIA serta properti aksesibilitas yang dihitung dari node DOM. Untuk mempelajari lebih lanjut, lihat Hierarki aksesibilitas lengkap di Chrome DevTools.

Masalah Chromium: 40808541.

Status kosong yang ditingkatkan untuk berbagai panel

Status kosong (saat tidak ada yang terbuka) untuk berbagai panel, bagian, dan tab telah disederhanakan untuk memberi tahu Anda dengan tepat apa yang harus dilakukan untuk mulai menggunakannya. Beberapa status kosong, misalnya, di panel Jaringan, kini memiliki tombol yang berguna dan relevan seperti Muat ulang halaman.

Sebelum dan sesudah peningkatan status kosong di panel Jaringan dan Penelusuran.

Opsi 'Tanya AI' dipindahkan ke bagian bawah menu

Opsi Ask AI kini berada di bagian bawah menu drop-down, bukan di bagian atas.

Sebelum dan sesudah memindahkan opsi 'Tanya AI' ke bagian bawah menu drop-down.

Jangan ragu untuk memberikan masukan di panel bantuan AI di crbug.com/364805393.

Lighthouse 12.4.0

Panel Lighthouse kini menjalankan Lighthouse 12.4.0.

Versi ini menandai beberapa audit performa sebagai informatif dalam kondisi lulus, bukan menyembunyikannya di bagian audit yang lulus. Lihat daftar lengkap perubahan.

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

Masalah Chromium: 40543651.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performance > Summary: Mengganti dua baris Total time dan Self time dengan Duration satu baris yang juga menampilkan (self time) dalam tanda kurung, jika ada (crbug.com/395572753).
  • Masalah: Menambahkan jenis masalah baru: masalah <select> di hierarki aksesibilitas dan error Tanda Tangan Pesan SRI yang terjadi selama penguraian atau validasi di layanan jaringan (crbug.com/381044049, crbug.com/347890366).
  • Aksesibilitas: tab Elemen > Gaya kini menguraikan elemen yang Anda lalui menggunakan navigasi keyboard (crbug.com/396311936).
  • Elemen: Masalah terkait <select> kini didukung dan ditandai dengan garis bawah bergelombang (crbug.com/378738916).
  • Jaringan: Ikon 'titik penggantian' dan peringatan cookie kini ditampilkan di sebelah kanan nama tab, bukan di sebelah kiri (crbug.com/390556283).

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.