Chrome Canary merupakan bulan yang kaya fitur. Lanjutkan membaca untuk mengetahui 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 penggunaan UI DevTools dengan menu utama baru dan tooltip yang lebih baik.
Masalah performa yang lebih baik: Detail gabungan di Linimasa
Di situs saat ini, kita semakin banyak menggunakan beacon, analisis, media sosial, pemuatan font, dan layanan iklan dari pihak ketiga, terkadang terlalu banyak. Untuk memastikan hal ini tidak terjadi dan memberi Anda visibilitas tentang masalah tersebut, kami memperkenalkan detail gabungan ke Linimasa.
Di tab Aggregated Details, Anda dapat berfokus hanya pada fungsi yang mahal atau seluruh hierarki panggilan, lalu mengelompokkan data yang dipilih menurut domain, sub-domain, atau URL yang berbeda. Misalnya, dalam Linimasa pemuatan halaman di atas, Anda kini dapat mengatribusikan pelambatan dengan mudah ke skrip pihak ketiga yang berasal dari domain seperti facebook.net atau twitter.com.
Menu utama baru yang khusus
Untuk merapikan toolbar utama, kami telah memindahkan ikon panel samping, setelan, dan dok ke menu utama baru yang khusus.
Secara khusus, proses docking menjadi jauh lebih sederhana. Daripada harus menekan lama ikon sebelumnya, setiap posisi dok menampilkan ikonnya sendiri.
Selain pemasangan ke dok, kami telah menambahkan akses cepat, penelusuran file, pintasan, dan bantuan (yang akan mengarah ke halaman beranda baru kami).
Menemukan DevTools melalui tooltip yang ditingkatkan
Ada banyak tombol di DevTools, dan kita tahu bahwa tidak semua tombol tersebut dapat dijelaskan dengan sendirinya. Sekarang kami telah mempermudah penemuan tindakan dan pintasannya dengan mengganti tooltip native sistem dengan tooltip kustom yang konsisten dengan platform.
Tooltip baru muncul jauh lebih cepat dan menyertakan pintasan keyboard (jika ada).
Membuat profil throttling jaringan kustom
Jika opsi default untuk Network Throttler terlalu membatasi untuk kasus penggunaan Anda, dan Anda memerlukan opsi "Conference WiFi" atau, demi nostalgia, ingin menggunakan cara lama dan mengemulasi jalur"110 Baud", kami punya kabar baik untuk Anda. Kami telah menambahkan panel Setelan baru yang memungkinkan Anda melakukan hal-hal tersebut.
Palet warna otomatis, Material, dan kustom
Baik Anda ingin membuat ulang warna ajaib atau menggunakan palet warna yang 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 ini:
- Warna Halaman — Palet ini dibuat secara otomatis dari warna yang kami temukan di CSS Anda, sehingga merupakan opsi yang bagus 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. Sekarang Anda akan menemukan semua warna primer, tetapi kita akan segera menghadirkan semua nuansa.
- Kustom — Ini adalah taman bermain Anda sendiri. Tambahkan warna baru dengan memilih salah satu warna di alat pilih, lalu klik ikon "plus" di samping palet. Urutkan ulang dengan menariknya, lalu klik kanan untuk menampilkan opsi lainnya, seperti hapus.
Sampaikan pendapat Anda, dan bagaimana kami bisa memperluas cerita tentang warna ini.
Terbaik dari lainnya
- Permintaan yang dibuat menggunakan fetch() API kini ditampilkan di Panel Jaringan
- Penyesuaian tata letak panel otomatis memastikan bahwa saat Anda mengubah ukuran panel DevTools
, panel akan menyesuaikan dengan batasan ruang baru. - Inspect Element &Device Mode memiliki sekumpulan ikon baru.
- Atribut di panel DOM kini memiliki warna yang berbeda meskipun node ditandai. (Sebelumnya semuanya berwarna putih.)
- 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 dengan lingkaran biru. (Ini analog dengan indikator oranye yang sudah kita miliki untuk memaksa status elemen seperti :hover).
Seperti biasa, sampaikan pendapat Anda melalui Twitter atau komentar di bawah, dan kirimkan bug ke crbug.com/new.
Sampai bulan depan!
Paul Bakaus & tim DevTools