Bulan ini adalah bulan yang kaya fitur di Chrome Canary. Baca terus untuk mempelajari skrip pihak ketiga mana yang menyebabkan masalah performa di situs Anda dengan Detail Gabungan di Linimasa, cara memilih warna yang konsisten dengan palet warna baru, cara menyimulasikan Wi-Fi konferensi dengan profil jaringan yang dapat disesuaikan, dan cara mengoptimalkan UI DevTools dengan menu utama baru dan tooltip yang lebih baik.
Salahkan masalah performa yang lebih baik: Detail gabungan di Linimasa
Di situs web saat ini, kami menggunakan semakin banyak layanan beacon, analitik, sosial, pemuatan font, dan iklan dari pihak ketiga, terkadang terlalu banyak. Untuk memastikan hal ini tidak terjadi dan memberi Anda visibilitas tentang masalah tersebut, kami memasukkan detail gabungan ke Linimasa.
Di tab Detail Gabungan, Anda dapat berfokus hanya pada fungsi yang mahal atau seluruh hierarki panggilan, lalu membagi data yang dipilih menurut domain, subdomain, atau URL yang berbeda. Misalnya, pada Linimasa pemuatan halaman di atas, sekarang Anda dapat mengatribusikan kecepatan lambat dengan mudah ke skrip pihak ketiga yang berasal dari domain seperti facebook.net atau twitter.com.
Menu utama khusus yang baru
Untuk merapikan toolbar utama, kami telah memindahkan ikon panel samping, setelan, dan dok ke dalam menu utama khusus yang baru.
Secara khusus, dok menjadi jauh lebih sederhana. Daripada harus menekan lama ikon sebelumnya, setiap posisi dok memiliki ikonnya sendiri.
Selain pemasangan ke dok, kami telah menambahkan bantuan, pintasan, dan penelusuran file akses cepat (yang mengarah ke halaman beranda baru kami).
Menemukan DevTools melalui tooltip yang ditingkatkan
Kita memiliki banyak tombol di DevTools, dan kita tahu bahwa tidak semuanya bisa dijelaskan sendiri. Kami kini telah mempermudah tindakan menemukan tindakan dan pintasannya dengan mengganti tooltip bawaan sistem dengan tooltip kustom yang konsisten dengan platform.
Tooltip baru akan muncul jauh lebih cepat dan menyertakan pintasan keyboard (jika ada).
Membuat profil throttling jaringan kustom
Jika opsi default untuk Throttler Jaringan terlalu membatasi kasus penggunaan Anda, dan Anda memerlukan opsi "Wi-Fi Konferensi" atau, demi nostalgia, ingin menggunakan gaya jadul dan mengemulasikan baris"110 Baud", saya punya kabar baik untuk Anda. Kami telah menambahkan panel Setelan baru yang memungkinkan Anda melakukan salah satu hal tersebut.
Otomatis, Material, dan palet warna kustom
Baik Anda ingin membuat ulang warna ajaib atau menggunakan palet warna yang sudah ada, Pemilih warna yang ditingkatkan akan membantu Anda memilih palet warna yang konsisten untuk situs Anda.
Dengan mengklik ikon pengalih kecil di samping palet, Anda dapat memilih dari berikut:
- Warna Halaman — Palet ini dibuat secara otomatis dari warna yang kami temukan di CSS Anda, menjadikannya opsi yang tepat jika Anda memperluas situs yang ada.
- Desain Material — Palet Desain Material menawarkan warna-warna indah yang unik dan merupakan pilihan ideal saat memulai project baru. Saat ini Anda akan menemukan semua warna utama, tapi kami akan segera menghadirkan semua nuansa.
- Kustom — Itu adalah playground Anda sendiri. Tambahkan warna baru dengan memilih satu di pemilih, lalu klik ikon "plus" di samping palet. Urutkan ulang dengan menariknya dan mengklik kanan untuk menampilkan lebih banyak opsi, seperti hapus.
Beri tahu kami pendapat Anda dan bagaimana kami dapat memperluas cerita berwarna lebih lanjut.
Terbaik dari yang lain
- Permintaan yang dibuat menggunakan fetch() API kini ditampilkan di Panel Jaringan
- Tata letak panel otomatis memastikan bahwa saat Anda mengubah ukuran panel
DevTools, akan beradaptasi dengan batasan ruang baru. - Periksa Elemen & Mode Perangkat memiliki sekumpulan ikon baru.
- Atribut di panel DOM kini memiliki warna berbeda meskipun node ditandai. (Semuanya berwarna putih sebelumnya.)
- Elemen tersembunyi (diaktifkan dengan menekan "h" pada node DOM yang dipilih) kini menampilkan indikator lingkaran abu-abu di sebelah kiri, dan titik henti sementara DOM melakukan hal yang sama pada lingkaran biru. (Ini analog dengan indikator oranye yang sudah kita miliki untuk memaksa status elemen seperti :hover).
Seperti biasa, beri tahu kami pendapat Anda melalui Twitter atau komentar di bawah, dan kirimkan bug ke crbug.com/new.
Sampai bulan depan!
Paul Bakaus & tim DevTools