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

Saat elemen HTML di halaman Anda menerapkan display: flex atau display: inline-flex, Anda dapat melihat badge flex di sampingnya dalam 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. Anda dapat mengganti overlay setiap elemen.

Bagian Flexbox di panel Layout

Masalah Chromium: 1166710, 1175699

Overlay Core Web Vitals baru

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

Core Web Vitals adalah inisiatif dari Google untuk memberikan panduan terpadu terkait sinyal kualitas yang penting untuk 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 akan muncul dalam waktu 2,5 detik sejak halaman pertama kali 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 Core Web Vitals

Masalah Chromium: 1152089

Update tab Masalah

Jumlah masalah dipindahkan 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 membantu developer memahami dan memperbaiki masalah Aktivitas Web Tepercaya pada situs mereka, sehingga meningkatkan kualitas aplikasi mereka.

Buka Aktivitas Web Tepercaya. Kemudian, buka tab Issues dengan mengklik tombol Issues count di status bar Console 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

Memformat string sebagai literal string JavaScript (valid) di Konsol

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

Buka Menu Perintah, jalankan perintah Show Rendering, lalu setel 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 Apps (PWA) yang lebih mendetail 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 sesuai 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 dari setiap resource jaringan.

Kolom 'Remote Address Space' baru

Masalah Chromium: 1128885

Peningkatan performa

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

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

Nantikan postingan blog engineering yang lebih mendetail terkait penerapannya.

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 di 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 Cookies di panel Application sekarang menampilkan atribut SameParty cookie tersebut. Atribut SameParty adalah atribut boolean baru untuk menunjukkan apakah cookie harus disertakan dalam permintaan ke origin Set Pihak Pertama yang sama.

Kolom SameParty

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.

Contoh penggunaan displayName

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

Ganti fn.displayName dengan fn.name standar, yang 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.

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 sudah tidak digunakan lagi.

Setelan 'Jangan tampilkan peringatan Penghemat Data Chrome' yang 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 yang paling umum terdeteksi secara otomatis di web. Menampilkan masalah ini di tab Masalah akan membantu developer menemukan masalah ini dengan lebih mudah.

Buka halaman yang memiliki masalah kontras rendah (misalnya, 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 Elemen

Anda kini dapat beralih untuk melihat tampilan hierarki aksesibilitas penuh yang baru dan telah ditingkatkan dari sebuah halaman.

Panel aksesibilitas saat ini menyediakan tampilan terbatas untuk node-nya, yang 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, bermanfaat, 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 penuh.

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

Tampilan hierarki aksesibilitas penuh

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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait 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.
Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.