Yang Baru di DevTools (Chrome 90)

Alat proses debug flexbox CSS baru

DevTools kini memiliki alat proses debug flexbox CSS khusus.

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

Di panel Gaya, 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. Coba sendiri.

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

Masalah Chromium: 1166710, 1175699

Overlay Data Web Inti baru

Visualisasikan dan ukur performa halaman Anda dengan lebih baik menggunakan overlay Core Web Vitals yang baru.

Data Web Inti adalah inisiatif Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting dalam memberikan pengalaman pengguna yang baik di web.

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

Overlay saat ini menampilkan:

• Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk memberikan pengalaman pengguna yang baik, LCP harus muncul dalam 2,5 detik sejak 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.

Masalah Chromium: 1152089

Pembaruan tab masalah

Memindahkan jumlah masalah ke status bar Konsol

Tombol jumlah masalah baru kini ditambahkan di Panel status konsol untuk meningkatkan visibilitas peringatan masalah. Tindakan ini akan menggantikan pesan masalah di 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 di situs mereka, sehingga meningkatkan kualitas aplikasi mereka.

Buka Aktivitas Web Tepercaya. Kemudian, buka tab Masalah dengan mengklik tombol Jumlah masalah di status bar Konsol untuk melihat masalah. Tonton presentasi ini oleh Andre untuk mempelajari lebih lanjut cara membuat dan men-deploy Aktivitas Web Tepercaya.

Masalah Chromium: 1147479

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

Masalah Chromium: 1178530

Panel Token Kepercayaan baru di panel Aplikasi

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

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

Masalah Chromium: 1126824

Mengemulasi 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, artinya 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

Peningkatan alat Progressive Web App

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

Panel Manifes kini menampilkan pesan peringatan jika deskripsi manifes melebihi 324 karakter.

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

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 dari setiap resource jaringan.

Masalah Chromium: 1128885

Peningkatan performa

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

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

Nantikan postingan blog engineering yang lebih mendetail yang menjelaskan penerapannya.

Masalah Chromium: 1069425, 1077657

Menampilkan fitur yang diizinkan/tidak diizinkan di 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 disematkannya.

Masalah Chromium: 1158827

Kolom SameParty baru di panel Cookie

Panel Cookie di panel Aplikasi kini 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.

Masalah Chromium: 1161427

Dukungan fn.displayName non-standar yang tidak digunakan lagi

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

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

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

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

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 telah 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 Masalah secara otomatis.

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

Buka halaman yang memiliki masalah kontras rendah (misalnya, demo ini). Kemudian, buka tab Masalah dengan mengklik tombol Jumlah masalah di status bar Konsol untuk melihat masalah.

Masalah Chromium: 1155460

Tampilan hierarki aksesibilitas lengkap di panel Elemen

Anda kini dapat beralih untuk melihat tampilan hierarki aksesibilitas lengkap yang baru dan lebih baik dari halaman.

Panel aksesibilitas saat ini memberikan tampilan node yang terbatas, hanya menampilkan rantai ancestor langsung dari node root ke node yang diperiksa. Tampilan hierarki aksesibilitas 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 Elements. Klik untuk beralih antara hierarki DOM yang ada dan hierarki aksesibilitas penuh.

Perhatikan bahwa ini adalah eksperimen tahap awal. Kami berencana untuk meningkatkan dan memperluas fungsinya seiring waktu.

Masalah Chromium: 887173

Mendownload saluran pratinjau

Sebaiknya gunakan 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 sebelum pengguna melakukannya.

Hubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur baru, update, atau hal lain yang terkait dengan DevTools.

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

Yang baru di DevTools

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