Sejumlah fitur yang diperbarui telah berhasil masuk ke Chrome DevTools baru-baru ini. Beberapa fitur kecil, ada juga yang besar. Kita akan memulai dengan pembaruan panel Elemen dan melanjutkan dengan membahas Konsol, Linimasa, dan lainnya.
Salin aturan gaya yang dinonaktifkan sebagai dijadikan komentar
Menyalin seluruh aturan CSS di panel Styles kini akan menyertakan gaya yang Anda nonaktifkan. Gaya tersebut akan ada di papan klip sebagaimana diberi komentar. [crbug.com/316532]
Salin sebagai jalur CSS
'Copy as CSS path' sekarang tersedia sebagai item menu untuk node DOM di panel Elements (serupa dengan item menu Copy XPath).
Pembuatan pemilih CSS tidak harus terbatas pada stylesheet/JavaScript Anda, alat ini juga dapat menjadi alternatif untuk strategi pencari lokasi dalam pengujian WebDriver. [crbug.com/277286]
Melihat gaya elemen DOM Bayangan
Elemen turunan root bayangan kini dapat diperiksa gayanya. [crbug.com/279390]
Copy() konsol berfungsi untuk objek
Metode copy() dari Command Line API sekarang berfungsi untuk objek. Lanjutkan dan coba copy({foo:'bar'})
ke panel Console dan perhatikan bagaimana versi objek yang distringifikasi dan diformat kini ada di papan klip Anda. [crbug.com/289348]
Filter Regex untuk konsol
Filter pesan konsol menggunakan ekspresi reguler di panel Konsol. crbug.com/318308]
Menghapus pemroses peristiwa dengan mudah
Coba getEventListeners(document).mousewheel[0];
di panel Console untuk mengambil pemroses peristiwa roda mouse pertama pada dokumen. Setelah ini, coba $_.remove()
; untuk menghapus pemroses peristiwa tersebut ($_
= nilai ekspresi yang terakhir dievaluasi). crbug.com/309524]
Penghapusan peringatan CSS
Peringatan bergaya "Nilai properti CSS tidak valid" yang mungkin Anda lihat kini telah dihapus. Ada upaya berkelanjutan untuk membuat implementasi tersebut lebih tangguh terhadap CSS dunia nyata, termasuk peretasan browser. crbug.com/309982]
Operasi linimasa diringkas dalam diagram lingkaran
Panel Timeline kini berisi diagram lingkaran di panel Details yang secara visual menunjukkan sumber biaya rendering - ini membantu Anda mengidentifikasi bottleneck Anda dengan cepat.
Anda akan melihat bahwa sebagian besar informasi yang sebelumnya ditampilkan di jendela pop-up kini telah dipromosikan ke panelnya sendiri. Untuk melihat, mulai perekaman Timeline dan pilih bingkai, perhatikan panel Details baru yang berisi diagram lingkaran. Saat dalam tampilan Frames, Anda akan mendapatkan statistik menarik seperti FPS rata-rata (1000ms/frame duration
) untuk frame yang dipilih. [crbug.com/247786]
Detail peristiwa pengubahan ukuran gambar
Peristiwa pengubahan ukuran dan dekode gambar di panel Garis Waktu sekarang berisi link ke node DOM di panel Elemen.
Link URL Gambar akan mengarahkan Anda ke resource yang sesuai di Panel Resource. crbug.com/244159]
Frame GPU
Frame yang terjadi di GPU kini ditampilkan di bagian atas, di atas frame di thread utama. crbug.com/305863]
Berhenti menggunakan pemroses pop-state
'popstate' kini tersedia sebagai titik henti sementara pemroses peristiwa di sidebar panel Sumber. [crbug.com/88112]
Setelan rendering yang tersedia di panel samping
Membuka panel samping sekarang menyajikan sejumlah panel, salah satunya adalah panel Rendering, menggunakannya untuk menampilkan persegi panjang paint, FPS meter, dll. Ini diaktifkan secara default di Settings > "Show 'Rendering' view in console drawer"
Salin gambar sebagai URL data
Aset gambar di panel Resources kini dapat menyalin kontennya sebagai URI data (data:image/png;base64,iVBO...
).
Untuk mencoba ini, temukan aset gambar dalam Frames > [Resource] > Gambar dan klik kanan pada pratinjau gambar untuk mengakses menu konteks, lalu pilih 'Copy Gambar sebagai Data URL'. crbug.com/321132]
Pemfilteran URI Data
Jika Anda tidak pernah menganggapnya sesuai, Data URI sekarang dapat disaring dari tab Jaringan. Pilih ikon Filter
untuk melihat jenis filter resource lainnya. crbug.com/313845]