DevTools Komponen Web di Chrome dengan OffiDocs

DESKRIPSI

Peralatan pengembang untuk Komponen Web dan Pustaka Komponen Web DevTools Komponen Web ditujukan untuk semua pengembang yang bekerja dengan Komponen Web.

Perkakas yang disediakan membuat panel Chrome Devtools baru, yang memungkinkan melihat sekilas elemen khusus pada laman saat ini, dan memungkinkan modifikasi atribut dan properti komponen tersebut.

DevTools Komponen Web menggunakan Manifes Elemen Kustom (https://github.

com/webcomponents/custom-elements-manifest) untuk menganalisis Komponen Web.

Fitur: DevTools Komponen Web menyediakan fitur-fitur canggih kepada pengembang, langsung dari UI browser, misalnya: - Mencantumkan elemen khusus pada halaman, dan iframe yang dapat diakses di dalam halaman - Memfilter elemen khusus pada daftar - Memeriksa dan memodifikasi atribut dari elemen khusus - Memeriksa dan memodifikasi properti (bahkan objek dan array) elemen khusus - Mengamati peristiwa yang dikirim - Memanggil fungsi elemen khusus, dan mencatat nilai kembalian - Melihat kode sumber komponen web di halaman - Berinteraksi langsung dengan komponen web melalui konsol Mengapa? Dalam proses pengembangan Komponen Web, baik dengan perpustakaan seperti Lit, atau tanpa perpustakaan apa pun, ada situasi di mana Anda mungkin ingin memiliki kontrol lebih besar atas komponen Anda daripada yang diberikan oleh alat pengembang browser biasa.

Misalnya, Anda mungkin ingin: Mengalihkan Atribut elemen Mengalihkan Properti elemen Memantau ketika peristiwa dikirim dari elemen Memanggil fungsi Dan ketika Anda bekerja dengan Komponen Web, Shadow DOM biasanya ada, sehingga cukup sulit untuk menemukan jalur ke elemen tersebut.

Dan bahkan jika Anda mendapatkan jalannya, harus menulis dokumen.

querySelector("string-pemilih saya > nama elemen").

setAttribute("my-attr", "foo") setiap kali Anda ingin mengubah suatu nilai cukup rumit.

Untuk kasus penggunaan ini, DevTools Komponen Web dibuat: Untuk memungkinkan pengembang dengan mudah mengubah atribut, properti, dan status elemennya langsung dari jendela devtools dengan mengklik tombol.

Masalah: Masalah apa pun yang Anda alami saat menggunakan DevTools harus dikirimkan ke Repositori GitHub (https://github.

com/Matsuuu/web-component-devtools/issues).

Informasi tambahan:

- Ditawarkan oleh Matsuuu
- Peringkat rata-rata: 5 bintang (menyukainya)
- Pengembang Alamat email ini dilindungi dari robot spam. Anda perlu mengaktifkan JavaScript untuk melihatnya.

Web Alat Pengembang Komponen Web extension terintegrasi dengan OffiDocs Chromium secara online