Komponen Web DevTools dalam Chrome dengan OffiDocs

DESCRIPTION

Alat pembangun untuk Komponen Web dan Perpustakaan Komponen Web Komponen Web DevTools ditujukan kepada semua pembangun yang bekerja dengan Komponen Web.

Perkakas yang disediakan mencipta panel Chrome Devtools baharu, yang membolehkan melihat dengan pantas elemen tersuai pada halaman semasa dan membolehkan pengubahsuaian atribut dan sifat komponen tersebut.

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

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

Ciri-ciri: Web Component DevTools menyediakan ciri lanjutan kepada pembangun, terus dari UI penyemak imbas ke, sebagai contoh: - Menyenaraikan elemen tersuai pada halaman dan iframe yang boleh diakses di dalam halaman - Menapis elemen tersuai pada senarai - Memeriksa dan mengubah suai atribut elemen tersuai - Memeriksa dan mengubah suai sifat (walaupun objek dan tatasusunan) elemen tersuai - Memerhati peristiwa yang dihantar - Memanggil fungsi elemen tersuai, dan log nilai pulangan - Lihat kod sumber komponen web pada halaman - Berinteraksi secara langsung dengan komponen web melalui konsol kenapa? Dalam proses membangunkan Komponen Web, sama ada dengan perpustakaan seperti Lit, atau tanpa apa-apa jenis perpustakaan, terdapat situasi di mana anda mungkin mahu mempunyai sedikit kawalan ke atas komponen anda daripada apa yang devtools penyemak imbas biasa berikan kepada anda.

Anda mungkin sebagai contoh ingin: Togol Atribut elemen Togol Sifat unsur Pantau apabila acara dihantar daripada elemen Fungsi panggilan Dan apabila anda bekerja dengan Komponen Web, Shadow DOM biasanya hadir, menjadikannya agak sukar untuk mencari laluan ke elemen tersebut.

Dan walaupun anda mendapat laluan, perlu menulis dokumen.

querySelector("rentetan-pemilih saya > nama-unsur").

setAttribute("my-attr", "foo") setiap kali anda ingin mengubah suai nilai agak menyusahkan.

Untuk kes penggunaan ini, Komponen Web DevTools telah dicipta: Untuk membolehkan pembangun mengubah suai atribut, sifat dan oleh itu keadaan elemen mereka terus dari tetingkap devtools dengan klik butang.

Isu: Sebarang isu yang anda hadapi semasa menggunakan DevTools hendaklah diserahkan kepada Repositori GitHub (https://github.

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

Maklumat tambahan:

- Ditawarkan oleh Matsuuu
- Penilaian purata: 5 bintang (menyukainya)
- Pemaju Alamat emel ini telah dilindungi dari spambots. Perlukan JavaScript untuk melihatnya.

Web Component DevTools web extension disepadukan dengan OffiDocs Chromium talian