Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 89)

Jecelyn Yeen

Dukungan proses debug untuk pelanggaran Jenis Tepercaya

Titik henti sementara pada pelanggaran Jenis Tepercaya

Anda kini dapat menetapkan titik henti sementara dan menemukan pengecualian untuk Pelanggaran Jenis Tepercaya di panel Sources.

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

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

Titik henti sementara pada pelanggaran Jenis Tepercaya

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 kursor ke atasnya untuk melihat pratinjau pengecualian. Klik tombol tersebut untuk meluaskan tab Masalah. Tab ini memberikan detail lebih lanjut tentang pengecualian dan panduan tentang cara memperbaikinya.

Tautkan masalah di panel Sumber ke tab Masalah

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. {i>Screenshot<i} satu laman penuh juga sudah tepat sekarang.

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

Ambil screenshot node di luar area tampilan

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 pelacakan pasif. Pelajari cara mulai menggunakan Trust Token.

Dukungan proses debug lebih lanjut akan tersedia dalam rilis berikutnya.

Tab Trust Token baru untuk permintaan jaringan

Masalah Chromium: 1126824

Lighthouse 7 di panel Lighthouse

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

Lighthouse 7 di panel Lighthouse

Audit baru di Lighthouse 7:

Pramuat gambar Largest Contentful Paint (LCP). Mengaudit apakah gambar yang digunakan oleh elemen LCP sudah dimuat sebelumnya untuk mempercepat waktu LCP Anda.
Masalah 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 Chrome yang dapat diinstal. Sinyal ini adalah sinyal yang sama yang terlihat di panel Manifest.
- Audit "Mendaftarkan pekerja layanan..." dipindahkan ke grup Dioptimalkan PWA, dan audit "Menggunakan HTTPS" kini disertakan sebagai bagian dari audit "persyaratan penginstalan" utama.
- Grup Cepat dan andal dihapus. Karena audit "persyaratan kemampuan penginstalan" yang diperbarui mencakup pemeriksaan kemampuan offline, audit "halaman saat ini dan start_url merespons dengan 200 saat offline" dihapus. Audit "Pemuatan halaman cukup cepat di jaringan seluler" juga telah dihapus.

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. 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. Tonton demo ini untuk mencobanya sendiri. Fitur DevTools baru ini memungkinkan Anda menguji gaya tersebut tanpa harus mengubah URL secara manual sepanjang waktu.

memaksa status `:target` CSS

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 + ⬇️

Elemen duplikat

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 menelusuri representasi RGBA, HSLA, dan Hex dari nilai warna.

Pemilih warna untuk properti CSS kustom

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 class CSS atau properti CSS di panel Styles untuk menyalin nilainya.

Pintasan baru untuk menyalin properti CSS

Opsi salin untuk class CSS:

Salin pemilih. Salin nama pemilih saat ini.
Salin aturan. Salin aturan pemilih saat ini.
Salin semua deklarasi: Menyalin semua deklarasi pada aturan saat ini, termasuk properti yang tidak valid dan berawalan.

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 lalu pilih panel Cookies. Pilih cookie apa pun di daftar. Aktifkan kotak centang Tampilkan URL yang didekode baru untuk melihat cookie yang didekode.

Opsi untuk menampilkan cookie yang didekode URL

Masalah Chromium: 997625

Hapus hanya cookie yang terlihat

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

Di panel Application > panel Cookies, masukkan teks di kotak teks untuk memfilter cookie. Dalam contoh ini, 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 dalam daftar. Sebelumnya, Anda hanya memiliki opsi untuk menghapus semua cookie.

Hapus hanya cookie yang terlihat

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 secara default. Aktifkan opsi termasuk cookie pihak ketiga untuk menghapus cookie pihak ketiga juga.

Opsi untuk menghapus cookie pihak ketiga

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, lalu klik Tambahkan perangkat kustom.... Luaskan bagian Petunjuk klien agen pengguna untuk mengedit client hints.

Edit Petunjuk Klien Agen Pengguna

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 Petunjuk Klien Agen Pengguna di web.dev/user-agent-client-hints/.

Masalah Chromium: 1073909

Update panel jaringan

Mempertahankan setelan "rekam log jaringan"

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

Mencatat log jaringan

Masalah Chromium: 1122580

Melihat koneksi WebTransport di panel Jaringan

Panel jaringan kini menampilkan koneksi WebTransport.

Koneksi WebTransport

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

Masalah Chromium: 1152290

"Online" diganti namanya menjadi "Tanpa throttling"

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

Mencatat log jaringan

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. Hal ini berguna terutama jika Anda memiliki objek besar (misalnya, array panjang) untuk disalin.

Salin objek di Console

Menyalin objek di panel Sources

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.

Menyalin nama file di panel Sources

Menyalin nama file di panel Styles

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 dengan pekerja layanan, lalu pilih pekerja layanan dalam hierarki Service Workers untuk melihat detailnya.

Informasi Service Worker dalam tampilan detail Frame

Masalah Chromium: 1122507

Mengukur informasi Memori di tampilan detail Frame

Status performance.measureMemory() API sekarang ditampilkan di bagian ketersediaan API.

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

Ukur Memori

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 pesan masalah, lalu klik Apakah pesan masalah tersebut membantu Anda?, lalu Anda dapat memberikan masukan di pop-up.

Link masukan masalah

Frame yang dilepas di panel Performance

Saat menganalisis performa pemuatan di panel Performa, bagian Frame kini menandai penurunan frame sebagai merah. Arahkan kursor ke atasnya untuk mengetahui kecepatan frame.

Frame yang dilepas

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 Toolbar Perangkat, pilih salah satu perangkat berikut: Surface Duo atau Samsung Galaxy Fold.

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

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

Emulasikan dua layar

Masalah Chromium: 1054281

Fitur eksperimental

Mengotomatiskan pengujian browser dengan Puppeteer Recorder

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

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 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 meningkatkan dan memperluas fungsi Perekam Suara dari waktu ke waktu.

Perekam Puppeteer

Masalah Chromium: 1144127

Editor font di panel Styles

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

Pop-up menyediakan UI yang bersih untuk memanipulasi tipografi secara dinamis dengan serangkaian jenis input yang intuitif.

Editor font di panel Styles

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

Kotak Flex

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 yang memiliki banyak pelanggaran CSP dan Jenis Tepercaya.

Tab Pelanggaran CSP

Masalah Chromium: 1137837

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

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

APCA adalah cara baru untuk menghitung kontras berdasarkan penelitian 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), dan konteks (cahaya sekitar, lingkungan, tujuan teks yang dimaksudkan).

APCA di Pemilih Warna

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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.