Yang baru di DevTools, Chrome 130

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan panel jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Jaringan.

Filter jaringan yang didesain ulang

Panel Jaringan mendapatkan filter baru, yang didesain 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 terkait pihak ketiga dipindahkan ke bagian menu 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 ke dalam 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 yang didesain ulang.

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

Masalah Chromium: 361471205.

Overflow scroll ditandai dengan badge

Panel Elemen kini menandai dengan badge 'scroll' baru elemen yang berisi konten yang meluap dan memiliki overflow: scroll atau overflow: auto, sehingga Anda dapat dengan mudah menemukan overflow scroll. 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 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 kosong muncul setelah aturan bertingkat.

Masalah Chromium: 358119261.

Peningkatan panel performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performa.

Rekomendasi dalam metrik live

Metrik live kini dapat memberikan rekomendasi khusus metrik yang membantu Anda mengonfigurasi lingkungan pengembangan sebisa mungkin mendekati 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.

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 menghilang.

Peningkatan panel memori

Versi ini menghadirkan sejumlah peningkatan pada panel Memori.

Profil 'Elemen terpisah' baru

Panel Memory mendapatkan jenis profil baru—Detached elements. 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 dalam snapshot heap, objek JavaScript biasa kini:

  • Dinamakan berdasarkan properti yang dikandungnya, misalnya, {firstProperty, secondProperty, ..., *nthProperty}.
  • Dapat ditelusuri berdasarkan nama ini yang dibuat oleh DevTools.
  • 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 > Sesuaikan 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 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 kini menjalankan Lighthouse 12.2.1.

Update ini memperkenalkan nilai minimum pengabaian < 20 KB untuk saran kompresi resource guna membantu Anda hanya berfokus 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:
    • Beberapa perbaikan untuk mengedit CSS bertingkat (41486635, 361477264, 328263458, 41487826).
    • Memperbaiki penguraian properti kustom yang ditentukan tetapi memiliki nilai kosong sebagai tidak ditentukan (365578428).
  • 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

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.