Yang Baru di DevTools (Chrome 85)

Jecelyn Yeen

Pengeditan gaya untuk framework CSS-in-JS

Panel Gaya kini memiliki dukungan yang lebih baik untuk mengedit gaya yang dibuat dengan CSS Object Model (CSSOM) API. Banyak framework dan library CSS-in-JS menggunakan CSSOM API di balik layar untuk membuat gaya.

Anda juga dapat mengedit gaya yang ditambahkan di JavaScript menggunakan Constructable Stylesheets sekarang. Stylesheet yang Dapat Dibuat 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) sebelumnya tidak dapat diedit. Sekarang ada yang dapat diedit di panel Gaya:

Masalah Chromium #946975

Lighthouse 6 di panel Lighthouse

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

Lighthouse 6.0 memperkenalkan tiga metrik baru ke laporan: Largest Contentful Paint (LCP), Cumulative Layout Shift (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 Vitals lainnya, First Input Delay.

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

Metrik performa baru di Lighthouse 6.0

Masalah Chromium #772558

Penghentian First Meaningful Paint (FMP)

First Meaningful Paint (FMP) tidak digunakan lagi di Lighthouse 6.0. Dimensi ini juga telah dihapus dari panel Performa. Largest Contentful Paint adalah pengganti yang direkomendasikan untuk FMP. Lihat First Meaningful Paint untuk mengetahui penjelasan mengapa metrik ini tidak digunakan lagi.

Masalah Chromium #1096008

Dukungan untuk fitur JavaScript baru

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

  • Penyelesaian otomatis sintaksis Rantai opsional - penyelesaian otomatis properti di Konsol kini mendukung sintaksis rantai opsional, misalnya name?. kini berfungsi selain name. dan name[.
  • Penyorotan sintaksis untuk kolom pribadi - kolom class pribadi kini disorot sintaksisnya dengan benar dan dicetak dengan rapi di panel Sumber.
  • Sorotan sintaksis untuk Operator penggabungan nullish - DevTools kini mencetak dengan benar operator penggabungan nullish di panel Sumber.

Masalah Chromium #1083214, #1073903, #1083797

Peringatan pintasan aplikasi baru di panel Manifes

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

Panel Manifes kini menampilkan peringatan jika:

  • ikon pintasan aplikasi berukuran 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 Pengaturan waktu di panel Jaringan kini menyertakan peristiwa respondWith pekerja layanan. respondWith adalah waktu tepat sebelum pengendali peristiwa fetch pekerja layanan berjalan hingga saat promise respondWith pengendali fetch diselesaikan.

`respondWith` pekerja layanan

Masalah Chromium #1066579

Tampilan panel Computed yang konsisten

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

Masalah Chromium #1073899

Offset bytecode untuk file WebAssembly

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

Offset bytecode

Masalah Chromium #1071432

Menyalin dan memotong baris di Panel Sumber

Saat melakukan salin atau potong tanpa pilihan di editor panel Sumber, DevTools akan menyalin atau memotong konten baris saat ini. Misalnya, dalam video di bawah, kursor berada di akhir baris 1. Setelah menekan pintasan keyboard potong, seluruh baris akan disalin ke papan klip dan dihapus.

Masalah Chromium #800028

Update Setelan Konsol

Membatalkan pengelompokan pesan konsol yang sama

Tombol Kelompokkan serupa di Setelan Konsol kini berlaku untuk pesan duplikat. Sebelumnya, fitur ini hanya berlaku untuk pesan serupa.

Misalnya, sebelumnya, DevTools tidak membatalkan pengelompokan pesan hello meskipun Kelompokkan serupa tidak dicentang. Sekarang, pesan hello tidak dikelompokkan:

Masalah Chromium #1082963

Mempertahankan setelan Hanya konteks yang dipilih

Setelan Khusus 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

Update panel performa

Informasi cache kompilasi JavaScript di panel Performa

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

Informasi cache kompilasi JavaScript

Masalah Chromium #912581

Panel Performa digunakan untuk menampilkan waktu di penggaris berdasarkan waktu perekaman dimulai. Hal ini kini telah berubah untuk rekaman saat pengguna menavigasi, dengan DevTools kini menampilkan waktu penggaris yang relatif terhadap 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 bersifat relatif terhadap awal navigasi, yang berarti peristiwa tersebut cocok dengan waktu yang dilaporkan oleh PerformanceObserver.

Masalah Chromium #974550

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

Panel Sumber memiliki desain baru untuk titik henti sementara, titik henti sementara bersyarat, dan logpoint. Titik henti sementara mendapatkan desain tanda yang diperbarui dengan warna yang lebih cerah dan lebih mudah dilihat. Ikon ditambahkan untuk membedakan titik henti sementara bersyarat dan logpoint.

Titik henti sementara

Masalah Chromium #1041830

Mendownload saluran pratinjau

Sebaiknya gunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

Yang baru di DevTools

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