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 yang mudah untuk mengisi formulir di situs secara otomatis dengan alamat 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 yang berisi 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.

Throttling jaringan yang ditingkatkan untuk WebRTC

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

Parameter barunya adalah: Packet Loss (persentase), Packet Queue Length (jumlah paket), dan tanda Packet Reordering.

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

Untuk membatasi koneksi WebRTC, tentukan parameter terkait paket dalam profil kustom di Setelan > Pembatasan, lalu 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, dan, 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 Animations dan muat ulang halaman untuk merekam animasi yang didorong scroll.

Sekelompok animasi yang didorong scroll dan ditandai dengan ikon mouse.

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

Peningkatan dukungan bertingkat CSS di Elemen > Gaya

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

Sebelum dan sesudah menambahkan indentasi dan menggabungkan gaya bertingkat dalam tanda kurung kurawal.

Masalah Chromium: 40166888.

Panel Performa yang Ditingkatkan

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Menyembunyikan fungsi dan turunannya dalam diagram lingkaran api

Untuk memfilter derau dari diagram api di Performa > Utama, Anda kini dapat menyembunyikan fungsi yang tidak relevan dan turunannya. Di diagram lingkaran api, 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, lalu klik untuk menampilkannya lagi. Untuk kembali ke status awal diagram lingkaran api, klik kanan fungsi, lalu pilih Reset trace.

Panah dari pemicu yang dipilih ke peristiwa yang mereka picu

Sebelumnya, saat Anda memilih peristiwa di jalur Main, jalur akan menampilkan panah dari pemicu ke peristiwa yang dipilih. Sekarang, jalur juga menampilkan panah dari peristiwa yang dipilih ke peristiwa yang dimulainya, jika ada.

Panah sebelum dan sesudah menampilkan panah dari peristiwa yang dipilih ke peristiwa yang dimulai dan link bernama, bukan Pengungkapan.

Selain itu, semua inisiator kini memiliki kolom Initiator for di tab Summary dan kolom Initiator for dan Initiated by memiliki link bernama, bukan Reveal.

Masalah Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

Di antara perubahan yang penting adalah setelan keikutsertaan baru Aktifkan pengambilan sampel JS. Setelan ini dinonaktifkan secara default.

Sebelum dan sesudah menambahkan setelan pengambilan sampel JS keikutsertaan.

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

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

Pelacakan tersedia di bagian Tools menu > 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 Memori > Snapshot heap

Snapshot heap di panel Memory memiliki grup objek khusus yang tidak didasarkan pada konstruktor. Saat Anda mengarahkan kursor ke objek tersebut, panel Memory 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 > Update penyimpanan

Versi ini menghadirkan beberapa update ke Aplikasi > Penyimpanan.

Byte yang digunakan untuk penyimpanan bersama

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

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 sepenuhnya

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.

Sebagai tindak lanjut, DevTools menghapus bagian Web SQL dari panel Application.

Masalah Chromium: 327254049.

Peningkatan panel cakupan

Versi ini menghadirkan beberapa pembaruan pada panel Cakupan:

  • Status bar kini menghitung statistik penggunaan untuk URL yang difilter dengan benar. Sebelumnya, status bar menambahkan data induk, bukan menambahkan data penggunaan turunan yang cocok dengan filter.

Sebelum dan sesudah menghitung statistik turunan yang cocok dengan benar.

  • Warna kode yang digunakan kini berwarna abu-abu, bukan hijau, untuk meningkatkan visibilitas, terutama untuk kekurangan penglihatan warna non-hijau.

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

Masalah Chromium: 41494198, 329253687.

Panel Lapisan mungkin tidak digunakan lagi

Panel Lapisan mungkin 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 masalah Anda sebelum tim membuat keputusan akhir untuk menghentikan penggunaan panel.

Penghentian Profiler JavaScript: Fase empat, final

Dalam versi ini, panel JS Profiler tidak digunakan lagi sepenuhnya dan tidak dapat diaktifkan kembali.

Untuk membuat profil performa CPU, gunakan panel Performa.

Masalah Chromium: 40262073.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Jaringan:
    • Memperbaiki bug dengan penguraian cookie multibaris yang salah (325410304).
    • Memperbaiki pratinjau stack panggilan di kolom Pemrakarsa (327665602).
  • Pemantau performa: Kotak centang jalur kini sama seperti di UI lainnya (1467464).
  • Sumber: Menambahkan sorotan sintaksis 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 melakukan penelusuran dengan Ctrl/Cmd+F (1523279).
  • Referensi developer: Kini juga menampilkan referensi yang dimuat melalui ekstensi bahasa, seperti ekstensi Chrome Dukungan DevTools C/C++ (DWARF) (40746829).
  • Performa: Memperbaiki stack panggilan yang dipangkas 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

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.