Yang baru di DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Insight performa baru

Tab Performa > Insight mendapatkan insight baru:

  • HTTP Modern yang menandai permintaan yang menggunakan protokol HTTP/1.1 lama.
  • Gunakan durasi cache yang efisien yang menandai permintaan yang dapat dioptimalkan dengan durasi cache yang lebih lama dan mempercepat waktu pemuatan situs Anda.
  • Tampilan font yang menunjukkan estimasi penghematan waktu jika Anda mengoptimalkan font-display.

Tiga insight baru di tab Insight.

Klik untuk menandai

Sekarang Anda dapat mengklik item di tabel Ringkasan, Bottom-up, Pohon panggilan, dan Log peristiwa untuk mempertahankan peristiwa yang sesuai yang disorot dalam rekaman aktivitas dan meredupkan sisanya saat Anda menjelajahi rekaman aktivitas performa.

Waktu server di Ringkasan permintaan jaringan

Tab Ringkasan di panel Performa kini menampilkan waktu server untuk permintaan jaringan yang menerapkan teknologi rendering sisi server.

Tabel 'Waktu server' di Ringkasan permintaan jaringan.

Panel Performa mengambil data dari header Server-Timing respons header.

Memfilter cookie di 'Privasi dan keamanan'

Tabel di bagian Privasi dan keamanan > Privasi > Cookie pihak ketiga mendapatkan filter, sehingga Anda dapat menemukan cookie yang Anda minati dengan lebih cepat.

Filter di tabel 'Cookie pihak ketiga'.

Ukuran dalam unit kB dalam tabel di seluruh panel

Untuk menjaga agar unit tetap sama dalam konteks yang sama, tabel di panel Jaringan dan Memori, serta tabel 1p / 3p di Performa > Ringkasan kini menampilkan semua ukuran dalam kB. Dengan begitu, Anda dapat langsung membandingkan angka dalam kolom yang sama dan di seluruh panel, bukan hanya melihat satuan MB versus kB versus B.

Sebelum dan sesudah menyatukan unit ukuran.

Pelengkapan otomatis mendukung corner-shape dan corner-*-shape di Elements > Styles

Pengisian otomatis di Elements > Styles kini dapat menyarankan nilai yang sesuai untuk properti corner-shape dan corner-*-shape.

Opsi pelengkapan otomatis untuk properti 'corner-shape'.

Masalah Chromium: 402346406.

Eksperimental: Menyoroti masalah pada elemen dan atribut di DOM

Dengan fitur eksperimental baru ini, panel Elements kini dapat menandai masalah pada elemen atau atribut DOM dengan garis bawah bergelombang berwarna merah. Arahkan kursor ke elemen atau atribut tersebut untuk melihat tooltip dengan link ke error yang sesuai di panel Masalah.

Sebelum dan sesudah menyoroti masalah DOM di hierarki DOM dengan tooltip dan link ke panel Masalah.

Panel Elements saat ini menandai turunan <select> yang tidak valid, definisi ARIA yang tidak cocok, dan atribut ARIA yang tidak valid.

Masalah Chromium: 378738916.

Lighthouse 12.5.0

Panel Lighthouse kini menjalankan Lighthouse 12.5.0.

Yang paling penting dalam versi ini, legacy-javascript kini menggunakan Baseline, bukan esmodules. 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 > Insight > Pohon dependensi jaringan: Sekarang menampilkan waktu untuk semua permintaan jaringan di pohon jaringan (400708304).
    • Hierarki dependensi jaringan: Sekarang menampilkan waktu untuk semua permintaan jaringan dalam hierarki jaringan (400708304).
  • Animasi: Memperbaiki bug yang menyebabkan elemen yang dilepas muncul di panel Memory karena animasi yang direkam 400635410.
  • Perekam: Sekarang menggunakan dialog konfirmasi yang sama seperti menempelkan kode saat menjalankan perekaman untuk pertama kalinya.
  • Lapisan: Sekarang menampilkan jumlah total lapisan dan total memori untuk semua lapisan yang terlihat di status bar di bagian bawah.
  • Memori: Inisialisasi snapshot heap telah ditingkatkan dengan memparalelkan tugas di antara dua pekerja, bukan menggunakan satu pekerja (42203857).
  • Masalah: Kini melaporkan error CORS Akses Jaringan Lokal (LNA) (395895368).
  • Aksesibilitas:
    • Tooltip: Sekarang muncul saat tombol pintas ditekan, bukan saat fokus (396311936).
    • Elemen > Gaya: Fungsi var() kini dapat berinteraksi dengan keyboard, yang berarti Anda dapat memilih --custom-property dan menekan Enter untuk membuka target link-nya (401212692).

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.