Yang Baru di DevTools (Chrome 116)

Sofia Emelianova
Sofia Emelianova
GitHub

Peningkatan proses debug untuk stylesheet yang tidak ada

DevTools mendapatkan sejumlah peningkatan untuk membantu Anda mengidentifikasi dan men-debug masalah terkait stylesheet yang tidak ada dengan lebih cepat:

  • Hierarki Sumber > Halaman kini hanya menampilkan stylesheet yang berhasil di-deploy dan dimuat untuk meminimalkan kebingungan.
  • Sources > Editor kini menggarisbawahi dan menampilkan tooltip error inline di samping pernyataan @import, url(), dan href yang gagal.

Pernyataan yang digarisbawahi dengan tooltip di panel Sumber.

  • Konsol, selain link ke permintaan yang gagal, kini menyediakan link ke baris yang tepat yang mereferensikan stylesheet yang gagal dimuat.

Konsol menyediakan link ke baris yang tepat dengan pernyataan yang bermasalah.

  • Panel Jaringan secara konsisten mengisi kolom Pemrakarsa dengan link ke baris yang tepat yang mereferensikan stylesheet yang gagal dimuat.

  • Panel Issues mencantumkan semua masalah pemuatan stylesheet, termasuk URL yang rusak, permintaan yang gagal, dan pernyataan @import yang salah tempat.

Panel Masalah dengan link ke sumber dan permintaan.

Masalah Chromium: 1440626, 1442198, 1453611.

Dukungan pengaturan waktu linear di Elemen > Gaya > Editor Pengemudahan

Editor Pengemudahan Editor Easing. di Elemen > Gaya memungkinkan Anda menyesuaikan nilai transition-timing-function dan animation-timing-function dengan sekali klik. Dalam versi ini, Editor Pengemudahan Editor Easing. mendapatkan dukungan fungsi pengaturan waktu linear.

Untuk mengonfigurasi pengaturan waktu linear, klik tombol pemilih linear. Untuk menambahkan titik kontrol, klik di mana saja pada garis. Untuk menghapus titik kontrol, klik dua kali. Anda juga dapat memilih salah satu preset: linear, elastic, bounce, atau emphasized. Tonton video untuk melihat cara kerja penyesuaian linear.

Masalah Chromium: 1421241.

Dukungan bucket penyimpanan dan tampilan metadata

Bagian Aplikasi > Penyimpanan mendapatkan dukungan bucket penyimpanan. Bucket penyimpanan bersifat independen satu sama lain, sehingga Anda dapat menentukan prioritas penghapusan untuk slice data dan memastikan data yang paling berharga tidak dihapus. Setiap bucket penyimpanan dapat menyimpan data yang terkait dengan API penyimpanan yang sudah ada seperti IndexedDB dan CacheStorage.

Lihat fiddle ini untuk menguji fitur. Buka DevTools, buka Application > Storage > Indexed DB, lalu jalankan kode. DevTools kini menampilkan bucket dan kontennya. Pilih bucket untuk melihat metadatanya.

Melihat metadata bucket.

Tampilan metadata terpadu kini juga tersedia untuk bagian penyimpanan lokal, sesi, dan cache.

Tampilan metadata terpadu baru.

Masalah Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Panel Lighthouse kini menjalankan Lighthouse 10.3.0. Yang paling penting, versi ini menambahkan empat audit baru yang mendeteksi berbagai masalah aksesibilitas pada header tabel dan keterangan, nama tombol input, dan ketidakcocokan bahasa. Contoh:

Pemeriksaan header tabel yang lulus.

Lihat juga daftar lengkap perubahan. Untuk mempelajari dasar-dasar penggunaan panel Lighthouse di DevTools, lihat Lighthouse: Mengoptimalkan kecepatan situs.

Masalah Chromium: 772558.

Aksesibilitas: Perintah keyboard dan pembacaan layar yang ditingkatkan

DevTools kini mendukung lebih banyak pintasan dan memperbaiki masalah pada pembaca layar:

  • Anda kini dapat membuka menu konteks dengan pintasan keyboard, misalnya, Shift+F10 di Windows dan banyak distribusi Linux. Untuk pintasan MacOS, lihat Tindakan pointer alternatif.
  • Aplikasi pembaca layar:
    • Tidak akan mengumumkan label kotak centang dua kali secara tidak perlu.
    • Akan mengumumkan nama header kolom untuk kolom yang dapat diurutkan saat Anda menekan pintasan "Baca header kolom".

Tim DevTools mengucapkan terima kasih kepada Yanling Wang dan Elorm Coch atas peningkatan ini.

Masalah Chromium: 1446482, 1414952.

Sorotan lainnya

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Panel Jaringan akan terus merekam aktivitas jaringan bahkan setelah Anda berinteraksi dengan linimasa (1422552).
  • Panel Cakupan kini mengenali apakah ada aktivasi pra-rendering atau navigasi cache kembali/maju dan meminta Anda untuk memuat ulang (1393057).
  • Sekarang Anda dapat menavigasi panel Sources > Breakpoints dengan keyboard: Panah atas dan Panah bawah untuk berpindah dan Spasi untuk memilih (1446150).
  • Memperbaiki upload dan pemfilteran file HAR di panel Jaringan (1450622).
  • Flamechart di panel Performa kini menempatkan celah kecil di antara rekaman aktivitas untuk merendernya dengan lebih baik (1452150).
  • Memperbaiki pemetaan otomatis untuk file yang disematkan dalam peta sumber (1446383).

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 yang telah dibahas dalam seri Yang baru di DevTools.