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 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. Kini dapat diedit di panel Styles:

Masalah Chromium #946975

Lighthouse 6 di panel Lighthouse

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

Lighthouse 6.0 memperkenalkan tiga metrik baru ke dalam 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 proksi pengukuran lab untuk Core Web Vitals lainnya, First Input Delay.

Formula skor performa juga telah diubah bobotnya agar lebih mencerminkan pengalaman pemuatan pengguna.

Metrik performa baru di Lighthouse 6.0

Masalah Chromium #772558

Penghentian penggunaan First Meaningful Paint (FMP)

First Meaningful Paint (FMP) tidak digunakan lagi di Lighthouse 6.0. Elemen ini juga telah dihapus dari panel Performa. Largest Contentful Paint adalah pengganti FMP yang direkomendasikan. 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 optional chaining - penyelesaian otomatis properti di Konsol kini mendukung sintaksis optional chaining, misalnya name?. kini berfungsi selain name. dan name[.
  • Penyorotan sintaks untuk kolom pribadi - kolom class pribadi kini disorot sintaks dan dicetak dengan rapi di panel Sources.
  • Penyorotan sintaksis untuk Operator penggabungan nullish - DevTools kini mencetak dengan rapi operator penggabungan nullish di panel Sources.

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 respondWithService worker di tab Timing

Tab Timing pada panel Network kini menyertakan peristiwa respondWith pekerja layanan. respondWith adalah waktu tepat sebelum pengendali peristiwa fetch pekerja layanan berjalan hingga waktu saat janji 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 viewport. Sebelumnya, panel Computed akan digabungkan di dalam panel Styles saat lebar area pandang DevTools sempit.

Masalah Chromium #1073899

Offset bytecode untuk file WebAssembly

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

Offset bytecode

Masalah Chromium #1071432

Menyalin dan memotong per baris di Panel Sumber

Saat melakukan penyalinan atau pemotongan 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 pesan serupa di Setelan Konsol kini berlaku untuk pesan duplikat. Sebelumnya, fitur ini hanya berlaku untuk pesan serupa.

Misalnya, sebelumnya, DevTools tidak mengelompokkan pesan hello meskipun Kelompokkan yang serupa dihapus centangnya. Sekarang, hello pesan tidak dikelompokkan:

Masalah Chromium #1082963

Mempertahankan setelan Hanya konteks terpilih

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 terpilih

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 Performance. Sebelumnya, DevTools tidak akan menampilkan apa pun yang terkait dengan caching kode jika caching kode tidak terjadi.

Informasi cache kompilasi JavaScript

Masalah Chromium #912581

Panel Performa sebelumnya menampilkan waktu dalam penggaris berdasarkan waktu dimulainya perekaman. Hal ini kini berubah untuk rekaman saat pengguna melakukan navigasi, dengan DevTools kini menampilkan waktu penggaris yang relatif terhadap navigasi.

Menyelaraskan pengaturan 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 waktu tersebut cocok dengan waktu yang dilaporkan oleh PerformanceObserver.

Masalah Chromium #974550

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

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

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, memungkinkan Anda menguji API platform web canggih, dan membantu Anda menemukan masalah di situs Anda sebelum pengguna Anda menemukannya.

Menghubungi tim Chrome DevTools

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

Yang baru di DevTools

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