Yang Baru di DevTools (Chrome 89)

Dukungan proses debug untuk pelanggaran Jenis Tepercaya

Titik henti sementara pada pelanggaran Jenis Tepercaya

Anda kini dapat menyetel titik henti sementara dan menangkap pengecualian untuk Pelanggaran Jenis Tepercaya di Sources .

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

Di panel Sources, buka panel sidebar debugger. Luaskan Pelanggaran CSP Titik henti sementara dan aktifkan kotak centang Pelanggaran Jenis Tepercaya untuk menjeda di setiap pengecualian. Cobalah sendiri melalui halaman demo ini.

Masalah Chromium: 1142804

Tautkan masalah di panel Sumber ke tab Masalah

Panel Sumber sekarang menampilkan ikon peringatan di samping baris yang melanggar Jenis Tepercaya. Arahkan ke untuk melihat pratinjau pengecualian. Klik laporan tersebut untuk meluaskan tab Issues. Tab ini memberikan detail selengkapnya tentang pengecualian dan panduan tentang cara memperbaikinya.

Masalah Chromium: 1150883

Ambil screenshot node di luar area tampilan

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

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

Masalah Chromium: 1003629

Tab Trust Tokens baru untuk permintaan jaringan

Periksa permintaan jaringan Trust Token dengan tab Trust Tokens yang baru.

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

Dukungan proses debug lebih lanjut akan tersedia dalam rilis berikutnya.

Masalah Chromium: 1126824

Lighthouse 7 di panel Lighthouse

Panel Lighthouse sekarang menjalankan Lighthouse 7. Lihat catatan rilis untuk daftar perubahan.

Audit baru di Lighthouse 7:

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

• Grup Dapat diinstal kini sepenuhnya didukung oleh pemeriksaan kemampuan yang mengaktifkan dan dapat diinstal. Sinyal ini adalah sinyal yang sama yang terlihat di panel Manifest.

  • Bagian "Mendaftarkan service worker..." audit dipindahkan ke grup Dioptimalkan PWA, dan grup "Penggunaan HTTPS" audit kini disertakan sebagai bagian dari "persyaratan kemampuan penginstalan" utama audit.
  • Grup Cepat dan andal dihapus. Karena "persyaratan kemampuan penginstalan" yang diperbarui audit mencakup pemeriksaan kemampuan offline, "halaman saat ini dan start_url merespons dengan 200 jika offline" audit telah dihapus. "Pemuatan halaman cukup cepat di jaringan seluler" audit telah dihapus berikutnya

Masalah Chromium: 772558

Update panel elemen

Dukungan memaksakan status :target CSS

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

Di panel Elemen, pilih elemen, lalu alihkan status elemen. Mengaktifkan :target untuk memaksa dan memeriksa gaya.

Gunakan class semu :target untuk menata gaya elemen saat hash di URL dan ID elemen sama saja. Tonton demo ini untuk mencobanya sendiri. Fitur DevTools baru ini memungkinkan Anda menguji gaya seperti itu tanpa harus mengubah URL secara manual sepanjang waktu.

Masalah Chromium: 1156628

Pintasan baru ke elemen duplikat

Gunakan pintasan Duplicate element baru untuk meng-clone elemen secara langsung.

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

Atau, Anda dapat menduplikasi elemen dengan pintasan keyboard:

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

Masalah Chromium: 1150797, 1150797

Pemilih warna untuk properti CSS kustom

Panel Gaya kini menampilkan pemilih warna untuk properti CSS kustom.

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

Masalah Chromium: 1147016

Pintasan baru untuk menyalin properti CSS

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

Di panel Elemen, pilih elemen. Kemudian, klik kanan kelas CSS atau properti CSS di panel Styles untuk menyalin nilainya.

Opsi salin untuk class CSS:

• Salin pemilih. Salin nama pemilih saat ini.
• Salin aturan. Salin aturan pemilih saat ini.
• Salin semua deklarasi: Salin semua deklarasi pada aturan saat ini, termasuk pernyataan tidak valid dan properti dengan awalan.

Opsi salin untuk properti CSS:

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

Masalah Chromium: 1152391

Update cookie

Opsi baru untuk menampilkan cookie yang didekode URL

Anda kini dapat memilih untuk melihat nilai cookie yang didekode URL di panel Cookies.

Buka panel Application dan pilih panel Cookies. Pilih cookie apa pun di daftar. Aktifkan kotak centang Tampilkan URL yang didekode baru untuk melihat cookie yang didekode.

Masalah Chromium: 997625

Hapus hanya cookie yang terlihat

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

Di panel Application > Cookie, masukkan teks di kotak teks untuk memfilter cookie. Di beberapa contoh kita 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 lainnya tetap ada di 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 Storage, DevTools kini hanya menghapus cookie pihak pertama dengan secara default. Aktifkan opsi termasuk cookie pihak ketiga untuk menghapus cookie pihak ketiga juga.

Masalah Chromium: 1012337

Mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom

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

Buka Setelan > Perangkat dan klik Add custom device.... Luaskan Agen pengguna client hints untuk mengedit client hints.

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

Masalah Chromium: 1073909

Update panel jaringan

Mempertahankan "data log jaringan" pengaturan

DevTools kini mempertahankan "Record network log" deskripsi tempat. 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 server klien berlatensi rendah dan dua arah. Pelajari lebih lanjut tentang kasus penggunaannya, dan cara memberikan masukan tentang masa depan web.dev/webtransport/.

Masalah Chromium: 1152290

"Online" diganti namanya menjadi "No throttling"

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

Masalah Chromium: 1028078

Opsi penyalinan baru di panel Console, Source, dan Styles

Pintasan baru untuk menyalin objek di panel Console dan Sources

Anda kini dapat menyalin nilai objek dengan pintasan baru di panel Console dan Sources. Ini adalah berguna terutama ketika Anda memiliki objek besar (misalnya array panjang) untuk disalin.

Masalah Chromium: 1149859, 1148353

Pintasan baru untuk menyalin nama file di panel Source dan Styles

Sekarang Anda dapat menyalin nama {i>file<i} dengan mengklik kanan pada:

• file di panel Sumber, atau
• nama file di panel Styles pada panel Elements

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

Masalah Chromium: 1155120

Pembaruan tampilan detail frame

Informasi Service Worker baru dalam tampilan detail Frame

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

Di panel Application, luaskan frame yang berisi pekerja layanan, lalu pilih pekerja layanan pada 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 bagian.

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

Masalah Chromium: 1139899

Memberikan masukan dari tab Masalah

Jika Anda ingin memperbaiki pesan masalah, buka tab Masalah dari Konsol atau Setelan Lainnya > Alat lainnya > Masalah > untuk membuka tab Masalah. Luaskan masalah tersebut, dan klik Apakah pesan masalah tersebut bermanfaat bagi Anda?, lalu Anda dapat memberikan masukan jendela {i>pop-up.<i}

Frame yang dilepas di panel Performance

Saat menganalisis performa pemuatan di panel Performa, bagian Frame kini menandai {i>frame<i} yang dibuang sebagai merah. Arahkan kursor ke atasnya untuk mengetahui kecepatan frame.

Masalah Chromium: 1075865

Emulasikan perangkat foldable dan dual screen dalam Mode Perangkat

Anda kini bisa mengemulasi perangkat dua layar dan perangkat foldable di DevTools.

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

Klik ikon span baru untuk beralih antara satu layar atau layar terlipat dan dua layar atau dibentangkan postur.

Anda juga dapat mengaktifkan fitur Web Platform Eksperimental untuk mengakses media CSS baru fitur screen-spanning dan JavaScript getWindowSegments API. Ikon eksperimental menampilkan status tanda Fitur Web Platform Eksperimental. Ikon disorot ketika penanda itu mengaktifkan fitur ini. Buka chrome://flags dan alihkan tanda.

Masalah Chromium: 1054281

Fitur eksperimental

Mengotomatiskan pengujian browser dengan Puppeteer Recorder

DevTools kini dapat menghasilkan skrip Puppeteer berdasarkan interaksi Anda dengan browser, sehingga akan lebih mudah bagi 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 Recording di panel kiri. Tambahkan rekaman baru dan beri nama file (misalnya, test01.js).

Klik tombol Record di bagian bawah untuk mulai merekam interaksi. Coba untuk mengisi bentuk di layar. Perhatikan bahwa perintah Puppeteer ditambahkan ke file sebagaimana mestinya. Klik Tombol Rekam 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 kualitas dan memperluas Perekam Suara fungsionalitas dari waktu ke waktu.

Masalah Chromium: 1144127

Editor font di panel Styles

Font Editor baru adalah editor popover di panel Styles untuk properti terkait font yang akan membantu Anda menemukan tipografi yang sempurna untuk laman web Anda.

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

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. Tujuan Properti gap CSS juga didukung. Dalam contoh ini, kita memiliki CSS gap: 12px;. Perhatikan pola penetasan untuk setiap celah.

Masalah Chromium: 1139949

Tab Pelanggaran CSP baru

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

Masalah Chromium: 1137837

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

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

APCA adalah cara baru untuk menghitung kontras berdasarkan penelitian modern tentang persepsi warna. Dibandingkan dengan Sebagai pedoman AA/AAA, APCA lebih bergantung pada konteks. Kontrasnya dihitung berdasarkan properti spasial (ketebalan &ukuran {i>font<i}), warna (perbedaan kecerahan yang dirasakan antara teks dan latar belakang), dan konteks (cahaya sekitar, lingkungan, tujuan teks yang dimaksudkan).

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

Masalah Chromium: 1121900

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