Yang Baru di DevTools (Chrome 102)

Jecelyn Yeen

Fitur pratinjau: Panel Insight performa baru

Gunakan panel Insight performa untuk mendapatkan insight yang bisa ditindaklanjuti dan berbasis kasus penggunaan tentang performa situs Anda.

Buka panel dan mulai rekaman baru berdasarkan kasus penggunaan Anda. Misalnya, mari kita ukur pemuatan halaman halaman demo ini.

Setelah perekaman selesai, Anda akan mendapatkan insight performa di panel Insight. Klik setiap item insight (misalnya, Render blocking request, layout shift) untuk memahami masalah dan potensi perbaikan.

Buka dokumentasi panel Insight performa untuk mempelajari lebih lanjut dengan tutorial langkah demi langkah.

Ini adalah fitur pratinjau untuk membantu developer web (terutama non-pakar performa) mengidentifikasi dan memperbaiki potensi masalah performa. Tim kami secara aktif berupaya meningkatkan kualitas fitur ini dan kami menantikan masukan Anda untuk peningkatan lebih lanjut.

Masalah Chromium: 1270700

Pintasan baru untuk mengemulasi tema terang dan gelap

Anda kini dapat mengemulasi tema terang dan gelap dengan lebih cepat (fitur media CSS prefers-color-scheme) dengan pintasan baru di panel Styles.

Sebelumnya, diperlukan lebih banyak langkah untuk mengemulasikan tema di tab Rendering.

Masalah Chromium: 1314299

Keamanan yang ditingkatkan di tab Pratinjau Jaringan

DevTools kini menerapkan Kebijakan Keamanan Konten (CSP) di tab Pratinjau di panel Jaringan.

Misalnya, screenshot pertama menunjukkan halaman yang berisi konten campuran. Halaman dimuat melalui koneksi HTTPS yang aman, tetapi stylesheet dimuat melalui koneksi HTTP yang tidak aman.

Browser memblokir permintaan stylesheet secara default. Namun, saat Anda membuka halaman melalui tab Pratinjau di panel Jaringan, stylesheet tidak diblokir sebelumnya (sehingga latar belakang berubah menjadi merah). Sekarang, URL tersebut diblokir seperti yang Anda harapkan (screenshot kedua).

Masalah Chromium: 833147

Peningkatan pemuatan ulang di titik henti sementara

Debugger kini menghentikan eksekusi skrip saat memuat ulang di titik henti sementara.

Misalnya, skrip sebelumnya mengalami loop tanpa akhir saat menetapkan dan memuat ulang di titik henti sementara ReactDOM dalam demo React ini. Panel Sumber rusak karena loop tanpa akhir.

Terus mengeksekusi JavaScript menyebabkan banyak masalah bagi developer dan dapat membuat perender dalam status rusak. Perubahan ini menyelaraskan perilaku proses debug dengan browser lain seperti Firefox.

Masalah Chromium: 1014415, 1004038, 1112863, 1134899

Update konsol

Menangani error eksekusi skrip di Konsol

Error selama evaluasi skrip di Konsol kini menghasilkan peristiwa error yang tepat yang memicu pengendali window.onerror dan dikirim sebagai peristiwa "error" pada objek jendela.

Masalah Chromium: 1295750

Melakukan ekspresi langsung dengan Enter

Setelah selesai mengetik ekspresi live, Anda dapat mengklik Enter untuk meng-commit-nya. Sebelumnya, menekan Enter akan menambahkan baris baru. Hal ini tidak konsisten dengan bagian lain DevTools.

Untuk menambahkan baris baru di editor ekspresi live, gunakan Shift + Enter.

Masalah Chromium: 1260744

Membatalkan perekaman alur penggunaan di awal

Anda dapat membatalkan perekaman selama awal perekaman alur penggunaan. Sebelumnya, tidak ada opsi untuk membatalkan perekaman.

Masalah Chromium: 1257499

Menampilkan pseudo-elemen sorotan yang diwarisi di panel Gaya

Lihat pseudo-elemen sorotan yang diwarisi (misalnya, ::selection, ::spelling-error, ::grammar-error, dan ::highlight) di panel Gaya. Sebelumnya, aturan ini tidak ditampilkan.

Seperti yang disebutkan dalam spesifikasi, jika beberapa gaya bertentangan, cascade akan menentukan gaya yang menang. Fitur baru ini membantu Anda memahami pewarisan dan prioritas aturan.

Masalah Chromium: 1024156

Sorotan lainnya

Berikut beberapa perbaikan penting dalam rilis ini:

• Panel Properties kini menampilkan properti pengakses dengan nilai secara default. Sebelumnya, opsi ini disembunyikan karena kesalahan. (1309087)
• Panel Gaya kini menampilkan aturan @support yang diganti dengan benar sebagai coretan. Sebelumnya, aturan tidak dicoret. (1298025)
• Memperbaiki logika pemformatan CSS di panel Sumber yang menyebabkan beberapa baris kosong saat mengedit CSS. (1309588)
• Batasi opsi Expand recursively objek di Konsol hingga maksimum 100 sehingga tidak terus berlanjut untuk objek melingkar. (1272450)

[Eksperimental] Menyalin perubahan CSS

Dengan eksperimen ini, panel Gaya akan menandai perubahan CSS Anda dengan warna hijau. Anda dapat mengarahkan kursor ke aturan yang diubah, lalu mengklik tombol salin baru di sampingnya untuk menyalinnya.

Selain itu, Anda dapat menyalin semua perubahan CSS di seluruh deklarasi dengan mengklik kanan pada aturan apa pun, lalu memilih Salin semua perubahan CSS.

Tombol Salin baru juga ditambahkan ke tab Perubahan untuk membantu Anda melacak dan menyalin perubahan CSS dengan mudah.

Masalah Chromium: 1268754

[Eksperimental] Memilih warna di luar browser

Aktifkan eksperimen ini untuk memilih warna di luar browser dengan pemilih warna. Sebelumnya, Anda hanya dapat memilih warna dalam browser.

Di panel Styles, klik pratinjau warna apa pun untuk membuka pemilih warna. Gunakan pipet untuk memilih warna dari mana saja.

Masalah Chromium: 1245191

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.

• Kirim masukan dan permintaan fitur kepada kami di crbug.com.
• Laporkan masalah DevTools menggunakan more_vert Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
• Tweet ke @ChromeDevTools.
• Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.

Yang baru di DevTools

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