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 dengan stylesheet yang hilang lebih cepat:

  • Pohon 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.

  • Console, selain link ke permintaan yang gagal, kini menyediakan link ke baris persis yang mereferensikan stylesheet yang gagal dimuat.

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

  • Panel Network secara konsisten mengisi kolom Initiator dengan link ke baris persis 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 Easing

Editor Easing. Easing Editor di Elements > Styles memungkinkan Anda menyesuaikan nilai transition-timing-function dan animation-timing-function dengan sekali klik. Dalam versi ini, Editor Easing. Easing Editor 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 titik tersebut. Anda juga dapat memilih salah satu preset: linear, elastic, bounce, atau emphasized. Tonton video untuk melihat 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 potongan data dan memastikan data yang paling berharga tidak dihapus. Setiap bucket penyimpanan dapat menyimpan data yang terkait dengan API penyimpanan yang sudah ditetapkan seperti IndexedDB dan CacheStorage.

Lihat fiddle ini untuk menguji fitur tersebut. Buka DevTools, buka Application > Storage > Indexed DB, lalu jalankan kode. DevTools kini menampilkan bucket dan isinya. 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. Terutama, versi ini menambahkan empat audit baru yang mencatat berbagai masalah aksesibilitas dengan header tabel dan keterangan, nama tombol input, dan ketidakcocokan bahasa. Contoh:

Pemeriksaan header tabel 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 penunjuk 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 penyelesaian peningkatan ini.

Masalah Chromium: 1446482, 1414952.

Sorotan lain-lain

Berikut beberapa perbaikan dan peningkatan penting dalam rilis ini:

  • Panel Network terus merekam aktivitas jaringan meskipun setelah Anda berinteraksi dengan linimasa (1422552).
  • Panel Cakupan kini mengenali apakah ada aktivasi pra-render atau navigasi back/forward cache dan meminta Anda untuk memuat ulang (1393057).
  • Sekarang Anda dapat menjelajahi 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 Network (1450622).
  • Flamechart di panel Performance 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).

Download 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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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