Yang baru di DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Jaringan.

Filter jaringan konsep baru

Panel Jaringan mendapatkan filter baru, yang dirancang ulang berdasarkan masukan Anda. Filter khusus jenis tetap sama — sekumpulan badge di panel multi-pilihan yang rapi.

Untuk merapikan UI, kotak centang sembunyikan, blokir, dan terkait pihak ketiga dipindahkan ke bagian menu drop-down. Daftar tersebut berisi angka yang memberitahukan jumlah filter yang diperiksa pada menu drop-down.

Sebelum dan setelah memindahkan filter terkait sembunyikan, blokir, dan pihak ketiga ke dalam menu drop-down.

Untuk memunculkan kembali desain filter lama, hapus Setelan > Eksperimen > Desain ulang panel filter di panel Jaringan.

Beri tahu kami pendapat Anda tentang desain baru ini.

Masalah Chromium: 362672528.

Ekspor HAR kini mengecualikan data sensitif secara default

Untuk mengurangi kemungkinan kebocoran informasi sensitif yang tidak disengaja, log jaringan yang diekspor dalam format HAR tidak akan lagi berisi header Cookie, Set-Cookie, dan Authorization secara default.

Untuk mengekspor log dalam format HAR dengan data sensitif, aktifkan Setelan > Preferensi > Jaringan > Izinkan untuk membuat HAR dengan data sensitif. Panel Jaringan akan menandai tombol Export dengan tanda panah. Klik lama tombol tersebut, lalu pilih Ekspor HAR (dengan data sensitif) dari menu drop-down.

Sebelum dan sesudah menambahkan opsi ekspor dengan dan tanpa data sensitif ke ekspor HAR.

Masalah Chromium: 361717594.

Peningkatan panel elemen

Versi ini menghadirkan sejumlah peningkatan pada panel Elements.

Nilai pelengkapan otomatis untuk properti text-emphasis-*

Autocomplete di tab Gaya kini menyarankan nilai untuk properti CSS berikut:

Sebelum dan sesudah menambahkan opsi pelengkapan otomatis untuk properti 'text-emphasis-*'.

Masalah Chromium: 361471205.

Overflow scroll ditandai dengan badge

Kini panel Elemen menandai elemen yang berisi konten tambahan dan memiliki overflow: scroll atau overflow: auto dengan badge 'scroll' baru, sehingga Anda dapat dengan mudah menemukan scroll overflow. Seperti badge lainnya, badge ini mencerminkan DOM saat ini dan akan menghilang jika konten berhenti meluap karena, misalnya, perubahan ukuran.

Sebelum dan sesudah menandai scroll akan melebihi badge.

Masalah Chromium: 40670442.

Deklarasi kosong setelah aturan bertingkat tidak "bergeser ke atas"

Mengikuti keputusan CSS Working Group untuk mengizinkan deklarasi kosong muncul setelah aturan bertingkat, tab Gaya kini tidak "menggeser ke atas" deklarasi ini selama penguraian.

Dalam contoh kode berikut, deklarasi tanpa awalan www setelah aturan bertingkat sekarang tidak menyebabkan Chrome menyusun ulang gaya secara tidak terduga secara beruntun:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

Sebelum dan sesudah mengizinkan deklarasi kosong muncul setelah aturan bertingkat.

Masalah Chromium: 358119261.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Rekomendasi dalam metrik live

Metrik langsung kini dapat memberikan rekomendasi khusus metrik yang membantu Anda mengonfigurasi lingkungan pengembangan semirip mungkin dengan pengalaman pengguna.

Untuk mendapatkan rekomendasi, siapkan pengambilan data kolom dari Laporan Pengalaman Pengguna Chrome (CrUX) dan luaskan bagian Pertimbangkan kondisi pengujian lokal Anda di setiap kartu metrik (jika ada) dan Pertimbangkan lingkungan pengguna sebenarnya di Setelan lingkungan.

Bagian yang diperluas dengan rekomendasi.

Ikuti rekomendasi untuk memperkirakan pengalaman pengguna Anda.

Kini Anda dapat membuka breadcrumb di linimasa rekaman performa: "lompat" bolak-balik antar-breadcrumb, menimpa breadcrumb turunan, dan menghapus beberapa turunan. Sebelumnya, saat Anda memilih breadcrumb induk, turunannya akan menghilang.

Peningkatan panel memori

Versi ini menghadirkan sejumlah peningkatan pada panel Memori.

Profil 'Elemen terpisah' baru

Panel Memory mendapatkan jenis profil baru—Elemen yang dipisahkan. Elemen ini menampilkan objek yang dipertahankan oleh referensi JavaScript.

Sebelum dan sesudah menambahkan jenis profil 'Elemen terpisah' ke panel Memori.

Masalah Chromium: 350519222.

Peningkatan penamaan objek JS biasa

Untuk mengatur dan merapikan kategori Object di snapshot heap, objek JavaScript biasa kini:

  • Diberi nama berdasarkan properti yang dimilikinya, misalnya, {firstProperty, secondProperty, ..., *nthProperty}.
  • Dapat ditelusuri dengan nama-nama ini, yang dibuat oleh DevTools.
  • Dikelompokkan bersama jika keduanya memiliki properti yang sama.

Sebelum dan sesudah mengatur kategori Objek dalam snapshot heap.

Masalah Chromium: 350519222.

Menonaktifkan tema dinamis

Anda kini dapat menonaktifkan pencocokan otomatis warna DevTools dengan warna tema kustom di Chrome.

Untuk menonaktifkan tema dinamis, hapus Setelan > Preferensi > Tampilan > Cocokkan skema warna Chrome lalu muat ulang DevTools.

Sebelum dan sesudah menonaktifkan tema dinamis.

Masalah Chromium: 328472696.

Eksperimen Chrome: Berbagi proses

Biasanya, saat Anda membuka beberapa tab dari situs yang sama (seperti Google Dokumen), Chrome akan membuat proses perender terpisah untuk setiap tab. Eksperimen Berbagi proses mengubah hal ini dengan memungkinkan beberapa tab berbagi proses perender yang sama untuk meningkatkan performa.

Jika Anda melihat pesan yang menyatakan infobar "Tab ini berbagi resource dengan tab lain..." saat DevTools terbuka, berarti Anda adalah bagian dari grup kecil yang mengaktifkan eksperimen Process sharing.

Bilah info 'Tab ini berbagi sumber daya dengan tab lain...'.

Berbagi proses dapat memengaruhi proses debug titik henti sementara dan analisis performa. Untuk informasi selengkapnya, lihat Eksperimen Chrome: Berbagi proses.

Mercusuar 12.2.1

Panel Lighthouse kini menjalankan Lighthouse 12.2.1.

Update ini memperkenalkan batas pengabaian < 20 KB untuk saran kompresi resource guna membantu Anda berfokus hanya pada penghematan ukuran file yang signifikan. Lihat daftar lengkap perubahan.

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

Masalah Chromium: 772558.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Elemen:
  • Konsol: Memperbaiki ampersand yang tidak di-escape dalam string multi-baris dalam perintah cURL (352651673).
  • Memori: Memperbaiki pilihan default pada halaman yang berisi pekerja layanan, thread utama yang kini dipilih (40669896).
  • Keamanan: Skema URL yang ditandai kini diperbarui dengan benar seiring dengan perubahan tahap keamanan origin (359920086).

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 hal yang telah dibahas dalam seri Yang baru di DevTools.