Halaman ini diterjemahkan oleh Cloud Translation API.

Ringkasan DevTools Desember 2013

Umar Hansa

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]