Yang Baru di DevTools (Chrome 84)

Kayce Basques

Memperbaiki masalah situs dengan tab Masalah baru

Tab Masalah baru di Panel Samping bertujuan untuk membantu mengurangi kejenuhan notifikasi dan kekacauan Konsol. Saat ini, Konsol adalah tempat sentral bagi developer situs, library, framework, dan Chrome itu sendiri untuk mencatat pesan, peringatan, dan error. Tab Issues menampilkan peringatan dari browser dengan cara yang terstruktur, gabungan, dan dapat ditindaklanjuti, link ke resource yang terpengaruh dalam DevTools, dan memberikan panduan tentang cara memperbaiki masalah. Seiring waktu, makin banyak peringatan Chrome yang akan ditampilkan di tab Masalah, bukan di Konsol, yang akan membantu mengurangi kekacauan di Konsol.

Lihat Menemukan dan Memperbaiki Masalah dengan Tab Masalah Chrome DevTools untuk memulai.

Tab Masalah.

Bug Chromium: #1068116

Melihat informasi aksesibilitas di tooltip Mode Inspeksi

Tooltip Mode Pemeriksaan kini menunjukkan apakah elemen memiliki nama dan peran yang dapat diakses dan dapat difokuskan dengan keyboard.

Tooltip Mode Inspeksi dengan informasi aksesibilitas.

Bug Chromium: #1040025

Update panel performa

Melihat informasi Total Blocking Time (TBT) di footer

Setelah merekam performa pemuatan, panel Performa kini menampilkan informasi Total Blocking Time (TBT) di footer. TBT adalah metrik performa pemuatan yang membantu mengukur waktu yang diperlukan halaman untuk dapat digunakan. Pengukuran ini pada dasarnya mengukur berapa lama halaman tampak dapat digunakan (karena kontennya telah dirender ke layar), tetapi tidak benar-benar dapat digunakan karena JavaScript memblokir thread utama sehingga halaman tidak dapat merespons input pengguna. TBT adalah metrik lab utama untuk memperkirakan First Input Delay, yang merupakan salah satu Core Web Vitals baru Google.

Untuk mendapatkan informasi Total Blocking Time, jangan gunakan alur kerja Muat ulang halaman Muat Ulang Halaman untuk merekam performa pemuatan halaman. Sebagai gantinya, klik Record Rekam, muat ulang halaman secara manual, tunggu halaman dimuat, lalu berhenti merekam. Jika Anda melihat Total Blocking Time: Unavailable, artinya DevTools tidak mendapatkan informasi yang diperlukan dari data pembuatan profil internal Chrome.

Informasi Total Blocking Time di footer rekaman panel Performa.

Bug Chromium: #1054381

Peristiwa Layout Shift di bagian Pengalaman baru

Bagian Pengalaman baru di panel Performa dapat membantu Anda mendeteksi perubahan tata letak. Pergeseran Tata Letak Kumulatif (CLS) adalah metrik yang dapat membantu Anda mengukur ketidakstabilan visual yang tidak diinginkan dan merupakan salah satu Data Web Inti baru Google.

Klik peristiwa Perubahan Tata Letak untuk melihat detail perubahan tata letak di tab Ringkasan. Arahkan kursor ke kolom Dipindahkan dari dan Dipindahkan ke untuk memvisualisasikan tempat pergeseran tata letak terjadi.

Detail pergeseran tata letak.

Terminologi promise yang lebih akurat di Konsol

Saat mencatat Promise, Konsol sebelumnya salah menjelaskan status Promise sebagai resolved:

Contoh Konsol yang menggunakan terminologi 'resolved' lama.

Konsol kini menggunakan istilah fulfilled, yang selaras dengan spesifikasi Promise:

Contoh Konsol yang menggunakan terminologi 'fulfilled' baru.

Bug V8: #6751

Pembaruan panel Gaya

Dukungan untuk kata kunci revert

UI pelengkapan otomatis panel Gaya kini mendeteksi kata kunci CSS revert, yang mengembalikan nilai properti yang disusun secara berurutan ke nilai yang akan dimiliki jika tidak ada perubahan yang dilakukan pada gaya elemen.

Menetapkan nilai properti untuk dikembalikan.

Bug Chromium: #1075437

Pratinjau gambar

Arahkan kursor ke nilai background-image di panel Gaya untuk melihat pratinjau gambar dalam tooltip.

Mengarahkan kursor ke nilai background-image.

Bug Chromium: #1040019

Pemilih Warna kini menggunakan notasi warna fungsional yang dipisahkan spasi

CSS Color Module Level 4 menentukan bahwa fungsi warna seperti rgb() harus mendukung argumen yang dipisahkan spasi. Misalnya, rgb(0, 0, 0) setara dengan rgb(0 0 0).

Saat memilih warna dengan Color Picker atau berganti-ganti antara representasi warna di panel Gaya dengan menahan Shift, lalu mengklik nilai warna, Anda sekarang akan melihat sintaksis argumen yang dipisahkan spasi.

Menggunakan argumen yang dipisahkan spasi di panel Gaya.

Anda juga akan melihat sintaksis di panel Computed dan tooltip Mode Inspeksi.

DevTools menggunakan sintaksis baru karena fitur CSS mendatang seperti color() tidak mendukung sintaksis argumen yang dipisahkan koma yang tidak digunakan lagi.

Sintaksis argumen yang dipisahkan spasi telah didukung di sebagian besar browser selama beberapa waktu. Lihat Dapatkah saya menggunakan Notasi warna fungsional yang dipisahkan spasi?

Bug Chromium: #1072952

Penghentian penggunaan panel Properti di panel Elemen

Panel Properties di panel Elements tidak digunakan lagi. Jalankan console.dir($0) di Konsol.

Panel Properti yang tidak digunakan lagi.

Referensi:

Dukungan pintasan aplikasi di panel Manifes

Pintasan aplikasi membantu pengguna memulai tugas umum atau yang direkomendasikan dengan cepat dalam aplikasi web. Menu pintasan aplikasi hanya ditampilkan untuk Progressive Web App yang diinstal di desktop atau perangkat seluler pengguna.

Lihat Menyelesaikan tugas dengan cepat menggunakan pintasan aplikasi untuk mempelajari lebih lanjut.

Pintasan aplikasi di panel Manifes.

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.