Halaman ini diterjemahkan oleh Cloud Translation API.

Yang baru di DevTools (Chrome 122)

Sofia Emelianova

Koleksi resmi ekstensi Perekam Suara ditayangkan

Kumpulan resmi ekstensi Perekam ekspor dan putar ulang kini telah tersedia.

Untuk membuka koleksi langsung dari Perekam, pilih download Ekspor > Dapatkan ekstensi... pada panel tindakan di bagian atas panel Perekam.

Peningkatan jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Network.

Alasan kegagalan di kolom Status

Kolom Status sekarang selalu menampilkan alasan kegagalan. Sebelumnya, Anda harus mengaktifkan check_box Baris permintaan besar atau memilih permintaan di tabel.

Sebelum dan sesudah menampilkan alasan kegagalan di kolom Status.

Masalah Chromium: 1506760.

Submenu Salin yang ditingkatkan

Submenu Salin dari permintaan sekarang tersusun dengan lebih baik.

Sebelum dan sesudah meningkatkan submenu {i>Copy<i}.

Selain itu, opsi Copy as cURL kini menyalin perintah yang benar ke papan klip di Windows.

Masalah Chromium: 1267033, 1276452, 798498.

Peningkatan performa

Versi ini menghadirkan sejumlah peningkatan pada panel Performance.

Breadcrumb di Linimasa

Linimasa di bagian atas panel Performa kini memungkinkan Anda menetapkan breadcrumb dan berpindah di antara breadcrumb.

Untuk menetapkan breadcrumb, pilih rentang di Linimasa, arahkan kursor ke rentang tersebut, lalu klik tombol N md zoom_in. Anda dapat membuat beberapa breadcrumb bertingkat secara berurutan. Untuk beralih di antara tingkat zoom, klik breadcrumb yang sesuai pada rantai di bagian atas Linimasa. Tonton video berikutnya untuk melihat cara kerja breadcrumb.

Masalah Chromium: 1467739.

Inisiator acara di jalur Utama

Jalur Performa > Utama secara default kini menampilkan tanda panah yang menghubungkan inisiator dan peristiwa berikutnya yang disebabkannya.

Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata Letak
Permintaan Bingkai Animasi -> Bingkai Animasi Diaktifkan
Minta Callback Tidak Ada Aktivitas -> Callback Aktifkan Tidak Ada Aktivitas
Instal Timer -> Timer Diaktifkan
Create WebSocket -> Send... dan Receive WebSocket Handshake atau Destroy WebSocket

Untuk melihat panah, cari peristiwa seperti itu di rekaman aktivitas, lalu klik peristiwa tersebut. Sebelumnya, fitur ini merupakan fitur eksperimen.

Panah dari permintaan dan pengaktifan callback tidak ada aktivitas.

Masalah Chromium: 1434596.

Di panel Performance di Node.js DevTools, Anda kini dapat memilih instance VM JavaScript dari menu drop-down yang sesuai di panel tindakan. Fitur serupa tersedia di JavaScript Profiler yang akan segera dihentikan penggunaannya.

Sebelum dan sesudah penambahan menu baru yang memungkinkan Anda memilih instance VM JavaScript.

Masalah Chromium: 1511813.

Peningkatan elemen

Versi ini menghadirkan sejumlah peningkatan pada panel Elements.

Selain dua fitur berikutnya, panel Elemen kini mengingat tab terakhir yang Anda buka, misalnya Computed atau Properties.

Elemen pseudo `::view-transition` kini dapat diedit di Gaya

Anda kini dapat mengedit elemen pseudo-CSS ::view-transition di Gaya menggunakan sheet gaya pemeriksa.

Dukungan pengeditan sebelum dan sesudah elemen pseudo transisi tampilan.

Untuk mengetahui informasi selengkapnya, lihat Transisi yang lancar dan sederhana dengan View Transitions API.

Masalah Chromium: 1511233.

Dukungan properti `align-content` untuk penampung blok

Properti align-content kini berfungsi dengan penampung blok apa pun, termasuk table-caption dan table-cell. Sebelumnya, cara ini hanya berfungsi dengan petak dan flex.

Dukungan penyesuaian konten sebelum dan sesudah dalam penampung blok.

Masalah Chromium: 1500511.

Pintasan dan perintah baru di Sumber

Sekarang Anda dapat menggunakan Cmd (Mac) / Ctrl (Win) + Shift + klik nomor baris di Sources untuk membuat logpoint. Pintasan ini merupakan tambahan untuk Cmd (Mac) / Ctrl (Win) yang sudah ada + klik untuk titik henti sementara bersyarat.

Menu Perintah mendapatkan perintah Reveal active file in navigator sidebar baru yang memiliki fungsi sama seperti opsi yang sesuai di menu drop-down Editor.

Perintah baru untuk menampilkan file yang aktif di sidebar navigator.

Masalah Chromium: 1486933, 1467464.

Dukungan postur untuk perangkat foldable yang diemulasi

Mode perangkat kini memungkinkan Anda menetapkan posisi perangkat foldable yang diemulasi: Continuous atau Folded. Postur kontinu mengacu pada posisi "datar" dan saat dilipat membentuk sudut di antara bagian-bagian layar.

Menu drop-down dengan opsi postur.

Selain itu, daftar Perangkat mendapatkan perangkat foldable emulasi baru: Asus Zenbook Fold.

Masalah Chromium: 1066842.

Tema dinamis

DevTools sekarang otomatis mencocokkan tema warna Chrome. Untuk menetapkan tema:

Buka tab baru dan klik edit Sesuaikan Chrome di sudut kanan bawah.
Di Tampilan, pilih tema melalui wallpaper Ubah tema atau pilih palet warna.

DevTools cocok dengan tema warna yang dipilih di Tampilan.

Masalah Chromium: 1483276.

Peringatan penghentian cookie pihak ketiga di panel Jaringan dan Aplikasi

Baik panel Jaringan maupun Aplikasi kini menandai dan menampilkan peringatan di samping cookie yang terpengaruh oleh pembatasan pihak ketiga dari Perlindungan Pelacakan.

Di Network, temukan permintaan dengan ikon peringatan peringatan, klik permintaan tersebut, lalu buka tab Cookie.

Sebelum dan sesudah mengambil cookie pihak ketiga di panel Jaringan.

Di Application, buka Storage > Cookies, lalu klik domain. Cookie yang ditandai dengan warna kuning tidak disimpan di browser.

Sebelum dan sesudah menandai cookie pihak ketiga di panel Application.

Arahkan kursor ke ikon peringatan untuk melihat tooltip yang menjelaskan masalah yang terjadi, lalu klik ikon untuk membuka tab Masalah yang berisi informasi selengkapnya.

Selain itu, cookie di tabel kini diurutkan berdasarkan nama secara default.

Masalah Chromium: 1506225, 1503961.

Mercusuar 11.4.0

Panel Lighthouse sekarang menjalankan Lighthouse 11.4.0. Lihat daftar lengkap perubahan. Di antara perubahan penting adalah audit baru yang memungkinkan Anda mendeteksi apakah situs Anda masih menggunakan cookie pihak ketiga.

Audit yang mendeteksi cookie pihak ketiga.

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

Masalah Chromium: 772558.

Aksesibilitas

Versi ini memiliki peningkatan aksesibilitas berikut:

Saat Anda membuka setelan Setelan > Eksperimen, kotak Penelusuran kini otomatis menjadi fokus.
Tombol batalkan Hapus input di Jaringan > Filter kini dapat difokuskan.
Hierarki file di Sumber > Halaman sekarang ditampilkan dengan benar dalam mode kontras tinggi.
Pembaca layar kini mengucapkan hal berikut dengan benar:
- Status kotak centang di Sources > Breakpoints.
- Informasi posisi dan indeks untuk daftar saran.
- Hasil tindakan saat menambahkan atau menghapus lokasi di setelan Setelan > Lokasi.
- Grup aturan pengecualian (umum atau khusus) di setelan Setelan > Daftar Abaikan.

Masalah Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

Animasi:
- Memperbaiki bug dengan rendering popover screenshot di luar batas (1506991).
- Memperbaiki bug pada node animasi yang dihapus dan tidak ditandai sebagai dihapus (1506561).
Jaringan:
- Penggantian header: Memperbaiki bug dengan ikon titik ungu palsu di tab Headers (1507856).
- Pratinjau: Memperbaiki bug dengan decoding ganda yang tidak perlu (1509336).
- Memperbaiki bug yang menyebabkan permintaan singkat tidak muncul (1509862).
Application > IndexedDB: Mengatur ulang tombol di panel tindakan agar konsisten dengan panel lain (1393800).
Sensor: Memperbaiki bug terkait callback yang berhasil dan lokasi yang tidak tersedia (1486859).
Performa:
- Tombol Kumpulkan sampah kini memiliki ikon yang sesuai, "pel" bukan "tempat sampah" (1507530).
- Trace performa kini menyimpan data saat membuka about:blank (1509947).

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.