Yang Baru di DevTools (Chrome 89)

Dukungan proses debug untuk pelanggaran Jenis Tepercaya

Titik henti sementara pada pelanggaran Jenis Tepercaya

Anda kini dapat menetapkan titik henti sementara dan menangkap pengecualian pada Pelanggaran Jenis Tepercaya di panel Sumber.

Trusted Types API membantu Anda mencegah kerentanan pembuatan skrip lintas situs berbasis DOM. Pelajari cara menulis, meninjau, dan memelihara aplikasi yang bebas dari kerentanan DOM XSS dengan Jenis Tepercaya di sini.

Di panel Sumber, buka panel sidebar debugger. Luaskan bagian CSP Violation Breakpoints dan aktifkan kotak centang Trusted Type violations untuk menjeda pada pengecualian. Coba sendiri dengan halaman demo ini.

Masalah Chromium: 1142804

Menautkan masalah di panel Sumber ke tab Masalah

Panel Sumber kini menampilkan ikon peringatan di samping baris yang melanggar Jenis Tepercaya. Arahkan kursor ke pengecualian untuk melihat pratinjaunya. Klik untuk meluaskan tab Masalah, yang memberikan detail selengkapnya tentang pengecualian dan panduan tentang cara memperbaikinya.

Masalah Chromium: 1150883

Mengambil screenshot node di luar area pandang

Anda kini dapat mengambil screenshot node untuk node lengkap, termasuk konten di bawah lipatan. Sebelumnya, screenshot terpotong untuk konten yang tidak terlihat di area pandang. Screenshot halaman penuh juga kini akurat.

Di panel Elements, klik kanan pada elemen, lalu pilih Capture node screenshot.

Masalah Chromium: 1003629

Tab Trust Token baru untuk permintaan jaringan

Periksa permintaan jaringan Token Kepercayaan dengan tab Token Kepercayaan baru.

Trust Token adalah API baru untuk membantu memberantas penipuan dan membedakan bot dengan manusia sungguhan, tanpa pelacakan pasif. Pelajari cara memulai Token Kepercayaan.

Dukungan proses debug lebih lanjut akan tersedia di rilis berikutnya.

Masalah Chromium: 1126824

Lighthouse 7 di panel Lighthouse

Panel Lighthouse kini menjalankan Lighthouse 7. Lihat catatan rilis untuk mengetahui daftar lengkap perubahan.

Audit baru di Lighthouse 7:

• Pramuat gambar Largest Contentful Paint (LCP). Mengaudit apakah gambar yang digunakan oleh elemen LCP pramuat untuk meningkatkan waktu LCP Anda.
• Masalah yang dicatat ke panel Issues. Menunjukkan daftar masalah yang belum terselesaikan di panel Issues.
• Progressive Web App (PWA). Kategori PWA berubah cukup signifikan.

• Grup Dapat Diinstal kini sepenuhnya didukung oleh pemeriksaan kemampuan yang mengaktifkan kriteria yang dapat diinstal di Chrome. Ini adalah sinyal yang sama dengan yang terlihat di Panel manifes.

  • Audit "Mendaftarkan pekerja layanan…" dipindahkan ke grup PWA yang Dioptimalkan, dan audit "Menggunakan HTTPS" kini disertakan sebagai bagian dari audit "persyaratan penginstalan" utama.
  • Grup Cepat dan andal dihapus. Karena audit "persyaratan penginstalan" yang diubah menyertakan pemeriksaan kemampuan offline, audit "halaman saat ini dan start_url merespons dengan 200 saat offline" telah dihapus. Audit "Pemuatan halaman cukup cepat di jaringan seluler" juga dihapus.

Masalah Chromium: 772558

Pembaruan panel elemen

Mendukung pemaksaan status :target CSS

Anda kini dapat menggunakan DevTools untuk memaksa dan memeriksa status :target CSS.

Di panel Elements, pilih elemen dan alihkan status elemen. Aktifkan kotak centang :target untuk memaksa dan memeriksa gaya.

Gunakan class semu :target untuk menata gaya elemen jika hash di URL dan ID elemen sama. Lihat demo ini untuk mencobanya sendiri. Fitur DevTools baru ini memungkinkan Anda menguji gaya tersebut tanpa harus mengubah URL secara manual setiap saat.

Masalah Chromium: 1156628

Pintasan baru untuk menduplikasi elemen

Gunakan pintasan Duplikasikan elemen baru untuk meng-clone elemen secara instan.

Klik kanan elemen di panel Elements, pilih Duplicate element. Elemen baru akan dibuat di bawahnya.

Atau, Anda dapat menduplikasi elemen dengan pintasan keyboard:

• Mac: Shift + Option + ⬇️
• Windows/ Linux: Shift + Alt + ⬇️

Masalah Chromium: 1150797, 1150797

Pemilih warna untuk properti CSS kustom

Panel Styles kini menampilkan pemilih warna untuk properti CSS kustom.

Selain itu, Anda dapat menahan tombol Shift dan mengklik pemilih warna untuk beralih melalui representasi RGBA, HSLA, dan Hex dari nilai warna.

Masalah Chromium: 1147016

Pintasan baru untuk menyalin properti CSS

Anda kini dapat menyalin properti CSS dengan lebih cepat menggunakan beberapa pintasan baru.

Di panel Elements, pilih elemen. Kemudian, klik kanan pada class CSS atau properti CSS di panel Styles untuk menyalin nilai.

Opsi salin untuk class CSS:

• Pemilih salin. Menyalin nama pemilih saat ini.
• Salin aturan. Menyalin aturan pemilih saat ini.
• Salin semua deklarasi: Menyalin semua deklarasi berdasarkan aturan saat ini, termasuk properti yang tidak valid dan memiliki awalan.

Opsi salin untuk properti CSS:

• Salin deklarasi. Salin deklarasi baris saat ini.
• Salin properti. Menyalin properti baris saat ini.
• Salin nilai: Menyalin nilai baris saat ini.

Masalah Chromium: 1152391

Pembaruan cookie

Opsi baru untuk menampilkan cookie yang didekode URL

Sekarang Anda dapat memilih untuk melihat nilai cookie yang didekode URL di panel Cookie.

Buka panel Aplikasi, lalu pilih panel Kukis. Pilih cookie apa pun dalam daftar. Aktifkan kotak centang Tampilkan URL yang didekode baru untuk melihat cookie yang didekode.

Masalah Chromium: 997625

Hanya menghapus cookie yang terlihat

Tombol Hapus semua cookie di panel Cookie kini diganti dengan tombol Hapus cookie yang difilter.

Di panel Application > panel Cookies, masukkan teks di kotak teks untuk memfilter cookie. Dalam contoh di sini, kita memfilter daftar berdasarkan "PREF". Klik tombol Hapus cookie yang difilter untuk menghapus cookie yang terlihat. Hapus teks filter dan Anda akan melihat cookie lain tetap ada dalam daftar. Sebelumnya, Anda hanya memiliki opsi untuk menghapus semua cookie.

Masalah Chromium: 978059

Opsi baru untuk menghapus cookie pihak ketiga di panel Penyimpanan

Saat menghapus data situs di panel Penyimpanan, DevTools kini hanya menghapus cookie pihak pertama secara default. Aktifkan termasuk cookie pihak ketiga untuk menghapus cookie pihak ketiga juga.

Masalah Chromium: 1012337

Mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom

Kini Anda dapat mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom.

Buka Setelan > Perangkat, lalu klik Tambahkan perangkat kustom.... Luaskan bagian Petunjuk klien agen pengguna untuk mengedit petunjuk klien.

Client Hints Agen Pengguna adalah alternatif dari string Agen Pengguna yang memungkinkan developer mengakses informasi tentang browser pengguna dengan cara yang menjaga privasi dan ergonomis. Pelajari lebih lanjut User-Agent Client Hints di web.dev/user-agent-client-hints/.

Masalah Chromium: 1073909

Pembaruan panel jaringan

Mempertahankan setelan "record network log"

DevTools kini mempertahankan setelan "Rekaman log jaringan". Sebelumnya, DevTools mereset pilihan pengguna setiap kali halaman dimuat ulang.

Masalah Chromium: 1122580

Melihat koneksi WebTransport di panel Jaringan

Panel jaringan kini menampilkan koneksi WebTransport.

WebTransport adalah API baru yang menawarkan pesan klien-server dua arah dengan latensi rendah. Pelajari lebih lanjut kasus penggunaannya, dan cara memberikan masukan tentang masa depan penerapannya di web.dev/webtransport/.

Masalah Chromium: 1152290

"Online" diganti namanya menjadi "Tidak ada throttling"

Opsi emulasi jaringan "Online" kini diganti namanya menjadi "Tanpa Pembatasan".

Masalah Chromium: 1028078

Opsi salinan baru di panel Konsol, panel Sumber, dan panel Gaya

Pintasan baru untuk menyalin objek di panel Konsol dan Sumber

Sekarang Anda dapat menyalin nilai objek dengan pintasan baru di panel Konsol dan Sumber. Hal ini berguna terutama jika Anda memiliki objek besar (misalnya array panjang) untuk disalin.

Masalah Chromium: 1149859, 1148353

Pintasan baru untuk menyalin nama file di panel Sumber dan panel Gaya

Anda kini dapat menyalin nama file dengan mengklik kanan:

• file di panel Sumber, atau
• nama file di panel Gaya di panel Elemen

Pilih Salin nama file dari menu konteks untuk menyalin nama file.

Masalah Chromium: 1155120

Update tampilan detail frame

Informasi Service Worker baru di tampilan detail Frame

DevTools kini menampilkan pekerja layanan khusus di bawah frame yang membuatnya.

Di panel Application, luaskan frame dengan pekerja layanan, lalu pilih pekerja layanan di bawah hierarki Service Workers untuk melihat detailnya.

Masalah Chromium: 1122507

Mengukur informasi Memori di tampilan Detail frame

Status performance.measureMemory() API kini ditampilkan di bagian Ketersediaan API.

performance.measureMemory() API baru memperkirakan penggunaan memori dari seluruh halaman web. Pelajari cara memantau total penggunaan memori halaman web Anda dengan API baru ini di artikel ini.

Masalah Chromium: 1139899

Memberikan masukan dari tab Masalah

Jika Anda ingin meningkatkan kualitas pesan masalah, buka tab Masalah dari Konsol atau Setelan Lainnya > Alat lainnya > Masalah > untuk membuka tab Masalah. Luaskan pesan masalah, lalu klik Apakah pesan masalah ini bermanfaat bagi Anda?, lalu Anda dapat memberikan masukan di pop-up.

Frame yang terlewat di panel Performa

Saat menganalisis performa pemuatan di panel Performa, bagian Frames kini menandai frame yang dihapus sebagai merah. Arahkan kursor ke sana untuk mengetahui kecepatan frame.

Masalah Chromium: 1075865

Mengemulasikan perangkat foldable dan perangkat dua layar dalam Mode Perangkat

Sekarang Anda dapat mengemulasi perangkat layar ganda dan perangkat foldable di DevTools.

Setelah mengaktifkan Toolbar Perangkat, pilih salah satu perangkat berikut: Surface Duo atau Samsung Galaxy Fold.

Klik ikon span baru untuk beralih antara postur layar tunggal atau dilipat dan layar ganda atau dibentangkan.

Anda juga dapat mengaktifkan Fitur Platform Web Eksperimental untuk mengakses fitur screen-spanning media CSS baru dan JavaScript getWindowSegments API. Ikon eksperimental menampilkan status tanda Fitur Platform Web Eksperimental. Ikon akan ditandai saat tanda diaktifkan. Buka chrome://flags dan alihkan tanda.

Masalah Chromium: 1054281

Fitur eksperimental

Mengotomatiskan pengujian browser dengan Perekam Puppeteer

DevTools kini dapat membuat skrip Puppeteer berdasarkan interaksi Anda dengan browser, sehingga memudahkan Anda untuk mengotomatiskan pengujian browser. Puppeteer adalah library Node.js yang menyediakan API tingkat tinggi untuk mengontrol Chrome atau Chromium melalui Protokol DevTools.

Buka halaman demo ini. Buka panel Sources di DevTools. Pilih tab Perekaman di panel kiri. Tambahkan rekaman baru dan beri nama file (misalnya, test01.js).

Klik tombol Record di bagian bawah untuk mulai merekam interaksi. Coba isi formulir di layar. Perhatikan bahwa perintah Puppeteer ditambahkan ke file sebagaimana mestinya. Klik tombol Record lagi untuk menghentikan perekaman.

Untuk menjalankan skrip, ikuti Panduan memulai di situs resmi Puppeteer.

Perhatikan bahwa ini adalah eksperimen tahap awal. Kami berencana untuk meningkatkan dan memperluas fungsi Perekam seiring waktu.

Masalah Chromium: 1144127

Editor font di panel Gaya

Editor Font baru adalah editor pop-up di panel Gaya untuk properti terkait font guna membantu Anda menemukan tipografi yang sempurna untuk halaman web Anda.

Popover menyediakan UI yang bersih untuk memanipulasi tipografi secara dinamis dengan serangkaian jenis input intuitif.

Masalah Chromium: 1093229

Alat proses debug flexbox CSS

DevTools menambahkan dukungan eksperimental untuk proses debug flexbox sejak rilis terakhir.

DevTools kini menggambar garis panduan untuk membantu Anda memvisualisasikan properti align-items CSS dengan lebih baik. Properti gap CSS juga didukung. Dalam contoh di sini, kita memiliki CSS gap: 12px;. Perhatikan pola garis-garis untuk setiap celah.

Masalah Chromium: 1139949

Tab Pelanggaran CSP baru

Lihat semua pelanggaran Kebijakan Keamanan Konten (CSP) secara sekilas di tab Pelanggaran CSP baru. Tab baru ini adalah eksperimen yang akan mempermudah penggunaan halaman web dengan pelanggaran CSP dan Jenis Tepercaya dalam jumlah besar.

Masalah Chromium: 1137837

Penghitungan kontras warna baru - Advanced Perceptual Contrast Algorithm (APCA)

Advanced Perceptual Contrast Algorithm (APCA) menggantikan rasio kontras panduan AA/AAA di Color Picker.

APCA adalah cara baru untuk menghitung kontras berdasarkan riset modern tentang persepsi warna. Dibandingkan dengan pedoman AA/AAA, APCA lebih bergantung pada konteks. Kontras dihitung berdasarkan properti spasial teks (ketebalan & ukuran font), warna (perbedaan kecerahan yang dirasakan antara teks dan latar belakang), serta konteks (cahaya sekitar, lingkungan, tujuan teks yang diinginkan).

Contoh ini menunjukkan bahwa nilai minimum APCA adalah 38%. Rasio kontras harus memenuhi atau melebihi nilai yang tercantum. Nilai ini dihitung berdasarkan ketebalan dan ukuran font, dengan mengacu pada tabel pencarian APCA ini.

Masalah Chromium: 1121900

Mendownload saluran pratinjau

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

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

Yang baru di DevTools

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