Yang baru di DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel Jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Network.

Filter jaringan yang didesain ulang

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

Untuk menyederhanakan UI, kotak centang terkait sembunyikan, blokir, dan pihak ketiga dipindahkan ke dalam daftar drop-down. Daftar ini memiliki angka yang memberi tahu Anda berapa banyak filter yang dicentang di menu drop-down.

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

Untuk mengembalikan desain filter lama, hapus Settings > Experiments > Redesain panel filter di panel Network.

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 Network akan menandai tombol Export dengan panah. Klik lama tombol, 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 Elemen.

Nilai pelengkapan otomatis untuk properti text-emphasis-*

Pelengkapan otomatis di tab Gaya kini menyarankan nilai untuk properti CSS berikut:

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

Masalah Chromium: 361471205.

Scroll yang meluap 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 melihat luapan scroll. Seperti badge lainnya, badge ini mencerminkan DOM saat ini dan akan hilang jika konten berhenti meluap karena, misalnya, perubahan ukuran.

Sebelum dan sesudah menandai scroll overflow dengan badge.

Masalah Chromium: 40670442.

Pernyataan kosong setelah aturan bertingkat tidak "bergeser ke atas"

Setelah keputusan CSS Working Group untuk mengizinkan deklarasi kosong muncul setelah aturan bertingkat, tab Gaya kini tidak "bergeser ke atas" saat mengurai deklarasi ini.

Dalam contoh kode berikut, pernyataan kosong setelah aturan bertingkat kini tidak menyebabkan Chrome menyusun ulang gaya dalam susunan secara tidak terduga:

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

  background-color: green;
}

Sebelum dan setelah mengizinkan deklarasi kosong muncul setelah aturan bertingkat.

Masalah Chromium: 358119261.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Rekomendasi di metrik langsung

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

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

Bagian yang diluaskan dengan rekomendasi.

Ikuti rekomendasi untuk memperkirakan pengalaman pengguna Anda.

Anda kini dapat menavigasi jalur navigasi di linimasa rekaman performa: "berpindah" maju mundur antara jalur navigasi, mengganti jalur navigasi turunan, dan menghapus beberapa turunan. Sebelumnya, saat Anda memilih breadcrumb induk, turunannya akan menghilang.

Peningkatan panel memori

Versi ini menghadirkan sejumlah peningkatan pada panel Memory.

Profil 'Elemen terpisah' baru

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

Sebelum dan sesudah menambahkan jenis profil 'Elemen yang tidak terlampir' ke panel Memori.

Masalah Chromium: 350519222.

Peningkatan penamaan objek JS biasa

Untuk mengatur dan mengurangi kekacauan kategori Object dalam cuplikan heap, objek JavaScript biasa kini:

  • Dinamai berdasarkan properti yang ada di dalamnya, misalnya, {firstProperty, secondProperty, ..., *nthProperty}.
  • Dapat ditelusuri berdasarkan nama yang dibuat oleh DevTools ini.
  • Dikelompokkan bersama jika 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 Setelan > Preferensi > Tampilan > Cocokkan skema warna Chrome 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 Berbagi proses mengubah hal ini dengan mengizinkan beberapa tab berbagi proses perender yang sama untuk meningkatkan performa.

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

Info bar 'Tab ini berbagi resource dengan tab lain...'.

Berbagi proses dapat memengaruhi pen-debug-an titik henti sementara dan analisis performa. Untuk mengetahui informasi selengkapnya, lihat Chrome Experiment: Process sharing.

Lighthouse 12.2.1

Panel Lighthouse kini menjalankan Lighthouse 12.2.1.

Update ini memperkenalkan nilai minimum 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 beberapa perbaikan dan peningkatan penting dalam rilis ini:

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

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