Yang Baru di DevTools (Chrome 84)

Kayce Basques

Perbaiki masalah situs dengan tab Masalah baru

Tab Masalah baru di Panel Samping bertujuan untuk membantu mengurangi kelelahan notifikasi dan kekacauan Konsol. Saat ini, Konsol adalah tempat utama bagi developer {i>website<i}, perpustakaan, framework, dan Chrome itu sendiri untuk mencatat pesan, peringatan, dan {i>error<i}. Tab Issues menampilkan peringatan dari browser dengan cara yang terstruktur, digabungkan, dan dapat ditindaklanjuti, yang berisi link ke dalam DevTools, dan memberikan panduan tentang cara memperbaiki masalah. Seiring waktu, semakin banyak peringatan Chrome akan ditampilkan di tab Masalah, bukan di Konsol, yang seharusnya membantu mengurangi kekacauan Konsol.

Lihat Temukan dan Perbaiki Masalah di Tab Masalah Chrome DevTools untuk memulai.

Tab Masalah.

Bug Chromium: #1068116

Lihat informasi aksesibilitas di tooltip Mode Pemeriksaan

Toolkit mode Inspeksi kini menunjukkan apakah elemen memiliki nama dan peran yang dapat diakses dan dapat difokuskan keyboard.

Tooltip Mode Pemeriksaan dengan informasi aksesibilitas.

Bug Chromium: #1040025

Pembaruan panel performa

Lihat informasi Waktu Pemblokiran Total (TBT) di footer

Setelah mencatat performa pemuatan, panel Performa kini menampilkan Total Waktu Pemblokiran (TBT) di {i>footer<i}. TBT adalah metrik performa pemuatan yang membantu mengukur berapa lama membutuhkan waktu untuk dapat digunakan di suatu halaman. Pada dasarnya, metrik ini 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 lab utama untuk memperkirakan Penundaan Input Pertama, yang merupakan salah satu Data Web Inti yang baru dari Google.

Untuk mendapatkan informasi Total Blocking Time, jangan gunakan Reload Page Muat ulang halaman untuk mencatat performa pemuatan halaman. Sebagai gantinya, klik Record Rekam, muat ulang halaman secara manual, tunggu halaman dimuat, lalu berhenti mencatat. Jika Anda melihat Total Blocking Time: Unavailable berarti DevTools tidak mendapatkan informasi yang dibutuhkan dari Data pembuatan profil internal Chrome.

Informasi Waktu Pemblokiran Total di footer perekaman panel Performa.

Bug Chromium: #1054381

Peristiwa Layout Shift di bagian Pengalaman baru

Bagian Pengalaman baru pada 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 adalah salah satu Data Web Inti Google yang baru.

Klik peristiwa Layout Shift untuk melihat detail pergeseran tata letak di tab Summary. Pengarahan kursor di atas kolom Dipindahkan dari dan Dipindahkan ke untuk memvisualisasikan tempat terjadinya pergeseran tata letak.

Detail pergeseran tata letak.

Terminologi promise yang lebih akurat di Konsol

Saat mencatat Promise ke dalam log, Konsol digunakan untuk salah mendeskripsikan status Promise sebagai resolved:

Contoh Konsol yang menggunakan opsi &#39;resolved&#39; lama terminologi.

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

Contoh Konsol yang menggunakan fungsi &#39;fulfilled&#39; baru terminologi.

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 turunan properti terhadap nilai yang seharusnya jika tidak ada perubahan penataan gaya elemen.

Menetapkan nilai properti yang akan dikembalikan.

Bug Chromium: #1075437

Pratinjau gambar

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

Mengarahkan kursor ke nilai gambar latar.

Bug Chromium: #1040019

Pemilih Warna kini menggunakan notasi warna fungsional yang dipisahkan spasi

Modul Warna CSS 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 Anda memilih warna dengan Pemilih Warna atau bergantian di antara representasi warna di Panel gaya dengan menahan Shift lalu mengklik nilai warna, Anda sekarang akan melihat elemen yang sintaks argumen.

Menggunakan argumen yang dipisahkan spasi di panel Styles.

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 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 panel Properties di panel Elemen

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

Panel Properties 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. Aplikasi menu pintasan hanya ditampilkan untuk Progressive Web App yang diinstal di desktop pengguna atau perangkat seluler.

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

Pintasan aplikasi di panel Manifest.

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   Lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Beri 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.