Yang baru di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova

Koleksi resmi ekstensi Perekam Suara sudah tersedia

Koleksi resmi ekstensi Perekam ekspor dan replay kini telah diluncurkan.

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

Peningkatan jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Jaringan.

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.

Peningkatan submenu Salin

Submenu Salin permintaan kini diatur dengan lebih baik.

Sebelum dan sesudah meningkatkan submenu Salin.

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

Breadcrumb di Linimasa

Linimasa di bagian atas panel Performa kini memungkinkan Anda menetapkan breadcrumb dan beralih antar-breadcrumb.

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

Masalah Chromium: 1467739.

Inisiator peristiwa di Jalur utama

Kolom Performa > Jalur utama secara default kini menampilkan panah yang menghubungkan inisiator dan peristiwa berikut yang disebabkannya.

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

Untuk melihat tanda panah, temukan peristiwa tersebut di rekaman aktivitas, lalu klik peristiwa tersebut. Sebelumnya, fitur ini bersifat eksperimen.

Panah dari permintaan dan pengaktifan callback tidak ada aktivitas.

Masalah Chromium: 1434596.

Menu pemilih instance JavaScript VM untuk Node.js DevTools

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

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

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 semu ::view-transition kini dapat diedit di Gaya

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

Dukungan pengeditan sebelum dan sesudah untuk elemen semu transisi tampilan.

Untuk 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 semua penampung blok, termasuk table-caption dan table-cell. Sebelumnya, fitur ini hanya berfungsi dengan petak dan flex.

Dukungan align-content sebelum dan sesudah di penampung blok.

Masalah Chromium: 1500511.

Pintasan dan perintah baru di Sumber

Anda kini dapat menekan Cmd (Mac) / Ctrl (Win) + Shift + mengklik nomor baris di Sumber untuk membuat logpoint. Pintasan ini adalah tambahan untuk tombol Cmd (Mac) / Ctrl (Win) + klik yang sudah ada untuk titik henti sementara bersyarat.

Menu Command mendapatkan perintah Perlihatkan file aktif di sidebar navigator baru yang berfungsi sama seperti opsi terkait di menu drop-down Editor.

Perintah baru untuk menampilkan file aktif di sidebar navigator.

Masalah Chromium: 1486933, 1467464.

Dukungan postur untuk perangkat foldable yang diemulasi

Mode perangkat kini memungkinkan Anda menetapkan postur perangkat foldable yang diemulasi: Berkelanjutan atau Terlipat. Postur berkelanjutan mengacu pada postur "datar" dan terlipat membentuk sudut antara bagian layar.

Menu drop-down dengan opsi postur.

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

Masalah Chromium: 1066842.

Tema dinamis

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

  1. Buka tab baru, lalu klik edit Sesuaikan Chrome di pojok kanan bawah.
  2. 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 penggunaan cookie pihak ketiga di panel Jaringan dan Aplikasi

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

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

Sebelum dan sesudah pengambilan cookie pihak ketiga di panel Jaringan.

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

Bagian sebelum dan sesudah menandai cookie pihak ketiga di panel Aplikasi.

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

Selain itu, cookie dalam tabel kini diurutkan menurut 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 membuka setelan Setelan > Eksperimen, kotak Penelusuran kini secara otomatis menjadi fokus.
  • Tombol batalkan Hapus input di Jaringan > Filter kini dapat difokuskan.
  • Hierarki file di Sources > Halaman kini ditampilkan dengan benar dalam mode kontras tinggi.
  • Pembaca layar kini mengucapkan hal berikut dengan benar:
    • Status kotak centang di Sources > Titik henti sementara.
    • Informasi posisi dan indeks untuk daftar saran.
    • Hasil tindakan saat menambahkan atau menghapus lokasi di setelan Setelan > Lokasi.
    • Grup aturan pengecualian (umum atau kustom) di setelan Setelan > Daftar Pengabaian.

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 terkait node animasi yang dihapus yang tidak ditandai sebagai dihapus (1506561).
  • Jaringan:
    • Penggantian header: Memperbaiki bug dengan ikon titik ungu palsu di tab Header (1507856).
    • Pratinjau: Memperbaiki bug dengan decoding ganda yang tidak perlu (1509336).
    • Memperbaiki bug karena permintaan singkat tidak muncul (1509862).
  • Aplikasi > IndexedDB: Tombol yang diatur ulang di panel tindakan agar konsisten dengan panel lain (1393800).
  • Sensor: Memperbaiki bug dengan callback berhasil yang salah lokasi yang tidak tersedia (1486859).
  • Performa:
    • Tombol Kumpulkan sampah kini memiliki ikon yang sesuai, "pel" alih-alih "bin" (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 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.
  • Tulis 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.