Yang Baru di DevTools (Chrome 102)

Jecelyn Yeen

Fitur pratinjau: Panel Insight performa baru

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

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

Setelah perekaman selesai, Anda akan mendapatkan insight performa di panel Insight. Klik setiap item insight (misalnya, Permintaan yang memblokir rendering, pergeseran tata letak) untuk memahami masalah dan potensi perbaikan.

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

Fitur ini adalah fitur pratinjau untuk membantu developer web (terutama yang bukan 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 meniru 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 mengemulasi tema di tab Rendering.

Masalah Chromium: 1314299

Peningkatan keamanan 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). Situs tersebut kini diblokir seperti yang Anda harapkan (screenshot kedua).

Masalah Chromium: 833147

Peningkatan pemuatan ulang pada titik henti sementara

Sekarang debugger menghentikan eksekusi skrip saat memuat ulang di titik henti sementara.

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

Melanjutkan eksekusi JavaScript menyebabkan banyak masalah bagi developer dan dapat 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 handler window.onerror dan dikirim sebagai peristiwa "error" pada objek jendela.

Masalah Chromium: 1295750

Melakukan ekspresi langsung dengan Enter

Setelah selesai mengetik ekspresi langsung, Anda dapat mengklik Enter untuk menerapkannya. Sebelumnya, menekan Enter akan menambahkan baris baru. Hal ini tidak konsisten dengan bagian DevTools lainnya.

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

Masalah Chromium: 1260744

Membatalkan perekaman alur pengguna di awal

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

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 Styles. Sebelumnya, aturan ini tidak ditampilkan.

Seperti yang disebutkan dalam spesifikasi, jika ada beberapa gaya yang bertentangan, gaya yang menang ditentukan oleh susunan gaya. Fitur baru ini membantu Anda memahami pewarisan dan prioritas aturan.

Masalah Chromium: 1024156

Sorotan lain-lain

Berikut beberapa perbaikan penting dalam rilis ini:

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

[Eksperimental] Menyalin perubahan CSS

Dengan eksperimen ini, panel Gaya menandai 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 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 di dalam browser.

Di panel Styles, klik pratinjau warna untuk membuka pemilih warna. Gunakan penyalin warna 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, 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.

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

Yang baru di DevTools

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