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 lencana untuk mengalihkan tampilan {i>flex overlay<i} pada laman.

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 kami. Anda dapat mengganti overlay setiap elemen.

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 untuk sinyal kualitas yang penting untuk memberikan pengalaman pengguna yang hebat di web.

Buka Menu Perintah, jalankan perintah Show Rendering, lalu aktifkan Core Web Tanda vital.

Overlay saat ini menampilkan:

• Largest Contentful Paint (LCP): mengukur performa pemuatan. Untuk menyediakan pengguna yang baik otomatis, LCP akan muncul dalam waktu 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 menyediakan pengguna yang baik pengalaman, halaman harus mempertahankan CLS kurang dari 0,1.

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.

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 menggunakan berbagai aplikasi obrolan.

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

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 menghindari tanda kutip ganda saat mencetak string.

Masalah Chromium: 1178530

Panel Trust Tokens baru di panel Application

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

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

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

Buka Menu Perintah, jalankan perintah Show Rendering, lalu setel Emulate CSS fitur media 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.

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

Selain itu, panel Manifest sekarang menampilkan pesan peringatan jika screenshot PWA tidak memenuhi 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 setiap resource jaringan.

Masalah Chromium: 1128885

Peningkatan performa

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

DevTools mengumpulkan stack trace dan melampirkannya ke pesan konsol atau tugas asinkron untuk nanti digunakan oleh pengembang 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 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 dalam bingkainya sendiri atau dalam iframe yang disematkan.

Masalah Chromium: 1158827

Kolom SameParty baru di panel Cookie

Panel Cookies di panel Application sekarang menampilkan atribut SameParty cookie tersebut. Tujuan 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.

Secara tradisional, Chrome mendukung properti fn.displayName non-standar sebagai cara developer untuk mengontrol nama debug untuk fungsi yang muncul di error.stack dan di stack DevTools rekaman aktivitas. 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. Melambat pengumpulan pelacakan tumpukan, biaya yang selalu dibayar pengembang, terlepas dari apakah mereka benar-benar menggunakannya 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 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 Masalah dengan Mengklik tombol Issues count di status bar Konsol untuk melihat masalah tersebut.

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 nodenya secara terbatas, yang hanya menampilkan rantai ancestor langsung dari node root ke node yang diperiksa. Tampilan hierarki aksesibilitas baru bertujuan untuk memperbaikinya dan membuat hierarki aksesibilitas lebih mudah dijelajahi, berguna, dan lebih mudah bagi developer untuk digunakan.

Setelah mengaktifkan eksperimen, tombol baru akan muncul di panel Elemen, klik untuk beralih di 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

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.

Yang baru di DevTools

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