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 asal 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 Network dan Main 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 lapangan diaktifkan, insight Performa > Insight > LCP menurut fase kini menampilkan waktu gambar persentil ke-75 dari Laporan UX Chrome dalam tabel tambahan, sehingga Anda dapat membandingkan waktu langsung di insight.

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

Insight 'Hierarki dependensi jaringan'

Tab Performa > Insight menambahkan insight Pohon dependensi jaringan baru ke koleksinya. Insight ini memberi tahu Anda jika Anda telah merangkai permintaan penting, yang tidak direkomendasikan. Arahkan kursor ke permintaan yang tercantum dalam insight untuk melihatnya disorot di jalur Network.

Untuk mempelajari lebih lanjut, lihat Hindari rantai permintaan penting.

Penyorotan stack terberat

Panel Performa kini menandai item di jalur Utama saat Anda mengarahkan kursor ke item tersebut di sidebar Call tree atau Bottom-up > Heaviest stack dan meredupkan item lainnya. Hal ini memungkinkan Anda menemukan item bertingkat secara visual di stack panggilan yang membutuhkan waktu paling lama.

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 Beralih ke tampilan Hierarki Aksesibilitas di sudut kanan atas hierarki DOM di panel Elemen untuk beralih bolak-balik antara hierarki DOM dan hierarki aksesibilitas halaman penuh, sehingga Anda dapat menjelajahi hierarki tersebut dan hubungannya dengan lebih mudah.

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

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

Masalah Chromium: 40808541.

Peningkatan status kosong untuk berbagai panel

Status kosong (saat tidak ada yang terbuka) untuk berbagai panel, bagian, dan tab telah disederhanakan untuk memberi tahu Anda secara tepat apa yang harus dilakukan untuk mulai menggunakannya. Beberapa status kosong, misalnya, di panel Network, kini memiliki tombol bantuan yang relevan seperti Reload page.

Sebelum dan sesudah meningkatkan kualitas status kosong di panel Jaringan dan Penelusuran.

Opsi 'Tanya AI' dipindahkan ke bagian bawah menu

Opsi Tanya 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 Anda 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 lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa > Ringkasan: Mengganti dua baris Total waktu dan Waktu sendiri dengan satu baris Durasi 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 lewati menggunakan navigasi keyboard (crbug.com/396311936).
  • Elemen: Masalah dengan <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

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.