Halo, di edisi terakhir DevTools Digest, kita harus memeriksa stack panggilan Asinkron yang canggih dan beberapa lainnya. Dalam edisi ini, kita akan melihat peningkatan pemfilteran Panel Jaringan (dengan pelengkapan otomatis), kemampuan edit dengan konten Shadow DOM, update CodeMirror 4, dan banyak lagi.
Pemfilteran panel jaringan
Kini Anda dapat memfilter resource menurut kolom tertentu, seperti Domain. Salah satu format filter adalah: Domain:website.com. Selain pemfilteran, Anda juga mendapatkan saran pelengkapan otomatis untuk nilai filter yang valid yang diperbarui secara real time saat Anda mengetik kueri. Hal ini mungkin berguna ketika Anda perlu mencari semua sumber daya yang dilayani oleh domain tertentu. [crbubg.com/258421]
Edit konten Shadow DOM
DevTools selalu dapat mengedit HTML reguler di panel Elements, kemampuan ini sekarang diperluas ke bagian elemen Shadow DOM. [crbug.com/348991]
Mengupgrade ke CodeMirror 4.0
CodeMirror, editor teks berbasis JavaScript yang digunakan sebagai bagian dari Panel Sources telah diupgrade ke versi 4. Sekelompok fungsi baru telah ditambahkan sebagai hasilnya. crbug.com/356878]
Penelusuran cepat untuk properti CSS
Anda kini dapat menelusuri nama properti, nilai, atau pemilih aturan dari kotak penelusuran baru di panel Styles. Hasil akan disorot secara real-time saat Anda mengetik kueri. [crbug.com/278852]
Stempel waktu di samping pesan konsol
Saat mencatat pesan secara berurutan, melihat waktu yang tepat saat pesan dicatat di dalam log. Anda dapat mengaktifkannya melalui DevTools Experiments. [crbug.com/131714]
Perincian Statistik Memori untuk snapshot heap
Saat melihat cuplikan heap yang direkam, perhatikan diagram lingkaran stastic yang memberikan ringkasan visual berkode warna tentang aspek JavaScript yang paling banyak memakan memori. Saat ini merupakan fitur eksperimental, aktifkan “Heap snapshot statistics” untuk mencobanya. [crbug.com/346335]
Melihat sumber asli console.log, bukan versi yang digabungkan
Anda mungkin memiliki fungsi wrapper console.log, tetapi sayangnya di konsol semua pesan Anda berasal dari sesuatu seperti util.js:46. Sekarang Anda bisa meminta DevTools untuk me-resolve lokasi asli Anda. Masukkan file yang menggabungkan pesan log konsol ke dalam kotak input "Skip melangkah melalui sumber dengan nama tertentu" untuk membuat DevTools melakukan {i>blackbox<i}, kemudian menampilkan sumber pernyataan log yang sebenarnya. [crbug.com/231007]
Beberapa tambahan kecil, tapi kuat
Muat ulang panel Pemroses Peristiwa di Panel Elemen, setelah menambahkan atau menghapus pemroses peristiwa JavaScript secara dinamis. [crbug.com/341044]
Anda dapat menggunakan
Ctrl+untuk mendapatkan fokus pada input Console. Hal ini mungkin berguna untuk alur kerja khusus keyboard di DevTools. [crbug.com/144943]saran pelengkapan otomatis gaya batas untuk nilai (titik, garis putus-putus, ganda, alur) telah diperbarui agar sesuai dengan spesifikasi. [crbug.com/349998]
Tombol Restore default and reload **telah ditambahkan ke panel Settings (Setelan) yang berfungsi persis seperti yang tertulis di kaleng. [crbug.com/135451]
Saat ini sebagai fitur eksperimental, Anda dapat mencoba pasang ke kiri untuk mengetahui kesesuaiannya dengan alur kerja Anda. Mode tata letak lainnya adalah mengaitkan ke jendela utama (kanan atau bawah) dan melepaskan dari dok ke jendela terpisah. [crbug.com/134282]
"wheel" kini ditawarkan sebagai titik henti sementara pemroses peristiwa, sebagai tambahan untuk peristiwa klik, mousemove, mousedown, dll. yang biasa. [crbug.com/347562]
Sekian untuk saat ini. Terima kasih telah membaca.