Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 84)

Kayce Basques

Perbaiki masalah situs dengan tab Masalah baru

Tab Issues baru di Panel Samping bertujuan untuk membantu mengurangi kejenuhan notifikasi dan kekacauan Konsol. Saat ini, Konsol adalah pusat bagi developer situs, library, framework, dan Chrome itu sendiri untuk mencatat pesan, peringatan, serta error. Tab Issues menampilkan peringatan dari browser secara terstruktur, teragregasi, dan dapat ditindaklanjuti, menautkan ke resource yang terpengaruh dalam DevTools, dan memberikan panduan tentang cara memperbaiki masalah tersebut. Seiring waktu, semakin banyak peringatan Chrome yang akan muncul di tab Issues, bukan di Konsol, yang akan membantu mengurangi ketidakrapian Konsol.

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

Tab Masalah.

Bug Chromium: #1068116

tooltip Mode Inspeksi 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

Pembaruan panel performa

Lihat informasi Total Blocking Time (TBT) di footer

Setelah mencatat performa pemuatan, panel Performa kini menampilkan informasi Total Blocking Time (TBT) di footer. TBT adalah metrik performa pemuatan yang membantu mengukur berapa lama halaman yang diperlukan agar dapat digunakan. Metrik 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 Penundaan Input Pertama, yang merupakan salah satu Data Web Inti baru Google.

Untuk mendapatkan informasi Total Blocking Time, jangan gunakan alur kerja Reload Page untuk mencatat performa pemuatan halaman. Sebagai gantinya, klik Rekam Record , 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 Waktu Pemblokiran di footer perekaman panel Performa.

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 Layout Shift untuk melihat detail pergeseran tata letak di tab Summary. Arahkan kursor ke kolom Dipindahkan dari dan Memindahkan 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 terminologi lama 'resolved'.

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

Contoh Konsol yang menggunakan terminologi baru 'terisi'.

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 properti yang menurun ke nilai yang sebelumnya jika tidak ada perubahan yang dilakukan pada gaya visual 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

CSS Color Module Level 4 menetapkan 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 Pemilih Warna atau berganti-ganti representasi warna di panel Styles dengan menahan Shift, lalu mengklik nilai warna, Anda akan melihat sintaksis argumen yang dipisahkan spasi.

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 yang akan datang seperti color() tidak mendukung sintaksis argumen yang dipisahkan koma yang tidak digunakan lagi.

Sintaksis argumen yang dipisahkan spasi telah didukung di sebagian besar browser untuk sementara waktu. Lihat Dapatkah saya menggunakan notasi warna fungsional yang dipisahkan spasi?

Bug Chromium: #1072952

Penghentian panel Properti di panel Elemen

Panel Properties di panel Elements sudah 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. Menu pintasan aplikasi hanya ditampilkan untuk Progressive Web App yang diinstal di desktop atau perangkat seluler pengguna.

Lihat Menyelesaikan berbagai 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.