Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 85)

Jecelyn Yeen

Pengeditan gaya untuk framework CSS-in-JS

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

Anda juga dapat mengedit gaya yang ditambahkan di JavaScript menggunakan Constructable Stylesheets sekarang. Stylesheet yang dapat dikonstruksi 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 baru Google, dan TBT adalah proxy pengukuran lab untuk Core Web Vital, Penundaan Input Pertama lainnya.

Formula skor performa juga telah dihitung ulang agar lebih mencerminkan pengalaman pemuatan pengguna.

Metrik performa baru di Lighthouse 6.0

Masalah Chromium #772558

Penghentian penggunaan First Artiful Paint (FMP)

First Defineful Paint (FMP) tidak digunakan lagi di Lighthouse 6.0. Metrik ini juga telah dihapus dari panel Performa. Largest Contentful Paint adalah pengganti yang direkomendasikan untuk FMP. Lihat Gambar Pertama yang Bermakna untuk mengetahui 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 kini mendukung sintaksis perantaian opsional, misalnya, name?. kini berfungsi selain name. dan name[.
Penyorotan sintaksis untuk kolom pribadi - kolom class pribadi kini ditandai dengan benar dan dicetak dengan rapi di panel Sumber.
Penyorotan sintaksis untuk Operator penggabungan nullish - DevTools kini mencetak dengan benar operator penggabungan nullish di panel Sources.

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)

Peringatan pintasan aplikasi

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

pekerja layanan `respondWith`

Masalah Chromium #1066579

Tampilan panel Computed yang konsisten

Panel Computed di panel Elements kini ditampilkan secara konsisten sebagai panel di semua ukuran area tampilan. Sebelumnya, panel Computed akan digabungkan di dalam panel Styles jika lebar area tampilan DevTools sempit.

Masalah Chromium #1073899

Offset Bytecode untuk file WebAssembly

DevTools kini menggunakan offset bytecode untuk menampilkan nomor baris pembongkaran Wasm. Hal ini memperjelas bahwa Anda melihat data biner, dan lebih konsisten dengan cara runtime Wasm mereferensikan lokasi.

Offset Bytecode

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, kursor ada di akhir baris 1. Setelah menekan pintasan keyboard potong, seluruh baris akan disalin ke papan klip 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, pengaturan ini hanya berlaku untuk pesan serupa.

Misalnya, sebelumnya, DevTools tidak membatalkan pengelompokan pesan hello meskipun Grup 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.

Hanya konteks yang dipilih

Masalah Chromium #1055875

Pembaruan panel performa

Informasi cache kompilasi JavaScript di panel Performa

Informasi cache kompilasi JavaScript kini selalu ditampilkan di tab Summary pada panel Performa. Sebelumnya, DevTools tidak akan menampilkan apa pun yang terkait dengan caching kode jika caching kode tidak terjadi.

Informasi cache kompilasi JavaScript

Masalah Chromium #912581

Penyelarasan waktu navigasi di panel Performa

Panel Performa yang digunakan untuk menampilkan waktu pada penggaris berdasarkan waktu mulai perekaman. Kini hal ini telah berubah untuk rekaman yang dijalankan pengguna, dengan DevTools kini menampilkan waktu penggaris yang sesuai dengan navigasi.

Menyelaraskan waktu navigasi di panel Performa

Kami juga telah memperbarui waktu untuk peristiwa DOMContentLoaded, First Paint, First Contentful Paint, dan Largest Contentful Paint agar relatif terhadap awal navigasi, yang berarti keduanya cocok dengan 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 untuk membedakan titik henti sementara dan logpoint bersyarat.

Titik henti sementara

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.