Yang Baru di DevTools (Chrome 84)

Memperbaiki masalah situs dengan tab Masalah baru

Tab Masalah baru di Panel samping bertujuan untuk membantu mengurangi kelelahan dan kekacauan notifikasi di Konsol. Saat ini, Konsol adalah tempat utama bagi developer situs, library, framework, dan Chrome itu sendiri untuk mencatat pesan, peringatan, dan error. Tab Masalah menampilkan peringatan dari browser secara terstruktur, gabungan, dan dapat ditindaklanjuti, menautkan 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 Konsol, yang akan membantu mengurangi kekacauan Konsol.

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

Bug Chromium: #1068116

Melihat informasi aksesibilitas di tooltip Mode Inspeksi

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

Bug Chromium: #1040025

Pembaruan panel performa

Melihat informasi Total Waktu Pemblokiran (TBT) di footer

Setelah merekam performa pemuatan, panel Performa kini menampilkan informasi Total Waktu Pemblokiran (TBT) di footer. TBT adalah metrik performa pemuatan yang membantu mengukur berapa lama waktu yang dibutuhkan halaman agar dapat digunakan. Pada dasarnya, metrik ini mengukur berapa lama halaman tampak dapat digunakan (karena kontennya telah dirender ke layar), tetapi sebenarnya tidak dapat digunakan karena JavaScript memblokir thread utama dan oleh karena itu 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 Waktu Pemblokiran, jangan gunakan alur kerja Muat Ulang Halaman untuk merekam performa pemuatan halaman. Sebagai gantinya, klik Rekam , muat ulang halaman secara manual, tunggu hingga halaman dimuat, lalu hentikan perekaman. Jika Anda melihat Total Blocking Time: Unavailable, artinya DevTools tidak mendapatkan informasi yang dibutuhkan dari data pembuatan profil internal Chrome.

Bug Chromium: #1054381

Peristiwa Pergeseran Tata Letak di bagian Pengalaman baru

Bagian Pengalaman baru di panel Performa dapat membantu Anda mendeteksi pergeseran 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 Pergeseran Tata Letak untuk melihat detail pergeseran tata letak di tab Ringkasan. Arahkan kursor ke kolom Dipindahkan dari dan Dipindahkan ke untuk memvisualisasikan tempat terjadinya perubahan tata letak.

Terminologi janji yang lebih akurat di Konsol

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

Sekarang Konsol menggunakan istilah fulfilled, yang sesuai dengan spesifikasi Promise:

Bug V8: #6751

Pembaruan panel Gaya

Dukungan untuk kata kunci revert

UI pelengkapan otomatis panel Styles kini mendeteksi kata kunci CSS revert, yang mengembalikan nilai bertingkat properti ke nilai yang akan dimiliki jika tidak ada perubahan pada gaya elemen.

Bug Chromium: #1075437

Pratinjau gambar

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

Bug Chromium: #1040019

Pemilih Warna kini menggunakan notasi warna fungsional yang dipisahkan spasi

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

Saat memilih warna dengan Pemilih Warna atau berganti-ganti antara representasi warna di panel Gaya dengan menahan Shift, lalu mengklik nilai warna, Anda kini akan melihat sintaks argumen yang dipisahkan dengan spasi.

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

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

Sintaksis argumen yang dipisahkan dengan 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 Properties di panel Elements

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

Referensi:

• console.dir()
• $0

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.

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

• Kirimkan masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet di @ChromeDevTools.
• Tinggalkan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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