Yang Baru di DevTools (Chrome 85)

Pengeditan gaya untuk framework CSS-in-JS

Panel Styles kini memiliki dukungan yang lebih baik untuk mengedit gaya yang dibuat dengan Objek CSS API Model (CSSOM). Banyak kerangka kerja dan library CSS-in-JS menggunakan API WorkManager di balik layar untuk membangun gaya.

Anda juga dapat mengedit gaya yang ditambahkan di JavaScript menggunakan Constructable Stylesheets sekarang. Dapat Dibangun Stylesheet adalah cara baru untuk membuat dan mendistribusikan gaya yang dapat digunakan kembali saat menggunakan Shadow DOM.

Misalnya, gaya h1 yang ditambahkan dengan CSSStyleSheet (CSSOM API) tidak dapat diedit sebelumnya. Ada yang dapat diedit sekarang di panel Styles:

Masalah Chromium #946975

Lighthouse 6 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 6. Lihat Yang Baru di Lighthouse 6.0 untuk ringkasan semua perubahan utama, atau catatan rilis v6.0.0 untuk mengetahui daftar lengkap semua perubahan.

Lighthouse 6.0 memperkenalkan tiga metrik baru ke laporan: Largest Contentful Paint (LCP), Pergeseran Tata Letak Kumulatif (CLS), dan Total Blocking Time (TBT). LCP dan CLS adalah 2 dari Core Web Vitals, dan TBT adalah proxy pengukuran lab untuk Core Web Vital, Input Pertama Penundaan.

Formula skor performa juga telah diberi bobot ulang agar lebih mencerminkan memuat pengalaman yang lancar bagi developer.

Masalah Chromium #772558

Penghentian penggunaan First Understandingful Paint (FMP)

First Defineful Paint (FMP) tidak digunakan lagi di Lighthouse 6.0. Ini juga telah dihapus dari Panel performa. Largest Contentful Paint adalah pengganti yang direkomendasikan untuk FMP. Lihat Pertama Gambar yang Bermakna untuk penjelasan mengapa warna tersebut tidak digunakan lagi.

Masalah Chromium #1096008

Dukungan untuk fitur JavaScript baru

DevTools kini memiliki dukungan yang lebih baik untuk beberapa fitur bahasa JavaScript terbaru:

• Pelengkapan otomatis sintaksis rantai opsional - pelengkapan otomatis properti di Konsol sekarang mendukung sintaksis berantai opsional, mis. name?. kini berfungsi selain name. dan name[.
• Penyorotan sintaksis untuk kolom pribadi - kolom class pribadi kini sudah benar disorot sintaksis dan sudah tercetak baik di panel {i>Source<i}.
• Penyorotan sintaksis untuk Operator penggabungan Nullish - DevTools kini memiliki hasil cetak yang tepat operator {i>nullish coalescing<i} di panel {i>Source<i}.

Masalah Chromium #1083214, #1073903, #1083797

Peringatan pintasan aplikasi baru di panel Manifest

Pintasan aplikasi membantu pengguna memulai tugas umum atau yang direkomendasikan dengan cepat dalam aplikasi web.

Panel Manifest kini menampilkan peringatan jika:

• ikon pintasan aplikasi lebih kecil dari 96x96 piksel
• ikon pintasan aplikasi dan ikon manifes tidak berbentuk persegi (karena akan diabaikan)

Masalah Chromium #955497

Peristiwa respondWith pekerja layanan di tab Waktu

Tab Waktu pada panel Jaringan sekarang menyertakan peristiwa respondWith pekerja layanan. respondWith adalah waktu tepat sebelum pengendali peristiwa fetch pekerja layanan berjalan ke waktu saat Promise respondWith pengendali fetch telah diselesaikan.

Masalah Chromium #1066579

Tampilan panel Computed yang konsisten

Panel Computed di panel Elements kini ditampilkan secara konsisten sebagai panel di semua area pandang ukuran. Sebelumnya, panel Computed akan bergabung di dalam panel Styles ketika lebar DevTools area pandang sempit.

Masalah Chromium #1073899

Offset Bytecode untuk file WebAssembly

DevTools kini menggunakan offset bytecode untuk menampilkan nomor baris pembongkaran Wasm. Hal ini membuatnya lebih jelas bahwa Anda melihat data biner, dan lebih konsisten dengan bagaimana runtime Wasm merujuk ke lokasi.

Masalah Chromium #1071432

Salin dan potong secara line-wise di Panel Sumber

Saat melakukan penyalinan atau pemotongan tanpa pilihan di editor panel Sources, DevTools akan menyalin atau memotong konten baris saat ini. Misalnya, dalam video di bawah ini, kursornya ada di akhir baris 1. Setelah menekan {i>shortcut <i}pada {i>keyboard<i}, seluruh baris akan disalin ke {i>clipboard<i} dan dihapus.

Masalah Chromium #800028

Update Setelan Konsol

Pisahkan pesan konsol yang sama

Tombol Kelompokkan serupa di Setelan Konsol kini berlaku untuk pesan duplikat. Sebelumnya baru saja diterapkan pada pesan serupa.

Misalnya, sebelumnya, DevTools tidak memisahkan pesan hello meskipun Kelompokkan serupa tidak dicentang. Sekarang, pesan hello dipisahkan:

Masalah Chromium #1082963

Mempertahankan setelan Hanya konteks yang dipilih

Setelan Hanya konteks yang dipilih di Setelan Konsol kini dipertahankan. Sebelumnya setelan direset setiap kali Anda menutup dan membuka kembali DevTools. Perubahan ini membuat perilaku setelan konsisten dengan opsi Setelan Konsol lainnya.

Masalah Chromium #1055875

Pembaruan panel performa

Informasi cache kompilasi JavaScript di panel Performa

Informasi cache kompilasi JavaScript kini selalu ditampilkan di tab Summary Panel performa. Sebelumnya, DevTools tidak akan menampilkan apa pun yang terkait dengan caching kode jika kode {i>caching<i} tidak terjadi.

Masalah Chromium #912581

Penyelarasan waktu navigasi di panel Performa

Panel Performa yang digunakan untuk menampilkan waktu pada penggaris berdasarkan waktu mulai perekaman. Hal ini memiliki sekarang diubah untuk rekaman yang dibuka pengguna, dengan DevTools kini menampilkan relatif waktu penggaris untuk navigasi.

Kami juga telah memperbarui waktu untuk DOMContentLoaded, First Paint, First Contentful Paint, dan Largest Peristiwa Contentful Paint bersifat relatif terhadap awal navigasi, yang berarti peristiwa tersebut sesuai dengan pengaturan waktu yang dilaporkan oleh PerformanceObserver.

Masalah Chromium #974550

Ikon baru untuk titik henti sementara, titik henti sementara bersyarat, dan logpoint

Panel Sources memiliki desain baru untuk titik henti sementara, titik henti sementara bersyarat, dan logpoint. Titik henti sementara mendapatkan desain bendera yang diperbarui dengan warna yang lebih cerah dan lebih bersahabat. Ikon ditambahkan ke membedakan titik henti sementara dan logpoint bersyarat.

Masalah Chromium #1041830

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.

Yang baru di DevTools

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