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 memberikan cara mudah untuk mengisi formulir secara otomatis pada situs dengan alamat yang tersimpan. Panel Isi Otomatis baru memungkinkan Anda memeriksa pemetaan antara kolom formulir, prediksi nilai isi otomatis, dan data yang tersimpan.

Coba panel baru di halaman demo ini dengan data pengujian:

  1. Di Profil Isi Otomatis, 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 isi otomatis, dan nilai yang tersimpan.

Panel Isi Otomatis.

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

Throttling jaringan yang ditingkatkan untuk WebRTC

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

Parameter baru tersebut adalah: Paket yang Hilang (persen), Panjang Antrean Paket (jumlah paket), dan tanda Pengurutan Ulang Paket di check_box.

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

Untuk membatasi koneksi WebRTC, tentukan parameter terkait paket di profil kustom di setelan Setelan > Throttling, lalu pilih di panel Jaringan.

Coba parameter baru di halaman demo ini. Pertama, izinkan halaman menggunakan kamera. Kemudian, di panel Jaringan, pilih profil kustom yang Anda konfigurasi, lalu, kembali pada halaman, klik Mulai dan Telepon.

Masalah Chromium: 41175925.

Dukungan animasi berbasis scroll di panel Animasi

Kini panel Animasi memungkinkan Anda memeriksa animasi berbasis scroll.

Coba fitur ini di halaman demo ini. Buka panel Animasi lalu muat ulang halaman untuk merekam animasi berbasis scroll.

Sekelompok animasi berbasis scroll yang ditandai dengan ikon mouse.

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

Peningkatan dukungan penyusunan bertingkat CSS di Elements > Gaya

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

Sebelum dan sesudah menambahkan indentasi dan mengapit gaya bertingkat dalam kurung kurawal.

Masalah Chromium: 40166888.

Panel Performa yang Disempurnakan

Versi ini menghadirkan beberapa peningkatan pada panel Performa.

Menyembunyikan fungsi dan turunannya dalam flame chart

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

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

Fungsi dengan turunan tersembunyi memiliki tombol arrow_drop_down Drop-down di sebelah kanan. Arahkan kursor ke atasnya untuk melihat jumlah anak yang disembunyikan, lalu klik untuk menampilkannya lagi. Untuk kembali ke status awal flame chart, klik kanan fungsi, lalu pilih Reset trace.

Panah dari inisiator yang dipilih ke peristiwa yang dimulai

Sebelumnya, saat Anda memilih dan peristiwa di jalur Utama, trek tersebut akan menampilkan panah dari inisiator ke peristiwa yang dipilih. Sekarang, trek juga menampilkan panah dari peristiwa yang dipilih ke peristiwa yang dimulai, jika ada.

Bagian sebelum dan sesudah menampilkan panah dari peristiwa yang dipilih hingga dimulai serta link bernama, bukan Pengungkapan.

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

Masalah Chromium: 325604258, 325024819, 326055289.

Mercusuar 11.6.0

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

Di antara perubahan penting adalah keikutsertaan baru check_box_outline_blank setelan Aktifkan pengambilan sampel JS. 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 trace performa, tetapi dapat memperlambat pembuatan laporan.

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

Rekaman aktivitas ini tersedia di bagian more_vert menu Alat > Lihat Rekaman Aktivitas yang Tidak Di-throttle 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 Memori kini menampilkan tooltip dengan deskripsi singkat dan link ke deskripsi yang lebih panjang dalam dokumentasi.

Bagian sebelum dan sesudah yang menampilkan tooltip deskriptif untuk kelompok objek khusus.

Masalah Chromium: 41490331.

Aplikasi > Update penyimpanan

Versi ini memberikan beberapa update pada Application > Penyimpanan.

Byte yang digunakan untuk penyimpanan bersama

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

Bagian 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 sepenuhnya tidak digunakan lagi

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

Setelahnya, 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, bukannya menjumlahkan data penggunaan turunan yang cocok dengan filter, data justru ditambahkan ke induk mereka.

Sebelum dan sesudah menghitung statistik turunan yang cocok dengan benar.

  • Warna kode yang digunakan sekarang menjadi abu-abu, bukan hijau, untuk meningkatkan visibilitas, terutama untuk buta warna tanpa warna hijau.

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

Masalah Chromium: 41494198, 329253687.

Panel Layers mungkin tidak digunakan lagi

Panel Layers mungkin tidak digunakan lagi dalam waktu dekat karena penggunaan yang rendah. Panel sekarang menampilkan banner peringatan di bagian atas.

Spanduk peringatan yang mengumumkan kemungkinan penghentian penggunaan di bagian atas panel Lapisan.

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

Penghentian penggunaan JavaScript Profiler: Fase empat, terakhir

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

Untuk membuat profil performa CPU, gunakan panel Performa.

Masalah Chromium: 40262073.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Jaringan:
    • Memperbaiki bug terkait penguraian cookie multibaris yang salah (325410304).
    • Perbaikan pratinjau stack panggilan di kolom Initiator (327665602).
  • Pemantauan performa: Kotak centang pelacakan kini sama dengan kotak centang lainnya di UI (1467464).
  • Sumber: Menambahkan penyorotan sintaksis untuk dokumen Xcode (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/Ctrl+Ctrl (1523279).
  • Resource developer: Kini juga menampilkan resource yang dimuat melalui ekstensi bahasa, seperti ekstensi Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Performa: Memperbaiki stack panggilan yang dipangkas dan tata letaknya yang buruk di tab Summary (325314708).
  • Panel samping: Tombol tutup 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, 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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.