Yang Baru di DevTools (Chrome 99)

Jecelyn Yeen

Membatasi permintaan WebSocket

Panel Jaringan kini mendukung throttling permintaan web socket. Sebelumnya, throttling jaringan tidak berfungsi pada permintaan web socket.

Buka panel Network, klik permintaan web socket, lalu buka tab Messages untuk mengamati transfer pesan. Pilih 3G Lambat untuk membatasi kecepatan.

Membatasi permintaan WebSocket

Masalah Chromium: 423246

Panel baru Reporting API di panel Application

Gunakan panel Reporting API baru untuk memantau laporan yang dibuat di halaman Anda beserta statusnya.

Reporting API dirancang untuk membantu Anda memantau pelanggaran keamanan halaman, panggilan API yang tidak digunakan lagi, dan lainnya.

Buka halaman yang menggunakan Reporting API (misalnya, halaman demo). Di panel Application, scroll ke bawah ke bagian Background services, lalu pilih panel Reporting API.

Bagian Laporan menampilkan daftar laporan yang dibuat di halaman Anda dan statusnya. Klik untuk melihat detail laporan.

Bagian Endpoints memberi Anda ringkasan tentang semua endpoint yang dikonfigurasi di header Reporting-Endpoints.

Panel Reporting API

Masalah Chromium: 1205856

Mendukung tunggu hingga elemen terlihat/dapat diklik di panel Perekam

Saat memutar ulang rekaman alur penggunaan, panel Perekam kini akan menunggu hingga elemen terlihat atau dapat diklik di area pandang atau mencoba men-scroll elemen secara otomatis ke area pandang sebelum memutar ulang langkah. Sebelumnya, replay akan langsung gagal.

Berikut adalah contoh menu off-screen yang diposisikan di luar area pandang dan bergeser masuk saat diaktifkan. Alur penggunaannya adalah mengalihkan menu, lalu mengklik item menu. Sebelumnya, pemutaran ulang akan gagal pada langkah terakhir, karena item menu masih bergeser masuk dan belum terlihat di area pandang. Masalahnya kini telah diperbaiki.

Masalah Chromium: 1257499

Gaya, format, dan pemfilteran konsol yang lebih baik

Memberi gaya pesan log dengan benar menggunakan kode escape ANSI

Sekarang Anda dapat menggunakan urutan escape ANSI untuk menata gaya pesan konsol dengan benar. Sebelumnya, konsol DevTools memiliki dukungan yang sangat terbatas (dan sebagian rusak) untuk urutan escape ANSI.

Developer Node.js biasanya mewarnai pesan log melalui urutan escape ANSI, sering kali dengan bantuan beberapa library gaya seperti chalk, colors, ansi-colors, kleur, dll.

Dengan perubahan ini, Anda kini dapat men-debug aplikasi Node.js dengan lancar menggunakan DevTools, dengan pesan konsol yang diwarnai dengan benar. Buka demo ini untuk melihatnya sendiri.

Untuk mempelajari lebih lanjut cara memformat & menata gaya pesan konsol dengan DevTools, buka dokumentasi memformat dan menata gaya pesan di Konsol.

gaya tampilan konsol

Masalah Chromium: 1282837, 1282076

Mendukung penentu format %s, %d, %i, dan %f dengan benar

Konsol kini melakukan konversi jenis %s, %d, %i, dan %f dengan benar seperti yang ditentukan dalam Standar Konsol. Sebelumnya, hasil percakapan tidak konsisten.

mendukung penentu format dalam pesan konsol

Masalah Chromium: 1277944, 1282076

Filter grup konsol yang lebih intuitif

Saat memfilter pesan konsol, pesan konsol kini ditampilkan jika isi pesannya cocok dengan filter atau judul grup (atau grup ancestor) cocok dengan filter. Sebelumnya, judul grup konsol akan ditampilkan meskipun ada filter.

Selain itu, jika pesan konsol ditampilkan, grup (atau grup ancestor) grup tersebut sekarang juga akan ditampilkan.

filter grup konsol

Masalah Chromium: 1068788

Peningkatan peta sumber

Men-debug ekstensi Chrome dengan file peta sumber

Anda sekarang dapat men-debug ekstensi Chrome dengan file peta sumber. Sebelumnya, DevTools hanya mendukung peta sumber inline untuk proses debug ekstensi Chrome.

Men-debug ekstensi Chrome dengan file peta sumber

Masalah Chromium: 212374

Hierarki folder sumber yang ditingkatkan di panel Sumber

Hierarki folder sumber di panel Sumber kini ditingkatkan dengan struktur dan penamaan folder yang lebih rapi (misalnya “../”, “./”, dll.). Di balik layar, ini adalah hasil normalisasi URL sumber absolut di peta sumber.

Hierarki folder sumber yang ditingkatkan di panel Sumber

Masalah Chromium: 1284737

Menampilkan file sumber pekerja di panel Sumber

File sumber Worker (misalnya, web worker, service worker) dengan SourceURL relatif kini ditampilkan di panel Source. Sebelumnya, file sumber pekerja tidak ditangani dengan benar.

ALT_TEXT_HERE

Masalah Chromium: 1277002

Update Tema Gelap Otomatis Chrome

UI emulasi Tema Gelap Otomatis kini disederhanakan. Tombol tersebut sekarang menjadi kotak centang, dan merupakan dropdown sebelumnya.

Selain itu, saat Tema Gelap Otomatis diaktifkan, dropdown Emulate prefers-color-scheme akan dinonaktifkan dan disetel ke prefers-color-scheme: dark secara otomatis.

Chrome 96 memperkenalkan Uji Coba Origin untuk Tema Gelap Otomatis di Android. Dengan fitur ini, browser menerapkan tema gelap yang dibuat secara otomatis ke situs bertema terang saat pengguna memilih tema gelap di Sistem Operasi.

Emulasi Tema Gelap Otomatis

Masalah Chromium: 1243309

Pemilih warna dan panel terpisah yang mudah digunakan

Kini Anda dapat memilih warna dan mengubah ukuran Panel Samping di DevTools dengan jari atau stilus di perangkat layar sentuh.

Berikut adalah contoh yang diambil dengan layar sentuh perangkat Google Pixelbook.

Masalah Chromium: 1284245, 1284995

Sorotan lainnya

Berikut adalah beberapa perbaikan penting dalam rilis ini:

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