Yang Baru di DevTools (Chrome 102)

Fitur pratinjau: Panel Insight performa baru

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

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

Setelah perekaman selesai, Anda akan mendapatkan insight performa di panel Insights. Klik setiap item insight (misalnya, Permintaan pemblokiran render, pergeseran tata letak) untuk memahami masalah dan kemungkinan perbaikan.

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

Fitur ini merupakan fitur pratinjau untuk membantu developer web (terutama pakar non-performa) mengidentifikasi dan memperbaiki potensi masalah performa. Tim kami sedang mengupayakan fitur ini secara aktif dan kami mengharapkan 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 lebih cepat (fitur media CSS prefers-color-scheme) dengan pintasan baru di panel Gaya.

Sebelumnya, diperlukan lebih banyak langkah untuk mengemulasi 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 menampilkan halaman yang berisi konten campuran. Halaman akan dimuat melalui koneksi HTTPS aman, tetapi stylesheet akan dimuat melalui koneksi HTTP yang tidak aman.

Browser memblokir permintaan stylesheet secara default. Namun, saat Anda membuka halaman melalui tab Preview di panel Network, stylesheet tidak diblokir sebelumnya (sehingga latar belakangnya berubah menjadi merah). Kini diblokir seperti yang Anda harapkan (screenshot kedua).

Masalah Chromium: 833147

Meningkatkan pemuatan ulang pada titik henti sementara

Debugger kini menghentikan eksekusi skrip saat dimuat ulang pada titik henti sementara.

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

Melanjutkan eksekusi JavaScript akan menyebabkan banyak masalah bagi developer dan mungkin membuat perender dalam keadaan 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

Commit ekspresi langsung dengan Enter

Setelah selesai mengetik ekspresi langsung, Anda dapat mengklik Enter untuk melakukan commit. Sebelumnya, menekan tombol Enter menyebabkan penambahan baris baru. Ini tidak konsisten dengan bagian lain dari DevTools.

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

Masalah Chromium: 1260744

Batalkan pencatatan alur pengguna di awal

Anda dapat membatalkan perekaman selama awal pencatatan alur pengguna. Sebelumnya, opsi untuk membatalkan rekaman tidak tersedia.

Masalah Chromium: 1257499

Menampilkan elemen semu sorotan yang diwarisi di panel Styles

Lihat elemen semu 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, alur akan menentukan gaya pemenang. Fitur baru ini membantu Anda memahami pewarisan dan prioritas aturan.

Masalah Chromium: 1024156

Sorotan lain-lain

Berikut adalah beberapa perbaikan penting dalam rilis ini:

• Sekarang panel Properties menampilkan properti pengakses dengan nilai secara default. Sebelumnya, hal ini tidak seharusnya disembunyikan. (1309087)
• Panel Gaya kini menampilkan dengan benar aturan @support yang diganti sebagai dicoret. Sebelumnya, aturan tidak dicoret. (1298025)
• Memperbaiki logika pemformatan CSS di panel Sources yang menyebabkan beberapa baris kosong saat mengedit CSS. (1309588)
• Batasi opsi Luaskan secara rekursif pada objek di Konsol hingga maksimum 100 agar tidak berlaku selamanya untuk objek lingkaran. (1272450)

[Eksperimental] Salin perubahan CSS

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

Selain itu, Anda dapat menyalin semua perubahan CSS di seluruh deklarasi dengan mengklik kanan aturan mana pun, dan memilih Copy all CSS changes.

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 di 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

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.
• Beri 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.