Yang Baru di DevTools (Chrome 99)

Membatasi permintaan WebSocket

Panel Jaringan sekarang mendukung permintaan soket web throttling. Sebelumnya, throttling jaringan tidak berfungsi pada permintaan soket web.

Buka panel Network, klik permintaan web socket, lalu buka tab Messages untuk mengamati transfer pesan. Pilih 3G Lambat untuk men-throttle 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 Aplikasi, scroll ke bawah ke bagian Layanan latar belakang, lalu pilih panel Reporting API.

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

Bagian Endpoint memberikan 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 Suara

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 di luar layar yang diposisikan di luar area pandang dan bergeser ke dalam saat diaktifkan. Alur pengguna adalah untuk beralih menu, dan mengeklik item menu. Sebelumnya, replay akan gagal pada langkah terakhir, karena item menu masih meluncur masuk dan belum terlihat di area pandang. Ini sudah diperbaiki.

Masalah Chromium: 1257499

Penataan gaya, pemformatan, dan pemfilteran konsol yang lebih baik

Menyesuaikan gaya pesan log dengan kode escape ANSI

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

Sangat umum bagi developer Node.js untuk mewarnai pesan log melalui urutan escape ANSI, sering kali dengan bantuan beberapa library gaya visual seperti chalk, colors, ansi-colors, kleur, dll.

Dengan perubahan ini, sekarang Anda bisa men-debug aplikasi Node.js secara mulus menggunakan DevTools, dengan pesan konsol berwarna yang tepat. Buka demo ini untuk melihatnya sendiri.

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

gaya visual konsol

Masalah Chromium: 1282837, 1282076

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

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

mendukung penentu format di konsol messege

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

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

Peningkatan hierarki folder sumber di panel Sources

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

Peningkatan hierarki folder sumber di panel Sources

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, jika Auto Dark Theme diaktifkan, dropdown Emulate chooses-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 contoh yang diambil dengan layar sentuh perangkat Google Pixelbook.

Masalah Chromium: 1284245, 1284995

Sorotan lain-lain

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