Yang baru di DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Panel filter yang disederhanakan di panel Jaringan

Menu filter didesain ulang agar Anda dapat memfilter permintaan dengan lebih mudah dan menyederhanakan panel Jaringan.

Eksperimen terkait diaktifkan secara default dalam versi ini, tetapi akan dikembalikan. Anda dapat melacak progresnya di crbug.com/1523150.

Panel filter baru memiliki dua menu drop-down: satu untuk memilih jenis permintaan dan satu lagi untuk menyembunyikan URL data dan ekstensi atau hanya menampilkan cookie dan permintaan yang diblokir, serta permintaan pihak ketiga. Kedua menu mendukung pilihan multipel.

Untuk segera mengembalikan panel filter lama, nonaktifkan Settings > Experiments > Redesain panel filter di panel Network.

Sebelum dan sesudah menyederhanakan panel filter di panel Jaringan.

Jangan ragu untuk memberikan masukan Anda tentang fitur ini di crbug.com/1500573.

Masalah Chromium: 1486431.

Peningkatan elemen

Dukungan @font-palette-values

Panel Elements kini mendukung aturan@font-palette-values CSS. Dengan properti ini, Anda dapat menyesuaikan nilai default properti font-palette.

Di Gaya, klik nilai properti font-palette dan DevTools akan mengarahkan Anda ke bagian khusus @font-palette-values tempat Anda dapat mengedit nilai kustom.

Bagian @font-palette-values di Styles.

Masalah Chromium: 1501781.

Kasus yang didukung: Properti kustom sebagai penggantian properti kustom lain

Elements > Styles kini menyelesaikan properti kustom yang merupakan penggantian properti kustom lainnya.

Sebelum dan sesudah menyelesaikan properti kustom sebagai penggantian properti kustom lainnya.

Masalah Chromium: 1499265.

Peningkatan dukungan peta sumber

Settings > Experiments > Resolve variable names in expressions using source maps telah diaktifkan secara default.

DevTools menggunakan peta sumber untuk memungkinkan Anda men-debug kode asli di Sumber dan Cakupan meskipun setelah Anda menggabungkan, meminimalkan, atau mengompilasinya. Eksperimen ini memungkinkan Anda mengevaluasi nama variabel asli secara konsisten di seluruh DevTools, termasuk, tetapi tidak terbatas pada:

Untuk mengetahui detail selengkapnya, lihat RFC yang sesuai.

Masalah Chromium: 1444349.

Peningkatan panel performa

Pelacakan Interaksi yang Ditingkatkan

Jalur Performa > Interaksi memiliki garis yang menunjukkan penundaan input dan presentasi pada batas waktu pemrosesan.

Sebelum dan sesudah menambahkan kumis ke jalur Interaksi.

Selain itu, saat mengarahkan kursor ke interaksi, Anda dapat melihat tooltip bermanfaat yang menjelaskan waktu.

Masalah Chromium: 1495751.

Pemfilteran lanjutan di tab Bottom-Up, Call Tree, dan Event Log

Tab Bottom-Up, Call Tree, dan Event Log di panel Performance memiliki tiga tombol baru untuk pemfilteran lanjutan:

  • Cocokkan huruf besar/kecil.
  • Ekspresi reguler.
  • Cocokkan seluruh kata.

Tiga tombol baru untuk pemfilteran lanjutan.

Selain itu, untuk membantu Anda mempertahankan konteks, kini hanya item tingkat teratas yang cocok dengan filter di tab Bottom-Up. Sebelumnya, filter cocok dengan setiap node.

Masalah Chromium: 1496355.

Penanda indentasi di panel Sumber

Editor di panel Sources kini menandai blok kode yang diindentasi dengan garis vertikal untuk memudahkan Anda.

Penanda sebelum dan sesudah blok kode yang diindentasi dengan garis vertikal.

Masalah Chromium: 1479986.

Tooltip yang berguna untuk header dan konten yang diganti di panel Network

Panel Network kini menampilkan tooltip saat Anda mengarahkan kursor ke ikon titik ungu di samping tab Headers dan Response dari sebuah permintaan. Tips alat memberi tahu Anda apa yang diganti oleh DevTools.

Tooltip baru di samping ikon titik ungu di tab Header dan Respons.

Masalah Chromium: 1469776.

Opsi Menu Perintah baru untuk menambahkan dan menghapus pola pemblokiran permintaan

Sekarang Anda dapat mengetik perintah untuk menambahkan atau menghapus pola pemblokiran permintaan jaringan ke Menu Perintah.

Sebelum dan sesudah menambahkan perintah baru untuk menambahkan atau menghapus pola pemblokiran jaringan.

Perintah Tambahkan akan mengarahkan Anda ke dialog untuk menentukan pola dan perintah Hapus akan menghapus semua pola tanpa membuka panel Pemblokiran permintaan jaringan.

Eksperimen pelanggaran CSP dihapus

Tab pelanggaran CSP eksperimental yang diperkenalkan di versi 89 telah dihapus karena dianggap berlebihan.

Untuk melihat detail CSP secara sekilas, buka Aplikasi > Frame > Content Security Policy (CSP).

Kebijakan Keamanan Konten di panel Aplikasi.

Selain itu, panel Masalah melaporkan pelanggaran CSP.

Kebijakan Keamanan Konten di panel Aplikasi.

Lighthouse 11.3.0

Panel Lighthouse kini menjalankan Lighthouse 11.3.0. Lihat daftar lengkap perubahan. Salah satu perubahan penting adalah kemampuan untuk menjalankan laporan di halaman error 404.

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

Masalah Chromium: 772558.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

  • Di Network > Payload, Anda kini dapat memfokuskan tombol lihat sumber dan lihat yang dienkode URL dengan tombol tab, lalu menekan Enter atau Spasi untuk memicu tindakan yang sesuai.
  • Di Konsol, untuk mengurangi kebingungan, link yang mengarah ke skrip yang tidak lagi tersedia untuk Debugger kini berwarna abu-abu dan tidak dapat diklik.
  • Di pohon navigasi, seperti pohon di Sumber > Halaman, tombol Enter kini meluaskan dan menciutkan node dengan turunan.

Masalah Chromium: 1338391, 1500662, 1420362.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa. Jika perekaman gagal, Anda kini memiliki opsi untuk Mendownload peristiwa rekaman aktivitas mentah dan mencoba mencari tahu apa yang salah (commit).
  • Pintasan Tampilkan Konsol (Ctrl+` untuk Mac, Ctrl++ untuk Windows dan Linux) kini tidak hanya membuka Konsol, tetapi juga menutup saat ditekan untuk kedua kalinya.
  • Developer Resources. Bug yang mencegah pelaporan aset CSS dan masalahnya telah diperbaiki (1420362).
  • Elemen:
    • Memperbaiki bug saat memeriksa elemen dalam iframe (1453375).
    • Dihitung. Memperbaiki bug yang mencegah nilai default dirender (1499882).
    • Telusuri. Memperbaiki bug yang mencegah penghitungan jumlah kecocokan untuk kueri pendek yang terdiri dari satu atau dua karakter (1416457).
  • Konsol. Sekarang mengurai ekspresi reguler yang diakhiri dengan karakter yang di-escape dengan benar di kotak Filter (1346936).
  • Setelan > Workspace. Memperbaiki bug yang mencegah penambahan folder yang dikecualikan (1503580).
  • Jaringan > Pratinjau. Sekarang merender gambar dengan URI data: (1381791).
  • Memori. Menambahkan tombol pemuatan dan penyimpanan yang tepat ke panel tindakan (1275407).

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