Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools, Chrome 128

Sofia Emelianova

Insight konsol oleh Gemini akan mulai aktif di sebagian besar negara Eropa

Versi ini menghadirkan dukungan insight Konsol oleh Gemini ke sebagian besar negara Eropa.

Daftar negara Eropa yang baru didukung

Austria, Belgia, Bulgaria, Swiss, Siprus, Republik Ceko, Jerman, Denmark, Estonia, Spanyol, Finlandia, Prancis, Inggris Raya, Yunani, Kroasia, Hungaria, Irlandia, Islandia, Italia, Liechtenstein, Lituania, Luksemburg, Latvia, Malta, Belanda, Norwegia, Polandia, Portugal, Rumania, Swedia, Slovenia, Slovakia.

Jika Anda berada di salah satu negara tersebut, sekarang Anda dapat meminta Gemini untuk memberikan insight langsung di Konsol, agar Anda dapat memahami error dan peringatan dengan lebih baik.

Insight dari Gemini untuk error di Konsol.

Pembaruan panel performa

Update ini menghadirkan beberapa peningkatan pada panel Performa.

Jalur Jaringan yang Disempurnakan

Jalur Jaringan di panel Performa telah ditingkatkan untuk menampilkan informasi penting di awal sehingga Anda tidak perlu beralih antara panel Jaringan dan Performa > Ringkasan, dan untuk memberikan kejelasan yang lebih baik pada isyarat visual dan warna. Selain itu, jika Anda masih perlu beralih ke panel Jaringan, kami telah memudahkan dan mempercepat prosesnya untuk Anda.

Jalur Jaringan sekarang melakukan hal berikut:

Menampilkan legenda warna untuk jenis permintaan.
Menandai permintaan pemblokiran render dengan segitiga merah di sudut kanan atas dan menampilkan inisiator permintaan setelah dipilih dengan panah.
Saat kursor diarahkan ke atasnya, tooltip yang dikerjakan ulang kini menampilkan informasi waktu terstruktur, termasuk perubahan prioritas dan pemblokiran render, jika ada.
Tab Ringkasan kini juga menampilkan perincian waktu di kolom sebelah kanan.

Pelacakan jaringan yang disempurnakan dengan legenda warna, tooltip, indikator pemblokiran render, dan pengaturan waktu di tab Ringkasan.

Selain itu, sekarang Anda dapat mengklik kanan permintaan di trek atau URL-nya di tab Ringkasan, lalu memilih Pengungkapan di panel Jaringan dari menu drop-down. DevTools akan mengarahkan Anda ke panel Jaringan dan menandai permintaan yang Anda cari di tabel.

Menyesuaikan data performa dengan Extensibility API

Versi ini menghadirkan dukungan untuk data ekstensi ke panel Performa. Anda kini dapat menambahkan jalur kustom dengan deskripsi peristiwa dan tooltip ke trace performa, detail ke tab Ringkasan, dan lainnya. Fitur ini mungkin berguna bagi developer framework, library, dan aplikasi kompleks dengan instrumentasi kustom.

Lihat contoh trek kustom di halaman demo ini. Di bagian Performance > Ambil setelan, aktifkan check_box Data ekstensi. Mulai perekaman pertunjukan, klik Tambahkan Corgi baru di halaman demo, lalu hentikan perekaman. Anda akan melihat jalur kustom dalam rekaman aktivitas yang berisi peristiwa dengan tooltip kustom dan detail di tab Ringkasan.

Trek kustom di panel Performa.

Singkatnya, untuk memperluas data performa, teruskan struktur tertentu ke parameter measureOption.detail atau markOption.detail dari panggilan API performance.measure() atau performance.mark().

Detail di jalur Waktu

Jika Anda adalah developer web yang menggunakan bagian User Timing dari Performance API untuk menambahkan entri ke pelacakan Timing, sekarang Anda dapat melihat detail arbitrer di tab Ringkasan untuk peristiwa mark dan measure beserta stempel waktunya.

Peristiwa kustom di pelacakan Waktu dengan stempel waktu dan detailnya.

Masalah Chromium: 345418915.

Salin semua permintaan yang tercantum di panel Jaringan

Daripada menyalin seluruh log jaringan, kini panel Jaringan memungkinkan Anda menerapkan filter dan hanya menyalin permintaan yang tercantum.

Opsi salin hanya untuk permintaan yang tercantum.

Snapshot heap lebih cepat dengan tag HTML bernama dan lebih rapi

Snapshot heap di panel Memory menjadi jauh lebih cepat, kini objeknya dikelompokkan menurut tag HTML bernama, lebih cocok dengan semantik bahasa JavaScript dengan menampilkan lebih sedikit objek internal, dan selalu menyertakan nilai numerik.

Objek yang dikelompokkan menurut tag HTML bernama.

Performa setelan check_box Sertakan nilai numerik dalam pengambilan telah dipercepat, diaktifkan secara default, dan dihapus dari panel Memori.

Untuk menyertakan objek internal ke dalam snapshot secara manual, aktifkan setelan Setelan terlebih dahulu > Eksperimen > check_box Tampilkan opsi untuk mengekspos bagian internal dalam cuplikan heap, lalu aktifkan check_box Ekspos internal (...) di panel Memori.

Masalah Chromium: 41490040, 343341610, 42203857.

Buka panel Animasi untuk merekam animasi dan mengedit `@keyframes` secara live

Panel Animasi sekarang melakukan hal berikut:

Merekam animasi yang sedang berlangsung saat Anda membuka panel, sehingga Anda tidak perlu memuat ulang halaman untuk merekam animasi.
Mendukung pengeditan langsung @keyframes. Dengan kata lain, memperbarui animasi yang diambil saat Anda mengedit bagian @keyframes di Elemen > Gaya.

Lihat cara kerja kedua fitur dalam video berikut.

Masalah Chromium: 352718055.

Mercusuar 12.1.0

Panel Lighthouse sekarang menjalankan Lighthouse 12.1.0.

Pembaruan ini menghadirkan sejumlah perubahan, termasuk penghapusan metrik First Artiful Paint (FMP) lama yang mendukung Largest Contentful Paint (LCP). Lihat daftar lengkap perubahan.

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

Masalah Chromium: 772558.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

Menekan Tab setelah pelengkapan otomatis di bidang edit ekspresi langsung akan memindahkan fokus ke titik fokus berikutnya. Sebelumnya, cara ini akan mengindentasi teks.
Mengklik pengubah ukuran akan memfokuskannya, sehingga Anda dapat memindahkannya dengan tombol panah kanan dan kiri.
Pembaca layar kini mengumumkan kolom edit Tambahkan ekspresi watch di Sumber dan Hapus ekspresi smartwatch kini terlihat jelas saat melakukan navigasi dengan keyboard.

Masalah Chromium: 349939551, 343942719, 349334243, 349428374.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

Performa:
- Jalur jaringan: Menambahkan peristiwa koneksi WebSocket 331351979.
- Panel Performance kini memperbesar dengan benar aktivitas thread utama tersibuk 345599356.
- Memperbaiki bug saat mengupload jenis file rekaman aktivitas yang salah. Bug tersebut kini mencegah upload jenis apa pun kecuali .json atau .gz 349864878 yang benar.
Elemen > Gaya:
- Drop-down unit dalam nilai properti length kini tidak digunakan lagi 41495618.
- Perbaikan properti aktif tambahan untuk aturan bertingkat 346732737.
- Bagian @position-try yang tidak aktif kini berwarna abu-abu 40246493.
Aplikasi:
- Cookie: Memperbaiki bug yang tidak akan memuat ulang cookie setelah Refresh klik 348683488.
- Penyimpanan lokal: Anda kini dapat mengurutkan berdasarkan kunci sesuai abjad 341129585.

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.