Yang Baru di DevTools (Chrome 116)

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:

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

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

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

Masalah Chromium: 1440626, 1442198, 1453611.

Dukungan pengaturan waktu linear di Elemen > Gaya > Editor Easing

Easing Editor di Elements > 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

Application > Bagian Storage 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, buka Application > Penyimpanan > Indexed DB, lalu jalankan kodenya. DevTools kini menampilkan bucket dan isinya. Pilih bucket untuk melihat metadatanya.

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

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:

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 "Baca header kolom" {i>shortcut<i}.

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 sekarang dapat membuka Sources > Panel titik henti sementara 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 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.

Yang baru di DevTools

Daftar semua hal yang telah dibahas dalam seri Yang baru di DevTools.