Yang Baru di DevTools (Chrome 99)

Jecelyn Yeen

Membatasi permintaan WebSocket

Panel Network kini mendukung pembatasan permintaan web socket. Sebelumnya, pembatasan 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 Reporting API baru di panel Aplikasi

Gunakan panel Reporting API baru untuk memantau laporan yang dibuat di halaman Anda dan 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 semua endpoint yang dikonfigurasi di header Reporting-Endpoints.

Panel Reporting API

Masalah Chromium: 1205856

Dukungan menunggu 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 tampilan atau mencoba men-scroll elemen secara otomatis ke area tampilan sebelum memutar ulang langkah. Sebelumnya, pemutaran ulang akan langsung gagal.

Berikut adalah contoh menu di luar layar yang diposisikan di luar area tampilan dan meluncur masuk saat diaktifkan. Alur pengguna adalah mengalihkan menu, lalu mengklik item menu. Sebelumnya, pemutaran ulang akan gagal pada langkah terakhir, karena item menu masih meluncur masuk dan belum terlihat di area tampilan. Sekarang sudah diperbaiki.

Masalah Chromium: 1257499

Gaya, pemformatan, dan pemfilteran konsol yang lebih baik

Menata 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 berwarna yang tepat. 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 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 konten pesannya cocok dengan filter atau judul grup (atau grup induk) cocok dengan filter. Sebelumnya, judul grup konsol akan ditampilkan meskipun ada filter.

Selain itu, jika pesan konsol ditampilkan, grup (atau grup induk) tempat pesan tersebut berada juga akan ditampilkan.

filter grup konsol

Masalah Chromium: 1068788

Peningkatan peta sumber

Melakukan debug ekstensi Chrome dengan file peta sumber

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

Melakukan debug ekstensi Chrome dengan file peta sumber

Masalah Chromium: 212374

Pohon folder sumber yang lebih baik 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 dari menormalisasi URL sumber absolut dalam peta sumber.

Pohon folder sumber yang lebih baik di panel Sumber

Masalah Chromium: 1284737

Menampilkan file sumber pekerja di panel Sources

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

ALT_TEXT_HERE

Masalah Chromium: 1277002

Pembaruan Tema Gelap Otomatis Chrome

UI emulasi Tema Gelap Otomatis kini disederhanakan. Sekarang berupa kotak centang, sebelumnya berupa dropdown.

Selain itu, jika Tema Gelap Otomatis diaktifkan, dropdown Emulasi 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 telah memilih untuk menggunakan tema gelap di Sistem Operasi.

Emulasi Tema Gelap Otomatis

Masalah Chromium: 1243309

Pemilih warna dan panel terpisah yang kompatibel untuk layar sentuh

Anda kini dapat memilih warna, dan mengubah ukuran Drawer di DevTools dengan jari atau stilus di perangkat layar sentuh.

Berikut contoh yang diambil dengan layar sentuh perangkat Google Pixelbook.

Masalah Chromium: 1284245, 1284995

Sorotan lain-lain

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