Halaman ini diterjemahkan oleh Cloud Translation API.

Ringkasan DevTools Desember 2013

Umar Hansa

Sejumlah fitur yang diperbarui telah masuk ke Chrome DevTools baru-baru ini, beberapa kecil, beberapa besar. Kita akan memulai dengan pembaruan panel Elemen, lalu beralih untuk membahas Konsol, Linimasa, dan lainnya.

Aturan gaya yang dinonaktifkan disalin sebagai dikomentari

Menyalin seluruh aturan CSS di panel Gaya kini akan menyertakan gaya yang Anda nonaktifkan, gaya tersebut akan ada di papan klip Anda sebagai komentar. [crbug.com/316532]

Salin sebagai jalur CSS

'Salin sebagai jalur CSS' kini tersedia sebagai item menu untuk node DOM di panel Elemen (mirip dengan item menu Salin XPath).

Pembuatan pemilih CSS tidak harus terbatas pada stylesheet/JavaScript Anda, tetapi juga dapat menjadi alternatif untuk strategi pencari di pengujian WebDriver. [crbug.com/277286]

Melihat gaya elemen Shadow DOM

Gaya elemen turunan root bayangan kini dapat diperiksa. [crbug.com/279390]

copy() konsol berfungsi untuk objek

Metode copy() dari Command Line API kini berfungsi untuk objek. Coba masukkan copy({foo:'bar'}) ke panel Konsol dan perhatikan bagaimana versi objek yang di-stringifikasi dan diformat kini ada di papan klip Anda. [crbug.com/289348]

Filter ekspresi reguler untuk konsol

Memfilter pesan konsol menggunakan ekspresi reguler di panel Konsol. crbug.com/318308]

Menghapus pemroses peristiwa dengan mudah

Coba getEventListeners(document).mousewheel[0]; di panel Konsol untuk mengambil pemroses peristiwa roda mouse pertama pada dokumen. Lanjutkan dari sini, coba $_.remove(); untuk menghapus pemroses peristiwa tersebut ($_ = nilai ekspresi yang dievaluasi terakhir). 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 penerapan lebih andal terhadap CSS di dunia nyata, termasuk peretasan browser. crbug.com/309982]

Operasi linimasa yang diringkas dalam diagram lingkaran

Panel Linimasa kini berisi diagram lingkaran di panel Detail yang secara visual menunjukkan sumber biaya rendering Anda. Hal ini membantu Anda mengidentifikasi bottleneck secara sekilas.

Anda akan menemukan bahwa sebagian besar informasi yang sebelumnya ditampilkan di popover kini telah dipromosikan ke panelnya sendiri. Untuk melihat, mulai perekaman Linimasa dan pilih frame, perhatikan panel Detail baru yang berisi diagram lingkaran. Saat berada dalam tampilan Frame, 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 Linimasa kini 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 pada thread utama. crbug.com/305863]

Jeda pada pemroses popstate

'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 kini menampilkan sejumlah panel, salah satunya adalah panel Rendering, gunakan untuk menampilkan persegi panjang cat, pengukur FPS, dll. Ini diaktifkan secara default di Setelan > "Tampilkan tampilan 'Rendering' di panel samping konsol"

Menyalin gambar sebagai URL data

Konten aset gambar di panel Resource kini dapat disalin sebagai URI data (data:image/png;base64,iVBO...).

Untuk mencobanya, temukan resource gambar dalam Frame > [Resource] > Gambar, lalu klik kanan pada pratinjau gambar untuk mengakses menu konteks, lalu pilih 'Salin Gambar sebagai URL Data'. crbug.com/321132]

Pemfilteran URI data

Jika Anda tidak pernah menganggapnya sebagai bagian dari tab Jaringan, URI Data kini dapat difilter. Pilih ikon Filter

untuk melihat jenis filter resource lainnya. crbug.com/313845]