Yang Baru di DevTools (Chrome 89)

Dukungan pen-debug-an 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.

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

Di panel Sumber, buka panel sidebar debugger. Perluas bagian Titik Henti Sementara Pelanggaran CSP dan centang kotak Pelanggaran Jenis Tepercaya untuk menjeda pengecualian. Cobalah 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 sana untuk melihat pratinjau pengecualian. 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 tampilan

Anda kini dapat mengambil screenshot node untuk node lengkap, termasuk konten di bawah fold. Sebelumnya, screenshot terpotong untuk konten yang tidak terlihat di area tampilan. Screenshot halaman penuh kini juga 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 Trust Token dengan tab Trust Tokens baru.

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

Dukungan penelusuran bug 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). Memeriksa apakah gambar yang digunakan oleh elemen LCP dipramuat untuk mengoptimalkan 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 memungkinkan kriteria dapat diinstal Chrome. Ini adalah sinyal yang sama 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 akan dihapus. Karena audit "persyaratan kemampuan penginstalan" yang diubah mencakup pemeriksaan kemampuan offline, audit "halaman saat ini dan start_url merespons dengan 200 saat offline" dihapus. Audit "Pemuatan halaman cukup cepat pada jaringan seluler" juga dihapus.

Masalah Chromium: 772558

Pembaruan panel Elemen

Mendukung pemaksaan status CSS :target

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

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

Gunakan pseudo-class :target untuk menata gaya elemen saat 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 + ⬇️
• Window/ 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 melihat representasi RGBA, HSLA, dan Hex dari nilai warna.

Masalah Chromium: 1147016

Pintasan baru untuk menyalin properti CSS

Anda kini 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 nilai.

Opsi salin untuk class CSS:

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

Opsi salin untuk properti CSS:

• Salin pernyataan. Menyalin deklarasi baris saat ini.
• Salin properti. Menyalin properti baris saat ini.
• Salin nilai: Salin 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 Cookies.

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

Masalah Chromium: 997625

Menghapus hanya 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 ini, kita memfilter daftar menurut "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.

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

Masalah Chromium: 1073909

Pembaruan panel Jaringan

Mempertahankan setelan "rekam log jaringan"

DevTools kini mempertahankan setelan "Rekam 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 dua arah klien-server dengan latensi rendah. Pelajari lebih lanjut kasus penggunaannya, dan cara memberikan masukan tentang penerapan di masa mendatang di web.dev/webtransport/.

Masalah Chromium: 1152290

"Online" diganti namanya menjadi "Tanpa pembatasan"

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

Masalah Chromium: 1028078

Opsi penyalinan baru di panel Konsol, Sumber, dan 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 sangat berguna terutama saat 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 Styles pane di panel Elements

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

Masalah Chromium: 1155120

Pembaruan tampilan detail frame

Informasi Service Worker baru di tampilan Detail frame

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

Di panel Aplikasi, luaskan frame dengan pekerja layanan, lalu pilih pekerja layanan di bagian hierarki Pekerja Layanan untuk melihat detailnya.

Masalah Chromium: 1122507

Mengukur informasi Memori di tampilan Detail frame

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

API performance.measureMemory() yang baru memperkirakan penggunaan memori seluruh halaman web. Pelajari cara memantau total penggunaan memori halaman web Anda dengan API baru ini dalam 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 terputus di panel Performa

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

Masalah Chromium: 1075865

Mengemulasi perangkat foldable dan layar ganda dalam Mode Perangkat

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

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

Klik ikon rentang baru untuk beralih antara postur layar tunggal atau dilipat dan layar ganda atau tidak dilipat.

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

Masalah Chromium: 1054281

Fitur eksperimental

Mengotomatiskan pengujian browser dengan Puppeteer Recorder

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

Klik tombol Rekam di bagian bawah untuk mulai merekam interaksi. Coba isi formulir di layar. Perhatikan bahwa perintah Puppeteer ditambahkan ke file dengan tepat. 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 meningkatkan dan memperluas fungsi Perekam dari waktu ke waktu.

Masalah Chromium: 1144127

Editor font di panel Gaya

Font Editor baru adalah editor popover di panel Styles 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 yang 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-itemsCSS dengan lebih baik. Properti CSS gap juga didukung. Dalam contoh ini, kita memiliki CSS gap: 12px;. Perhatikan pola arsiran untuk setiap celah.

Masalah Chromium: 1139949

Tab Pelanggaran CSP baru

Lihat semua pelanggaran Kebijakan Keamanan Konten (CSP) secara sekilas di tab Pelanggaran CSP yang baru. Tab baru ini adalah eksperimen yang akan mempermudah penanganan halaman web dengan sejumlah besar pelanggaran CSP dan Trusted Type.

Masalah Chromium: 1137837

Penghitungan kontras warna baru - Algoritma Kontras Perseptual Lanjutan (APCA)

Algoritma Kontras Perseptual Lanjutan (APCA) menggantikan rasio kontras pedoman AA/AAA di Pemilih Warna.

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), dan konteks (cahaya sekitar, lingkungan, tujuan teks).

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

Masalah Chromium: 1121900

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

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

Yang baru di DevTools

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