Halo semuanya, di edisi terakhir DevTools Digest, kita dapat melihat Stack panggilan asinkron yang canggih dan beberapa lainnya. Dalam edisi ini, kita akan melihat penyaringan Panel Jaringan yang ditingkatkan (dengan pelengkapan otomatis), kemampuan mengedit dengan konten Shadow DOM, update CodeMirror 4, dan banyak lagi.
Pemfilteran panel jaringan
Anda kini dapat memfilter resource berdasarkan 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. Anda mungkin dapat merasakan manfaat ini saat perlu menemukan semua resource yang dilayani oleh domain tertentu. [crbubg.com/258421]
Mengedit konten Shadow DOM
DevTools selalu dapat mengedit HTML biasa di panel Elements, dan kemampuan ini kini memperluasnya ke bagian elemen dari Shadow DOM. [crbug.com/348991]
Mengupgrade ke CodeMirror 4.0
CodeMirror, editor teks berbasis JavaScript yang digunakan sebagai bagian dari Panel Sumber telah diupgrade ke versi 4. Sejumlah fungsi baru telah ditambahkan sebagai hasilnya. crbug.com/356878]
Penelusuran cepat untuk properti CSS
Sekarang Anda dapat menelusuri nama properti, nilai, atau pemilih aturan dari kotak penelusuran baru di panel Gaya. Hasil akan ditandai secara real time saat Anda mengetik kueri. [crbug.com/278852]
Stempel waktu di samping pesan konsol
Saat mencatat pesan secara berurutan, sebaiknya lihat waktu persis pesan dicatat. Anda dapat mengaktifkannya melalui DevTools Experiments. [crbug.com/131714]
Perincian Statistik Memori untuk snapshot heap
Saat melihat cuplikan heap yang direkam, perhatikan bagan pai stastic yang memberikan gambaran visual berkode warna tentang aspek JavaScript mana yang paling banyak menggunakan memori. Saat ini merupakan fitur eksperimental, aktifkan “Statistik snapshot heap” untuk mencobanya. [crbug.com/346335]
Melihat sumber asli console.log, bukan versi yang digabungkan
Anda mungkin memiliki fungsi wrapper console.log, tapi sayangnya di konsol semua pesan Anda berasal dari sesuatu seperti util.js:46. Sekarang Anda dapat meminta DevTools me-resolve lokasi asli Anda. Masukkan file yang menggabungkan pesan log konsol ke dalam kotak input “Lewati melangkah melalui sumber dengan nama tertentu” agar DevTools men-blackbox-nya, lalu tampilkan sumber laporan log yang sebenarnya. [crbug.com/231007]
Beberapa tambahan kecil, tetapi canggih
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 Konsol. Anda mungkin merasa ini berguna untuk alur kerja khusus keyboard di DevTools. [crbug.com/144943]Saran pelengkapan otomatis gaya batas untuk nilai (titik-titik, putus-putus, ganda, alur) telah diperbarui agar sesuai dengan spesifikasi. [crbug.com/349998]
Tombol Pulihkan default dan muat ulang **telah ditambahkan ke panel Setelan yang berfungsi persis seperti namanya. [crbug.com/135451]
Saat ini merupakan fitur eksperimental, Anda dapat mencoba dari dok ke kiri untuk menemukan kesesuaiannya dengan alur kerja Anda. Mode tata letak lainnya adalah dok ke jendela utama (kanan atau bawah) dan lepaskan dari dok ke jendela terpisah. [crbug.com/134282]
"wheel" kini ditawarkan sebagai titik henti sementara pemroses peristiwa, selain peristiwa klik, mousemove, mousedown, dll. yang biasa. [crbug.com/347562]
Sekian untuk saat ini, terima kasih telah membaca.