Halaman ini diterjemahkan oleh Cloud Translation API.

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 ketidakteraturan Konsol. Saat ini, Konsol adalah tempat terpusat bagi developer situs, library, framework, dan Chrome itu sendiri untuk mencatat pesan, peringatan, dan error. Tab Issues menampilkan peringatan dari browser secara terstruktur, agregat, dan dapat ditindaklanjuti, menyediakan link ke resource yang terpengaruh dalam DevTools, dan memberikan panduan tentang cara memperbaiki masalah tersebut. Seiring waktu, semakin banyak peringatan Chrome yang akan ditampilkan di tab Masalah, bukan di Konsol, yang akan membantu mengurangi ketidakrapian Konsol.

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

Tab Masalah.

Bug Chromium: #1068116

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 akan menampilkan informasi Total Blocking Time (TBT) di footer. TBT adalah metrik performa pemuatan yang membantu mengukur berapa lama waktu yang diperlukan halaman untuk dapat digunakan. Pada dasarnya, 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 metrik lab utama untuk memperkirakan Penundaan Input Pertama, yang merupakan salah satu Data Web Inti baru dari Google.

Untuk mendapatkan informasi Total Blocking Time, jangan gunakan alur kerja Reload Page untuk merekam performa pemuatan halaman. Sebagai gantinya, klik Record Record , muat ulang halaman secara manual, tunggu halaman dimuat, lalu berhenti merekam. Jika Anda melihat Total Blocking Time: Unavailable, berarti DevTools tidak mendapatkan informasi yang diperlukan 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 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 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 terminologi lama 'resolved'.

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

Contoh Konsol yang menggunakan terminologi baru 'fulfilled'.

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 berjenjang ke nilai yang seharusnya 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

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 memilih warna dengan Pemilih Warna atau berganti-ganti representasi warna di panel Gaya dengan menahan Shift, lalu mengklik nilai warna, Anda kini 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 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 panel Properties di panel Elemen

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

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 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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.