Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 116)

Sofia Emelianova

Perbaikan proses debug pada stylesheet yang tidak ada

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

Hierarki Sumber > Halaman kini hanya menampilkan stylesheet yang berhasil di-deploy dan dimuat untuk meminimalkan kebingungan.
Sumber > 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 sama persis dengan pernyataan yang bermasalah.

Panel Network secara konsisten mengisi kolom Initiator dengan link ke baris persis yang merujuk ke stylesheet yang gagal dimuat.
Panel Issues mencantumkan semua masalah pemuatan stylesheet, termasuk URL rusak, permintaan yang gagal, dan pernyataan @import yang salah tempat.

Panel Issue dengan link ke sumber dan permintaan.

Masalah Chromium: 1440626, 1442198, 1453611.

Dukungan pengaturan waktu linier di Elemen > Gaya > Easing Editor

Easing Editor 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 linear, klik tombol pemilih linear. Untuk menambahkan titik kontrol, klik di mana saja pada garis. Untuk menghapus titik kontrol, klik dua kali titik kontrol tersebut. Anda juga dapat memilih salah satu preset: linear, elastic, bounce, atau emphasized. Tonton videonya untuk melihat cara kerja penyesuaian linier.

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 ada, seperti IndexedDB dan CacheStorage.

Lihat biola ini untuk menguji fitur. Buka DevTools, arahkan ke Application > Storage > Indexed DB, dan jalankan kodenya. 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 penyimpanan cache.

Tampilan metadata terpadu yang baru.

Masalah Chromium: 1448011, 1406017.

Mercusuar 10.3.0

Panel Lighthouse kini menjalankan Lighthouse 10.3.0. Secara khusus, versi ini menambahkan empat audit baru yang menemukan berbagai masalah aksesibilitas dengan header tabel dan teks, nama tombol input, serta 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 berbagai distribusi Linux. Untuk pintasan MacOS, lihat Tindakan pointer alternatif.
Aplikasi pembaca layar:
- Tidak akan mengumumkan label kotak centang dua kali.
- Akan mengumumkan nama header kolom untuk kolom yang dapat diurutkan saat Anda menekan pintasan "Baca header kolom".

Tim DevTools berterima kasih kepada Yanling Wang dan Elorm Coch atas peningkatan kualitas ini.

Masalah Chromium: 1446482, 1414952.

Sorotan lain-lain

Berikut adalah beberapa perbaikan dan peningkatan penting dalam rilis ini:

Panel Network akan 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).
Anda kini dapat membuka 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 di 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 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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.