Halaman ini diterjemahkan oleh Cloud Translation API.

Yang Baru di DevTools (Chrome 90)

Jecelyn Yeen

Alat proses debug flexbox CSS baru

DevTools kini memiliki alat proses debug flexbox CSS khusus.

Alat proses debug flexbox CSS

Ketika elemen HTML di halaman Anda menerapkan display: flex atau display: inline-flex, Anda dapat melihat badge flex di sebelahnya pada panel Elemen. Klik badge untuk mengalihkan tampilan overlay fleksibel di halaman.

Di panel Styles, Anda dapat mengklik ikon baru di samping display: flex atau display: inline-flex untuk membuka editor Flexbox. Editor Flexbox menyediakan cara cepat untuk mengedit properti flexbox. Cobalah sendiri!

Selain itu, panel Layout memiliki bagian Flexbox, yang menampilkan semua elemen flexbox di halaman tersebut. Anda dapat mengganti overlay di setiap elemen.

Bagian Flexbox di panel Layout

Masalah Chromium: 1166710, 1175699

Overlay Data Web Inti baru

Visualisasikan dan ukur performa halaman Anda dengan lebih baik menggunakan overlay Data Web Inti yang baru.

Data Web Inti adalah inisiatif dari Google guna memberikan panduan terpadu untuk sinyal kualitas yang penting untuk memberikan pengalaman pengguna yang luar biasa di web.

Buka Command Menu, jalankan perintah Show Rendering, lalu centang kotak Core Web Vitals.

Overlay saat ini menampilkan:

Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP akan muncul dalam waktu 2,5 detik saat halaman pertama kali mulai dimuat.
Penundaan Input Pertama (FID): mengukur interaktivitas. Untuk memberikan pengalaman pengguna yang baik, halaman harus memiliki FID kurang dari 100 milidetik.
Pergeseran Tata Letak Kumulatif (CLS): mengukur stabilitas visual. Untuk memberikan pengalaman pengguna yang baik, halaman harus mempertahankan CLS kurang dari 0,1.

Overlay Data Web Inti

Masalah Chromium: 1152089

Pembaruan tab masalah

Memindahkan jumlah masalah ke status bar Konsol

Tombol jumlah masalah baru kini ditambahkan di Status bar Konsol untuk meningkatkan visibilitas peringatan masalah. Ini akan menggantikan pesan masalah di Konsol.

Jumlah masalah di status bar Konsol

Masalah Chromium: 1140516

Melaporkan masalah Aktivitas Web Tepercaya

Tab Masalah kini melaporkan masalah Aktivitas Web Tepercaya. Hal ini bertujuan untuk membantu developer memahami dan memperbaiki masalah Aktivitas Web Tepercaya situs mereka, sehingga meningkatkan kualitas aplikasi mereka.

Buka Aktivitas Web Tepercaya. Kemudian, buka tab Issues dengan mengklik tombol Issues count di status bar Konsol untuk melihat masalah. Tonton pembicaraan dari Andre ini untuk mempelajari lebih lanjut cara membuat dan men-deploy Aktivitas Web Tepercaya.

Masalah Aktivitas Web Tepercaya di tab Masalah

Masalah Chromium: 1147479

Format string sebagai literal string JavaScript (valid) di Konsol

Sekarang, Konsol memformat string sebagai literal string JavaScript yang valid di Konsol. Sebelumnya, Konsol tidak akan meng-escape tanda kutip ganda saat mencetak string.

Memformat string sebagai literal string JavaScript (valid)

Masalah Chromium: 1178530

Panel Trust Tokens baru di panel Application

DevTools kini menampilkan semua Trust Token yang tersedia dalam konteks penjelajahan saat ini di panel Trust Tokens baru, di bawah panel Application.

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

Panel Trust Tokens baru

Masalah Chromium: 1126824

Emulasikan fitur media color-gamut CSS

Kueri media color-gamut memungkinkan Anda menguji perkiraan rentang warna yang didukung oleh browser dan perangkat output. Misalnya, jika kueri media color-gamut: p3 cocok, itu berarti perangkat pengguna mendukung ruang warna Display-P3.

Buka Command Menu, jalankan perintah Show Rendering, lalu tetapkan dropdown Emulate CSS media feature color-gamut.

Masalah Chromium: 1073887

Alat Progressive Web App yang ditingkatkan

DevTools kini menampilkan pesan peringatan kemampuan penginstalan Progressive Web App (PWA) yang lebih detail di Konsol, dengan link ke dokumentasi.

Peringatan kemampuan penginstalan PWA

Panel Manifest kini menampilkan pesan peringatan jika description manifes melebihi 324 karakter.

Peringatan pemotongan deskripsi PWA

Selain itu, panel Manifest kini menampilkan pesan peringatan jika screenshot PWA tidak cocok dengan persyaratan. Pelajari lebih lanjut properti screenshot PWA dan persyaratannya di sini.

Peringatan screenshot PWA

Masalah Chromium: 1146450, 1169689, 965802

Kolom `Remote Address Space` baru di panel Jaringan

Gunakan kolom Remote Address Space baru di panel Jaringan untuk melihat ruang alamat IP jaringan setiap resource jaringan.

Kolom 'Remote Address Space' baru

Masalah Chromium: 1128885

Peningkatan performa

Performa pemuatan halaman dengan DevTools yang dibuka sekarang ditingkatkan. Dalam beberapa kasus yang ekstrem, kami melihat peningkatan performa 10x.

DevTools mengumpulkan pelacakan tumpukan dan melampirkannya ke pesan konsol atau tugas asinkron untuk digunakan nanti oleh developer jika terjadi masalah. Karena pengumpulan ini harus terjadi secara sinkron di mesin browser, pengumpulan pelacakan tumpukan yang lambat dapat memperlambat halaman secara signifikan saat DevTools terbuka. Kami telah berhasil mengurangi overhead pengumpulan pelacakan tumpukan secara signifikan.

Nantikan postingan blog engineering lebih detail yang dijelaskan tentang penerapan.

Masalah Chromium: 1069425, 1077657

Menampilkan fitur yang diizinkan/tidak diizinkan dalam tampilan detail Frame

Tampilan detail frame kini menampilkan daftar fitur browser yang diizinkan dan tidak diizinkan yang dikontrol oleh kebijakan Izin.

Kebijakan izin adalah API platform web yang memberi situs kemampuan untuk mengizinkan atau memblokir penggunaan fitur browser dalam frame-nya sendiri atau dalam iframe yang disematkan.

Fitur yang diizinkan/tidak diizinkan berdasarkan kebijakan Izin

Masalah Chromium: 1158827

Kolom `SameParty` baru di panel Cookie

Panel Cookie di panel Application sekarang menampilkan atribut SameParty cookie. Atribut SameParty adalah atribut boolean baru untuk menunjukkan apakah cookie harus disertakan dalam permintaan ke asal Set Pihak Pertama yang sama.

Kolom SameParty

Masalah Chromium: 1161427

Menghentikan penggunaan dukungan `fn.displayName` non-standar

Dukungan untuk fn.displayName non-standar tidak digunakan lagi. Sebagai gantinya, gunakan fn.name.

Contoh penggunaan displayName

Chrome biasanya mendukung properti fn.displayName non-standar sebagai cara bagi developer untuk mengontrol nama debug untuk fungsi yang muncul di error.stack dan di pelacakan tumpukan DevTools. Pada contoh di atas, Stack Panggilan sebelumnya akan menampilkan noLongerSupport.

Ganti fn.displayName dengan fn.name standar, yang dibuat dapat dikonfigurasi (melalui Object.defineProperty) di ECMAScript 2015 untuk mengganti properti fn.displayName non-standar.

Dukungan untuk fn.displayName tidak dapat diandalkan dan tidak konsisten di seluruh mesin browser. Hal ini memperlambat pengumpulan stack trace, biaya yang selalu dibayar developer, terlepas dari apakah mereka benar-benar menggunakan fn.displayName atau tidak.

Contoh penggunaan nama

Masalah Chromium: 1177685

Penghentian penggunaan `Don't show Chrome Data Saver warning` di menu Setelan

Setelan Don't show Chrome Data Saver warning dihapus karena Penghemat Data Chrome tidak digunakan lagi.

Setelan 'Jangan tampilkan peringatan Penghemat Data Chrome' tidak digunakan lagi

Masalah Chromium: 1056922

Fitur eksperimental

Pelaporan masalah kontras rendah otomatis di tab Masalah

DevTools menambahkan dukungan eksperimental untuk melaporkan masalah kontras di tab Issues secara otomatis.

Teks kontras rendah adalah masalah aksesibilitas paling umum yang terdeteksi secara otomatis di web. Menampilkan masalah tersebut di tab Masalah akan membantu developer menemukan masalah ini dengan lebih mudah.

Buka halaman yang memiliki masalah kontras rendah (mis. demo ini). Kemudian, buka tab Issues dengan mengklik tombol Issues count di status bar Console untuk melihat masalah.

Pelaporan masalah kontras rendah otomatis

Masalah Chromium: 1155460

Tampilan hierarki aksesibilitas penuh di panel Elements

Anda kini dapat beralih untuk melihat tampilan hierarki aksesibilitas lengkap yang baru dan ditingkatkan.

Panel aksesibilitas saat ini menyediakan tampilan terbatas node-nya, yang hanya menampilkan rantai ancestor langsung dari node root ke node yang diperiksa. Tampilan hierarki aksesibilitas yang baru bertujuan untuk meningkatkannya dan membuat hierarki aksesibilitas lebih mudah dijelajahi, berguna, dan lebih mudah digunakan oleh developer.

Setelah mengaktifkan eksperimen, tombol baru akan muncul di panel Elemen. Klik untuk beralih antara hierarki DOM yang ada dan hierarki aksesibilitas lengkap.

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

Tampilan hierarki aksesibilitas lengkap

Masalah Chromium: 887173

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 > Bantuan > Laporkan masalah DevTools di DevTools.
Tweet di @ChromeDevTools.
Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.