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 terkait 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 Sources, buka panel sidebar debugger. Luaskan bagian Titik henti sementara Pelanggaran CSP dan aktifkan kotak centang Pelanggaran Jenis Tepercaya untuk menjeda pengecualian. Cobalah sendiri dengan halaman demo ini.

Titik henti sementara pada pelanggaran Jenis Tepercaya

Masalah Chromium: 1142804

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

Tautkan masalah di panel Sumber ke tab Masalah

Masalah Chromium: 1150883

Mengambil screenshot node di luar area pandang

Kini Anda dapat mengambil screenshot node untuk node lengkap, termasuk konten di paruh bawah. Sebelumnya, screenshot terpotong karena konten yang tidak terlihat di area tampilan. {i>Screenshot<i} halaman penuh sekarang juga lebih akurat.

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

Mengambil screenshot node di luar area pandang

Masalah Chromium: 1003629

Tab Trust Tokens 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 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. Periksa catatan rilis untuk mengetahui daftar lengkap perubahan.

Lighthouse 7 di panel Lighthouse

Audit baru di Lighthouse 7:

  • Pramuat gambar Largest Contentful Paint (LCP). Mengaudit jika gambar yang digunakan oleh elemen LCP sudah dipramuat untuk meningkatkan 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 Installable kini didukung sepenuhnya oleh pemeriksaan kemampuan yang mengaktifkan kriteria yang dapat diinstal di Chrome. Ini adalah sinyal yang sama yang terlihat di panel Manifes.

    • Audit "Mendaftarkan pekerja layanan..." akan dipindahkan ke grup PWA Dioptimalkan, dan audit "Menggunakan HTTPS" kini disertakan sebagai bagian dari audit "persyaratan penginstalan" utama.
    • Grup Cepat dan andal dihapus. Karena audit "persyaratan penginstalan" yang telah 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

Pembaruan panel elemen

Dukungan memaksakan status :target CSS

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

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

Gunakan class pseudo :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 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, lalu 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 Styles kini menampilkan pemilih warna untuk properti CSS kustom.

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

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 di 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 berdasarkan aturan saat ini, termasuk properti yang tidak valid dan berawalan.

Opsi salin untuk properti CSS:

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

Masalah Chromium: 1152391

Pembaruan cookie

Opsi baru untuk menampilkan cookie yang didekode URL

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

Buka panel Application lalu pilih panel Cookies. Pilih cookie di daftar. Aktifkan kotak centang Tampilkan URL yang didekode untuk melihat cookie yang didekode.

Opsi untuk menampilkan cookie yang didekode URL

Masalah Chromium: 997625

Hanya hapus cookie yang terlihat

Tombol Clear all cookies di panel Cookies kini diganti dengan tombol Clear filters cookies.

Di panel Application > panel Cookies, masukkan teks di kotak teks untuk memfilter cookie. Dalam contoh kita di sini, kita memfilter daftar berdasarkan "PREF". Klik tombol Clear filters cookie 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.

Hanya hapus cookie yang terlihat

Masalah Chromium: 978059

Opsi baru untuk menghapus cookie pihak ketiga di panel Storage

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

Opsi untuk menghapus cookie pihak ketiga

Masalah Chromium: 1012337

Mengedit Petunjuk Klien Agen Pengguna untuk perangkat kustom

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

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

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

Masalah Chromium: 1073909

Update panel jaringan

Mempertahankan setelan "rekam log jaringan"

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

Catat log jaringan

Masalah Chromium: 1122580

Melihat koneksi WebTransport di panel Network

Panel Network kini menampilkan koneksi WebTransport.

Koneksi WebTransport

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

Masalah Chromium: 1152290

"Online" diganti namanya menjadi "Tidak ada throttling"

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

Catat log jaringan

Masalah Chromium: 1028078

Opsi salin baru di Konsol, panel Sources, dan panel Styles

Pintasan baru untuk menyalin objek di panel Console dan Sumber

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

Salin objek di Console

Menyalin objek di panel Sumber

Masalah Chromium: 1149859, 1148353

Pintasan baru untuk menyalin nama file di panel Sources dan panel Styles

Anda dapat menyalin nama file dengan mengklik kanan pada:

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

Pilih Copy file name dari menu konteks untuk menyalin nama file.

Menyalin nama file di panel Sumber

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

Informasi Service Worker dalam tampilan detail Frame

Masalah Chromium: 1122507

Mengukur Informasi memori dalam tampilan detail Frame

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

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

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

Link masalah masukan

Frame yang dihapus di panel Performa

Saat menganalisis performa pemuatan di panel Performance, bagian Frames kini menandai frame yang hilang sebagai merah. Arahkan kursor ke atasnya untuk mengetahui kecepatan frame.

Frame jatuh

Masalah Chromium: 1075865

Emulasi perangkat foldable dan dua layar dalam Mode Perangkat

Anda kini dapat 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 layar tunggal atau lipat dan layar ganda atau bentuk terlipat.

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

Emulasikan layar ganda

Masalah Chromium: 1054281

Fitur eksperimental

Mengotomatiskan pengujian browser dengan Puppeteer Recorder

DevTools kini dapat menghasilkan skrip Puppeteer berdasarkan interaksi Anda dengan browser, sehingga Anda dapat mengotomatiskan pengujian browser dengan lebih mudah. 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 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 Suara dari waktu ke waktu.

Perekam Suara Boneka

Masalah Chromium: 1144127

Editor font di panel Styles

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

Popover 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 kita di sini, 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 dengan banyak pelanggaran CSP dan Trusted Type.

Tab Pelanggaran CSP

Masalah Chromium: 1137837

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

Algoritma Kontras Perseptual Lanjutan (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 panduan 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 dalam Pemilih Warna

Contoh tersebut menunjukkan nilai minimum APCA adalah 38%. Rasio kontras harus memenuhi atau melebihi nilai yang tercantum. Nilai ini dihitung berdasarkan ketebalan dan ukuran font, yang mengacu pada tabel pencarian ACA 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 tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan 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.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.

Yang Baru di DevTools

Daftar semua hal yang telah dibahas dalam seri What's New In DevTools.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 dibatalkan.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59