Yang baru di DevTools (Chrome 122)

Sofia Emelianova
Sofia Emelianova
GitHub

Koleksi resmi ekstensi Perekam sudah aktif

Kumpulan resmi ekstensi Perekam ekspor dan replay kini aktif.

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

Peningkatan jaringan

Versi ini menghadirkan sejumlah peningkatan pada panel Jaringan.

Alasan kegagalan di kolom Status

Kolom Status kini selalu menampilkan alasan kegagalan. Sebelumnya, Anda harus mengaktifkan 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 kini diatur dengan lebih baik.

Sebelum dan sesudah meningkatkan submenu Salin.

Selain itu, opsi Salin sebagai 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 di antara breadcrumb tersebut.

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

Masalah Chromium: 1467739.

Pemicu peristiwa di jalur Utama

Jalur Performa > Utama secara default kini menampilkan panah yang menghubungkan pemicu dan peristiwa berikut yang disebabkannya.

  • Pembatalan validasi gaya atau tata letak -> Hitung ulang gaya atau Tata letak
  • Request Animation Frame -> Animation Frame Fired
  • Minta Callback Tidak Ada Aktivitas -> Aktifkan Callback Tidak Ada Aktivitas
  • Instal Timer -> Timer Diaktifkan
  • Create 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 merupakan 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 VM JavaScript dari menu drop-down yang sesuai di panel tindakan. Fitur serupa tersedia di JavaScript Profiler yang akan segera tidak digunakan lagi.

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

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

Elemen pseudo ::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 fleksibel.

Dukungan align-content sebelum dan sesudah di penampung blok.

Masalah Chromium: 1500511.

Pintasan dan perintah baru di Sumber

Sekarang Anda 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.

Command Menu mendapatkan perintah Reveal active file in navigator sidebar baru yang melakukan hal yang sama seperti opsi yang sesuai 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 posisi "datar" dan dilipat 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 Sesuaikan Chrome di pojok kanan bawah.
  2. Di Tampilan, pilih tema melalui 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 Jaringan, temukan permintaan dengan ikon 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 sebuah 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 dan klik ikon untuk membuka tab Masalah yang berisi 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 Anda membuka Setelan > Eksperimen, kotak Penelusuran kini secara otomatis menjadi fokus.
  • Tombol Hapus input di Jaringan > Filter kini dapat difokuskan.
  • Hierarki file di Sumber > Halaman kini ditampilkan dengan benar dalam mode kontras tinggi.
  • Pembaca layar kini membacakan hal berikut dengan benar:
    • Status kotak centang di Sumber > Titik henti sementara.
    • Informasi posisi dan indeks untuk daftar saran.
    • Hasil tindakan saat menambahkan atau menghapus lokasi di Setelan > Lokasi.
    • Grup aturan pengecualian (umum atau kustom) di Setelan > Daftar Abaikan.

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

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Animasi:
    • Memperbaiki bug dengan rendering popover screenshot di luar batas (1506991).
    • Memperbaiki bug dengan node animasi yang dihapus 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 yang menyebabkan permintaan video Shorts tidak muncul (1509862).
  • Aplikasi > IndexedDB: Mengatur ulang tombol 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", bukan "tong sampah" (1507530).
    • Trace performa kini menyimpan data saat membuka about:blank (1509947).

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas 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.