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 mengaktifkan/menonaktifkan tampilan overlay flex 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 Tata Letak memiliki bagian Flexbox, yang menampilkan semua elemen flexbox di halaman. Anda dapat mengganti 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 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 Tampilkan 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 harus terjadi dalam waktu 2,5 detik sejak halaman 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 Status bar 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. Tujuannya adalah 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 pembahasan oleh Andre ini untuk mempelajari lebih lanjut cara membuat dan men-deploy Aktivitas Web Tepercaya.

Masalah Chromium: 1147479

Memformat string sebagai literal string JavaScript (yang valid) di Konsol

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

Masalah Chromium: 1178530

Panel Trust Tokens baru di panel Aplikasi

DevTools kini menampilkan semua Trust Tokens 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 mulai menggunakan Token Tepercaya.

Masalah Chromium: 1126824

Mengemulasi fitur media CSS color-gamut

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, berarti perangkat pengguna mendukung ruang warna Display-P3.

Buka Menu Perintah, jalankan perintah Tampilkan Rendering, lalu tetapkan dropdown Emulasikan fitur media CSS color-gamut.

Masalah Chromium: 1073887

Peningkatan alat Progressive Web App

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

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

Selain itu, panel Manifest kini menampilkan pesan peringatan jika screenshot PWA tidak sesuai 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 rekaman aktivitas stack dan melampirkannya ke pesan konsol atau tugas asinkron untuk penggunaan oleh developer di lain waktu jika terjadi masalah. Karena pengumpulan ini harus terjadi secara sinkron di mesin browser, pengumpulan rekaman aktivitas stack yang lambat dapat memperlambat halaman secara signifikan saat DevTools terbuka. Kami berhasil mengurangi overhead pengumpulan rekaman aktivitas stack secara signifikan.

Nantikan postingan blog teknik yang lebih mendetail tentang penjelasan implementasi.

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 memberikan kemampuan kepada situs 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 Cookies di panel Application kini menampilkan atribut SameParty dari cookie. Atribut SameParty adalah atribut boolean baru untuk menunjukkan apakah cookie harus disertakan dalam permintaan ke origin 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 rekaman aktivitas 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 menggantikan 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.

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 dihentikan penggunaannya.

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 dengan 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 penuh halaman yang baru dan ditingkatkan.

Panel aksesibilitas saat ini memberikan tampilan terbatas dari nodenya, hanya menampilkan rantai ancestor langsung dari node root ke node yang diperiksa. Tampilan hierarki aksesibilitas baru bertujuan untuk meningkatkan hal tersebut 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 fungsionalitasnya seiring waktu.

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