Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 116)

Sofia Emelianova

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:

Hierarki Sumber > Halaman sekarang hanya menampilkan stylesheet yang berhasil di-deploy dan dimuat untuk meminimalkan kebingungan.
Sumber > Editor sekarang 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, sekarang menyediakan link ke baris persis yang mereferensikan stylesheet yang gagal dimuat.

Konsol memberikan link ke baris yang tepat yang berisi pernyataan bermasalah.

Panel Network secara konsisten mengisi kolom Inisiator 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 > Easing Editor

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

Untuk mengonfigurasi pengaturan waktu linier, klik tombol pemilih linear. Untuk menambahkan titik kontrol, klik di mana saja pada garis. Untuk menghapus titik kontrol, klik dua kali titik kontrol. 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 > Storage mendapatkan dukungan bucket penyimpanan. Bucket penyimpanan tidak saling bergantung, 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 telah ditetapkan, seperti IndexedDB dan CacheStorage.

Lihat musik biola ini untuk menguji fitur tersebut. Buka DevTools, buka Application > Storage > Indexed DB, dan jalankan kodenya. DevTools sekarang 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 yang baru.

Masalah Chromium: 1448011, 1406017.

Mercusuar(mercusuar) 10.3.0

Panel Lighthouse sekarang menjalankan Lighthouse 10.3.0. Yang paling menarik, versi ini menambahkan empat audit baru yang mencatat berbagai masalah aksesibilitas dengan header tabel dan teks, nama tombol input, dan ketidakcocokan bahasa. Contoh:

Lulus pemeriksaan header tabel.

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 pembaca layar:

Sekarang Anda dapat membuka menu konteks dengan pintasan keyboard, misalnya, Shift+F10 di Windows dan berbagai distribusi Linux. Untuk pintasan MacOS, lihat Tindakan pointer alternatif.
Aplikasi pembaca layar:
- Tidak perlu mengumumkan label kotak centang dua kali.
- Akan mengumumkan nama header kolom untuk kolom yang dapat diurutkan saat Anda menekan pintasan "Read column header".

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

Masalah Chromium: 1446482, 1414952.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

Panel Network terus merekam aktivitas jaringan bahkan 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 membuka panel Sources > Breakpoints dengan keyboard: Panah atas dan Panah bawah untuk memindahkan dan Spasi untuk memilih (1446150).
Memperbaiki upload dan pemfilteran file HAR di panel Network (1450622).
Flamechart di panel Performance kini menempatkan sedikit celah di antara trace untuk merendernya secara lebih baik (1452150).
Memperbaiki pemetaan otomatis untuk file yang disematkan dalam peta sumber (1446383).

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.