Bulan ini banyak fitur baru 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 WiFi konferensi dengan profil jaringan yang dapat disesuaikan, dan cara mendapatkan hasil maksimal dari 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, 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, di 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 dok, kami telah menambahkan penelusuran file akses cepat, pintasan, dan bantuan (yang 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 hal berikut:
- Warna Halaman — Palet ini dibuat secara otomatis dari warna yang kami temukan di CSS Anda, sehingga menjadi opsi yang bagus jika Anda memperluas situs yang ada.
- Desain Material — Palet Desain Material menawarkan warna yang indah dan merupakan pilihan ideal saat memulai project baru. Saat ini, Anda akan menemukan semua warna primer, tetapi kami 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.
Beri tahu kami pendapat Anda, dan cara kami dapat memperluas cerita warna lebih lanjut.
Yang terbaik dari yang lain
- 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. - Periksa Elemen & Mode Perangkat memiliki serangkaian 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