Yang baru di DevTools (Chrome 121)

Sofia Emelianova
Sofia Emelianova
GitHub

Panel filter yang disederhanakan di panel Jaringan

Panel filter didesain ulang agar Anda dapat memfilter permintaan dengan lebih mudah dan merapikan panel Jaringan.

Eksperimen yang sesuai diaktifkan secara default pada 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 data dan URL ekstensi atau hanya menampilkan cookie dan permintaan yang diblokir, serta permintaan pihak ketiga. Kedua menu mendukung opsi multi-pilihan.

Untuk segera mengembalikan panel filter lama, nonaktifkan setelan Setelan > Eksperimen > check_box_outline_blank Desain ulang panel filter di panel Jaringan.

Bagian sebelum dan sesudah merampingkan panel filter di panel Jaringan.

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

Masalah Chromium: 1486431.

Peningkatan elemen

Dukungan @font-palette-values

Panel Elemen kini mendukung CSS @font-palette-values pada aturan. Fitur ini memungkinkan Anda 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

Elemen > Gaya kini menyelesaikan properti kustom yang merupakan penggantian properti kustom lainnya.

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

Masalah Chromium: 1499265.

Peningkatan dukungan peta sumber

Setelan Setelan > Eksperimen > check_box Selesaikan nama variabel dalam ekspresi menggunakan peta sumber telah diaktifkan secara default.

DevTools menggunakan peta sumber agar Anda dapat men-debug kode asli di Sumber dan Cakupan bahkan setelah Anda menggabungkan, meminifikasi, atau mengompilasi kode tersebut. Eksperimen ini memungkinkan Anda mengevaluasi nama variabel asli secara konsisten di seluruh DevTools, termasuk tetapi tidak terbatas pada:

Untuk detail selengkapnya, lihat RFC yang sesuai.

Masalah Chromium: 1444349.

Peningkatan panel performa

Pelacakan Interaksi yang Disempurnakan

Kolom Performa > Jalur Interaksi mendapatkan whisker yang menunjukkan penundaan input dan presentasi pada batas waktu pemrosesan.

Sebelum dan sesudah menambahkan whisker ke jalur Interaksi.

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

Masalah Chromium: 1495751.

Pemfilteran lanjutan di tab Bottom-Up, Hierarki Panggilan, dan Log Peristiwa

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

  • match_case Cocokkan huruf besar/kecil.
  • regular_expression Ekspresi reguler.
  • match_word Mencocokkan seluruh kata.

Tiga tombol baru untuk pemfilteran lanjutan.

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

Masalah Chromium: 1496355.

Penanda indentasi di panel Sources

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

Tanda sebelum dan sesudah menandai blok kode yang diindentasi dengan garis vertikal.

Masalah Chromium: 1479986.

Tooltip yang bermanfaat untuk header dan konten yang diganti di panel Jaringan

Panel Jaringan sekarang menampilkan tooltip saat Anda mengarahkan kursor ke ikon titik ungu di samping tab Header dan Respons dari sebuah permintaan. Tooltip akan memberi tahu Anda apa yang diganti oleh DevTools.

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

Masalah Chromium: 1469776.

Opsi Menu Perintah baru untuk menambahkan dan menghapus pola pemblokiran permintaan

Kini Anda dapat mengetikkan perintah untuk menambahkan atau menghapus pola pemblokiran permintaan jaringan ke dalam Menu Perintah.

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

Perintah Add akan mengarahkan Anda ke dialog untuk menentukan pola, dan perintah Remove akan menghapus semua pola tanpa membuka panel Network request blocking.

Eksperimen pelanggaran CSP dihapus

Tab Pelanggaran CSP eksperimental yang diperkenalkan di versi 89 telah dihapus sebagai redundan.

Untuk melihat detail CSP secara sekilas, buka Aplikasi > Bingkai > Kebijakan Keamanan Konten (CSP).

Kebijakan Keamanan Konten di panel Aplikasi.

Selain itu, panel Masalah melaporkan pelanggaran CSP.

Kebijakan Keamanan Konten di panel Aplikasi.

Mercusuar 11.3.0

Panel Lighthouse sekarang menjalankan Lighthouse 11.3.0. Lihat daftar lengkap perubahan. Di antara perubahan penting adalah kemampuan untuk menjalankan laporan pada halaman 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 Jaringan > Payload, kini Anda dapat memfokuskan tab pada tombol lihat sumber dan lihat URL yang dienkode, 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 sekarang berwarna abu-abu dan tidak dapat diklik.
  • Pada struktur navigasi, seperti struktur dalam Sumber > Page, tombol Enter kini memperluas dan menciutkan node dengan turunan.

Masalah Chromium: 1338391, 1500662, 1420362.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Performa. Jika perekaman gagal, Anda kini memiliki opsi Download 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 Console, tetapi juga menutup saat ditekan untuk kedua kalinya.
  • Referensi Developer. Memperbaiki bug yang mencegah pelaporan resource CSS dan masalahnya (1420362).
  • Elemen:
    • Memperbaiki bug saat memeriksa elemen di iframe (1453375).
    • Dikomputasi. Memperbaiki bug yang mencegah nilai default dirender (1499882).
    • Telusuri. Memperbaiki bug yang mencegah penghitungan jumlah kecocokan untuk kueri singkat satu atau dua karakter (1416457).
  • Konsol. Kini mengurai ekspresi reguler yang diakhiri dengan karakter escape dengan benar di kotak Filter (1346936).
  • Setelan > Ruang kerja. Memperbaiki bug yang mencegah penambahan folder yang dikecualikan (1503580).
  • Jaringan > Pratinjau. Sekarang merender gambar dengan URI data: (1381791).
  • Memori. Menambahkan tombol muat upload dan simpan download 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, 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.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.

Yang baru di DevTools

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