Yang baru di DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Panel Isi Otomatis baru

Versi ini menghadirkan panel Isi Otomatis baru ke DevTools. Isi Otomatis Chrome menyediakan cara mudah untuk mengisi formulir secara otomatis di situs dengan alamat yang tersimpan. Panel Isi otomatis baru memungkinkan Anda memeriksa pemetaan antara kolom formulir, nilai isi otomatis yang diprediksi, dan data tersimpan.

Coba panel baru di halaman demo ini dengan data pengujian:

  1. Di Isi Otomatis Profil, klik salah satu tombol Isi formulir ..., klik Kirim, lalu, di jendela dialog Simpan alamat?, klik Simpan, dan kembali ke halaman dengan formulir.
  2. Buka DevTools dan picu peristiwa isi otomatis: pilih kolom formulir dan pilih alamat dari menu drop-down.

Panel Isi Otomatis akan terbuka secara otomatis dan menampilkan kolom formulir yang terdeteksi, kolom yang disimpulkan oleh isi otomatis, dan nilai yang disimpan.

Panel Isi otomatis.

Untuk mempelajari lebih lanjut, lihat Pelajari Formulir dan Isi Otomatis.

Penyempurnaan throttling jaringan untuk WebRTC

Dengan penambahan parameter terkait paket ke profil pembatasan jaringan kustom, kini Anda dapat membatasi aplikasi WebRTC langsung di DevTools. Hal ini berguna untuk menguji penerapan komunikasi real-time Anda, tanpa perlu menggunakan software pihak ketiga.

Parameter baru tersebut adalah: Packet Loss (persen), Packet Queue Length (jumlah paket), dan tanda Packet Reordering .

Sebelum dan sesudah menambahkan opsi terkait paket baru ke profil pembatasan kustom.

Untuk membatasi koneksi WebRTC, tentukan parameter terkait paket dalam profil kustom di Setelan > Pembatasan dan pilih di panel Jaringan.

Coba parameter baru di halaman demo ini. Pertama, izinkan halaman menggunakan kamera. Kemudian, di panel Network, pilih profil kustom yang Anda konfigurasi, lalu kembali ke halaman, klik Start dan Call.

Masalah Chromium: 41175925.

Dukungan animasi berbasis scroll di panel Animasi

Panel Animations kini memungkinkan Anda memeriksa animasi berbasis scroll.

Coba fitur ini di halaman demo ini. Buka panel Animasi dan muat ulang halaman untuk merekam animasi yang digerakkan oleh scroll.

Sekelompok animasi yang digerakkan scroll yang ditandai dengan ikon mouse.

Grup animasi yang ditandai dengan ikon mouse muncul di Ringkasan. Anda kini dapat memeriksanya. Grup menampilkan nilai piksel, bukan milidetik di Linimasa.

Peningkatan dukungan penyusunan CSS di Elemen > Gaya

Tab Elemen > Gaya meningkatkan dukungan nesting CSS dan kini menampilkan gaya bertingkat dengan indentasi dan dalam tanda kurung. Penyusunan CSS adalah cara untuk mengelompokkan aturan CSS dan membuat kode lebih ringkas dan terstruktur.

Sebelum dan sesudah menambahkan indentasi dan menyertakan gaya bertingkat dalam tanda kurung.

Masalah Chromium: 40166888.

Panel Performa yang Ditingkatkan

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Menyembunyikan fungsi dan turunannya dalam flame chart

Untuk memfilter derau dari flame chart di Performance > Main, Anda kini dapat menyembunyikan fungsi yang tidak relevan dan turunannya. Di diagram flame, klik kanan fungsi dan pilih opsi dari menu konteks.

Sebelum dan sesudah menambahkan menu konteks yang memungkinkan Anda menyembunyikan fungsi dan turunannya.

Fungsi dengan turunan tersembunyi memiliki tombol Drop-down di sebelah kanan. Arahkan kursor ke ikon tersebut untuk melihat jumlah turunan yang disembunyikan dan klik ikon tersebut untuk menampilkannya lagi. Untuk kembali ke status awal diagram flame, klik kanan fungsi, lalu pilih Reset rekaman aktivitas.

Panah dari pemrakarsa yang dipilih ke peristiwa yang diprakarsainya

Sebelumnya, saat Anda memilih peristiwa di jalur Utama, jalur tersebut akan menampilkan panah dari pemrakarsa ke peristiwa yang dipilih. Sekarang, jalur juga menampilkan panah dari peristiwa yang dipilih ke peristiwa yang memulainya, jika ada.

Sebelum dan sesudah menampilkan panah dari peristiwa yang dipilih ke peristiwa yang dimulai dan link bernama, bukan Tampilkan.

Selain itu, semua pemrakarsa kini memiliki kolom Pemrakarsa untuk di tab Ringkasan dan kolom Pemrakarsa untuk dan Diprakarsai oleh memiliki link bernama, bukan Tampilkan.

Masalah Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Panel Lighthouse kini menjalankan Lighthouse 11.6.0. Lihat daftar lengkap perubahan.

Salah satu perubahan penting adalah setelan Aktifkan pengambilan sampel JS yang baru. Setelan ini dinonaktifkan secara default.

Sebelum dan sesudah menambahkan setelan pengambilan sampel JS keikutsertaan.

Mengaktifkan pengambilan sampel JS akan menambahkan stack panggilan JavaScript yang mendetail ke rekaman aktivitas performa, tetapi dapat memperlambat pembuatan laporan.

Rekaman aktivitas performa tanpa (kiri) dan dengan (kanan) pengambilan sampel JS.

Rekaman aktivitas tersedia di menu Tools > View Unthrottled Trace setelah laporan Lighthouse dibuat.

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

Masalah Chromium: 772558.

Tooltip untuk kategori khusus di Memory > Heap snapshots

Snapshot heap di panel Memory memiliki grup objek khusus yang tidak didasarkan pada konstruktor. Saat Anda mengarahkan kursor ke objek tersebut, panel Memori kini menampilkan tooltip dengan deskripsi singkat dan link ke deskripsi yang lebih panjang dalam dokumentasi.

Sebelum dan sesudah menampilkan tooltip deskriptif untuk grup objek khusus.

Masalah Chromium: 41490331.

Aplikasi > Pembaruan penyimpanan

Versi ini menghadirkan beberapa update pada Aplikasi > Penyimpanan.

Byte yang digunakan untuk penyimpanan bersama

Bagian Aplikasi > Penyimpanan > Penyimpanan bersama kini menampilkan jumlah byte yang digunakan oleh asal.

Sebelum dan sesudah menunjukkan jumlah byte yang digunakan untuk penyimpanan bersama.

Penyimpanan bersama memungkinkan Anda memiliki akses tulis penyimpanan lintas situs tanpa batas dengan akses baca yang menjaga privasi.

Masalah Chromium: 324464353.

Web SQL tidak digunakan lagi

Chrome menghentikan penggunaan Web SQL di versi 119 dan menghapus token uji coba penghentian penggunaan di versi ini, sehingga Anda tidak dapat lagi menggunakan Web SQL.

Mengikuti langkah tersebut, DevTools menghapus bagian Web SQL dari panel Application.

Masalah Chromium: 327254049.

Peningkatan panel cakupan

Versi ini menghadirkan beberapa update pada panel Cakupan:

  • Status bar kini menghitung statistik penggunaan untuk URL yang difilter dengan benar. Sebelumnya, alih-alih menjumlahkan data penggunaan anak yang cocok dengan filter, status bar menjumlahkan data induknya.

Sebelum dan sesudah menghitung statistik anak yang cocok dengan benar.

  • Warna kode yang digunakan kini berwarna abu-abu, bukan hijau, untuk meningkatkan visibilitas, terutama bagi penderita gangguan penglihatan warna yang tidak dapat melihat warna hijau.

Sebelum dan setelah mengubah warna kode yang digunakan menjadi abu-abu.

Masalah Chromium: 41494198, 329253687.

Panel Lapisan mungkin akan dihentikan

Panel Lapisan mungkin akan segera dihentikan karena jarang digunakan. Panel kini menampilkan banner peringatan di bagian atas.

Banner peringatan yang mengumumkan potensi penghentian penggunaan di bagian atas panel Layers.

Jangan ragu untuk membagikan pendapat dan kekhawatiran Anda sebelum tim membuat keputusan akhir untuk menghentikan penggunaan panel.

Penghentian penggunaan JavaScript Profiler: Fase empat, akhir

Pada versi ini, panel JS Profiler telah sepenuhnya dihentikan dan tidak dapat diaktifkan kembali.

Untuk membuat profil performa CPU, gunakan panel Performa.

Masalah Chromium: 40262073.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Jaringan:
    • Memperbaiki bug terkait penguraian cookie multiline yang salah (325410304).
    • Memperbaiki pratinjau stack panggilan di kolom Initiator (327665602).
  • Monitor performa: Kotak centang pelacakan kini sama seperti di UI lainnya (1467464).
  • Sumber: Menambahkan penyorotan sintaks untuk dokumen XHTML (327940244).
  • Setelan > Perangkat: Galaxy Fold lama diganti dengan Galaxy Z Fold 5 yang lebih baru (40113439).
  • Performa: Semua hasil penelusuran yang cocok kini ditandai saat menelusuri dengan Ctrl/Cmd+F (1523279).
  • Referensi developer: Kini juga menampilkan resource yang dimuat melalui ekstensi bahasa, seperti Ekstensi Chrome Dukungan DevTools C/C++ (DWARF) (40746829).
  • Performa: Memperbaiki stack panggilan yang terpotong dan tata letaknya yang buruk di tab Ringkasan (325314708).
  • Panel samping: Tombol Tutup kini dapat difokuskan, sehingga panel dapat ditutup menggunakan keyboard.

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