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).
![Salin jalur CSS.](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/copy-css-path-3596165fe610e.jpg?hl=id)
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
![Diagram operasi linimasa](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/timeline-operations-chart-71e05f5fa3902.jpg?hl=id)
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.
![Detail pengubahan ukuran gambar](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/image-resize-details-8312bd6dac876.jpg?hl=id)
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
![Salin gambar sebagai url data](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/copy-image-data-url-a3bf915b4e1fa.jpg?hl=id)
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
![Ikon filter](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/filter-icon-779917bafa1db.jpg?hl=id)
![Pemfilteran URI Data](https://developer.chrome.com/static/blog/devtools-digest-december-2013/image/data-uri-filtering-50a6aa8bd06e4.jpg?hl=id)
Bug Waktu Jaringan diperbaiki
Kami mohon maaf jika Anda melihat gambar Anda yang tampaknya memerlukan waktu 300.000 tahun untuk diunduh. ;) Pengaturan waktu yang salah untuk resource jaringan ini kini telah diperbaiki. crbug.com/309570]
Perilaku perekaman jaringan memiliki lebih banyak kontrol
Perilaku perekaman jaringan sedikit berbeda. Pertama, tombol rekam berfungsi seperti yang Anda harapkan dari Timeline atau profil CPU. Dan karena Anda sudah mengharapkannya, jika Anda memuat ulang halaman saat DevTools terbuka, perekaman jaringan akan otomatis dimulai. Setelan ini akan dinonaktifkan. Jadi, jika Anda ingin merekam aktivitas jaringan setelah pemuatan halaman, aktifkan fitur tersebut. Tindakan ini mempermudah visualisasi waterfall tanpa permintaan jaringan yang terlambat mengganggu hasil. crbug.com/325878]
Tema DevTools kini tersedia melalui ekstensi
Stylesheet pengguna kini tersedia melalui DevTools Eksperimen (kotak centang: "Izinkan tema UI kustom") yang memungkinkan ekstensi Chrome menerapkan gaya visual kustom ke DevTools. Lihat Contoh Ekstensi Tema DevTools untuk mengetahui contohnya. crbug.com/318566]
sekian untuk edisi ringkasan DevTools ini. Jika Anda belum melakukannya, lihat edisi November.