Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools (Chrome 121)

Sofia Emelianova

Panel filter yang disederhanakan di panel Jaringan

Panel filter dirancang ulang untuk memungkinkan Anda memfilter permintaan dengan lebih mudah dan merapikan panel Jaringan.

Eksperimen yang sesuai diaktifkan secara default di 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 permintaan dan cookie yang diblokir, serta permintaan pihak ketiga. Kedua menu mendukung multi-pilihan.

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

Sebelum dan sesudah menyederhanakan panel filter di panel Jaringan.

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

Masalah Chromium: 1486431.

Peningkatan elemen

Dukungan `@font-palette-values`

Panel Elemen sekarang mendukung CSS @font-palette-values di-rule. 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 Gaya.

Masalah Chromium: 1501781.

Kasus yang didukung: Properti kustom sebagai penggantian dari properti kustom lainnya

Elemen > Gaya kini me-resolve properti kustom yang merupakan penggantian properti kustom lainnya.

Sebelum dan sesudah me-resolve properti kustom sebagai penggantian dari properti kustom lainnya.

Masalah Chromium: 1499265.

Peningkatan dukungan peta sumber

Setelan Setelan > Eksperimen > kotak_centang 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 mengompilasinya. Eksperimen ini memungkinkan Anda mengevaluasi nama variabel asli secara konsisten di seluruh DevTools, termasuk, tetapi tidak terbatas pada:

Ekspresi di Konsol dan saran pelengkapan otomatis
Ekspresi langsung
Ekspresi smartwatch
Titik henti sementara bersyarat dan logpoint

Untuk detail selengkapnya, lihat RFC yang sesuai.

Masalah Chromium: 1444349.

Peningkatan panel performa

Jalur Interaksi yang Disempurnakan

Jalur Performa > Interaksi mendapatkan whisker 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 yang berisi detail 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 Performance mendapatkan tiga tombol baru untuk pemfilteran lanjutan:

match_case Cocokkan huruf besar/kecil.
regular_expression Ekspresi reguler.
match_word 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 Sumber kini menandai blok kode yang diindentasi dengan garis vertikal untuk memudahkan Anda.

Tanda sebelum dan sesudah menandai blok kode indentasi dengan garis vertikal.

Masalah Chromium: 1479986.

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

Panel Network kini menampilkan tooltip saat Anda mengarahkan kursor ke ikon titik ungu di samping tab Header dan Response permintaan. Tooltip memberi tahu Anda apa yang diganti oleh DevTools.

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

Masalah Chromium: 1469776.

Kini Anda dapat mengetik perintah untuk menambahkan atau menghapus pola pemblokiran permintaan jaringan di Menu Perintah.

Perintah sebelum dan sesudah penambahan perintah baru untuk menambahkan atau menghapus pola pemblokiran jaringan.

Perintah Add mengarahkan Anda ke dialog untuk menentukan pola, dan perintah Remove menghapus semua pola tanpa membuka panel Pemblokiran permintaan jaringan.

Eksperimen pelanggaran CSP dihapus

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

Untuk melihat detail CSP secara sekilas, buka Application > Frames > Kebijakan Keamanan Konten (CSP).

Content Security Policy di panel Application.

Selain itu, panel Issues melaporkan pelanggaran CSP.

Content Security Policy di panel Application.

Mercusuar(mercusuar) 11.3.0

Panel Lighthouse sekarang menjalankan Lighthouse 11.3.0. Lihat daftar lengkap perubahan. Di antara perubahan yang signifikan adalah kemampuan untuk menjalankan laporan di 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 Network > Payload, Anda kini dapat memfokuskan tab pada tombol view source dan view URL-coded, lalu menekan Enter atau Space 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 hierarki navigasi, seperti hierarki di Sumber > Halaman, tombol Enter sekarang meluaskan 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 untuk Mendownload peristiwa rekaman aktivitas mentah dan mencoba mencari tahu apa yang salah (commit).
Pintasan Show Console (Ctrl+` untuk Mac, Ctrl++ untuk Windows dan Linux) kini tidak hanya membuka Console, tetapi juga tertutup 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).
- Dihitung. Perbaikan bug yang mencegah nilai default dirender (1499882).
- Telusuri. Memperbaiki bug yang mencegah penghitungan jumlah kecocokan untuk kueri singkat yang berisi satu atau dua karakter (1416457).
Konsol. Sekarang mengurai ekspresi reguler yang diakhiri dengan karakter escape dengan benar dalam 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 simpan upload dan 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

Kirim saran atau masukan kepada kami melalui crbug.com.
Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.