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 — serangkaian badge di panel multi-pilihan yang rapi.

Untuk merapikan UI, kotak centang sembunyikan, blokir, dan pihak ketiga akan dipindahkan ke daftar drop-down. Daftar ini memiliki angka yang menunjukkan jumlah filter yang dicentang di bagian drop-down.

Sebelum dan sesudah memindahkan filter terkait sembunyikan, blokir, dan pihak ketiga pada menu drop-down.

Untuk mengembalikan 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 pembuatan HAR dengan data sensitif. Panel Jaringan akan menandai tombol Export dengan tanda panah. Klik lama tombol dan 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 Elemen.

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 'text-emphasis-*' properti baru.

Masalah Chromium: 361471205.

Scroll overflow ditandai dengan badge

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

Sebelum dan sesudah menandai scroll yang meluap dengan 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 kosong setelah aturan bertingkat kini tidak menyebabkan Chrome mengurutkan ulang gaya secara tidak terduga dalam kaskade:

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

  background-color: green;
}

Sebelum dan sesudah mengizinkan deklarasi sederhana 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 Chrome UX Report (CrUX) dan luaskan bagian Pertimbangkan kondisi pengujian lokal 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.

Anda kini dapat menavigasi breadcrumb di linimasa rekaman performa: "melompat" bolak-balik di antara breadcrumb, menimpa breadcrumb turunan, dan menghapus beberapa turunan. Sebelumnya, saat Anda memilih breadcrumb induk, turunannya akan hilang.

Peningkatan panel memori

Versi ini menghadirkan sejumlah peningkatan pada panel Memory.

'Elemen terpisah' baru profil Linkedin Anda

Panel Memory mendapatkan jenis profil baru—Detached elements. Kode ini menunjukkan objek yang dipertahankan oleh referensi JavaScript.

Sebelum dan sesudah menambahkan '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

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

Untuk menonaktifkan tema dinamis, hapus Settings > Preferences > Appearance > Match Chrome color scheme dan 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 Pembagian proses mengubah hal ini dengan memungkinkan beberapa tab berbagi proses perender yang sama untuk meningkatkan performa.

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

Infobar 'Tab ini berbagi resource dengan tab lain...'.

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

Lighthouse 12.2.1

Panel Lighthouse sekarang 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 lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Elemen:
  • Konsol: Memperbaiki ampersand yang tidak di-escape dalam string multibaris di perintah cURL (352651673).
  • Memori: Memperbaiki pemilihan default di halaman dengan pekerja layanan, thread utama kini dipilih (40669896).
  • Keamanan: Sorotan skema URL kini diperbarui dengan benar saat tahap keamanan origin berubah (359920086).

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.

Yang baru di DevTools

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