Web Component DevTools w Chrome z OffiDocs

OPIS

Narzędzia programistyczne dla składników sieci Web i bibliotek składników sieci Web Narzędzie Web Component DevTools jest przeznaczone dla wszystkich programistów pracujących ze składnikami sieci Web.

Dostarczone narzędzia tworzą nowy panel Chrome Devtools, który umożliwia szybki podgląd niestandardowych elementów na bieżącej stronie oraz umożliwia modyfikację atrybutów i właściwości wspomnianych komponentów.

Web Component DevTools wykorzystuje plik Custom Elements Manifest (https://github.

com/webcomponents/custom-elements-manifest) w celu przeanalizowania składników sieci Web.

Funkcje: Web Component DevTools zapewnia programistom zaawansowane funkcje bezpośrednio z interfejsu użytkownika przeglądarki, na przykład: - Wyświetlanie listy niestandardowych elementów na stronie i dostępnych ramek iframe na stronie - Filtrowanie niestandardowych elementów na liście - Sprawdzanie i modyfikowanie atrybutów Elementy niestandardowe — Sprawdzanie i modyfikowanie właściwości (nawet obiektów i tablic) elementów niestandardowych — Obserwowanie wysyłanych zdarzeń — Wywoływanie funkcji elementu niestandardowego i rejestrowanie zwracanych wartości — Wyświetlanie kodu źródłowego komponentów sieciowych na stronie — Bezpośrednia interakcja z komponentami sieciowymi przez konsolę Dlaczego? W procesie tworzenia Web Components, czy to z biblioteką taką jak Lit, czy bez żadnej biblioteki, zdarzają się sytuacje, w których możesz chcieć mieć nieco większą kontrolę nad swoimi komponentami niż to, co daje Ci zwykła przeglądarka devtools.

Możesz na przykład chcieć: Przełączyć atrybuty elementu Przełączyć właściwości elementu Monitorować, kiedy zdarzenia są wysyłane z elementu Wywoływać funkcje Podczas pracy z komponentami sieciowymi zwykle obecny jest Shadow DOM, co sprawia, że ​​dość trudno jest znajdź ścieżkę do elementu.

I nawet jeśli masz ścieżkę, konieczność napisania dokumentu.

querySelector("mój-łańcuch-selektora > nazwa-elementu").

setAttribute("my-attr", "foo") za każdym razem, gdy chcesz zmodyfikować wartość, jest dość uciążliwy.

W tym przypadku utworzono Web Components DevTools: Aby umożliwić programiście łatwą modyfikację atrybutów, właściwości, a tym samym stanu ich elementu bezpośrednio z okna devtools za pomocą kliknięcia przycisku.

Problemy: wszelkie problemy napotkane podczas korzystania z DevTools należy zgłaszać do repozytorium GitHub (https://github.

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

Dodatkowe informacje:

- Oferowane przez Matsuuu
- Średnia ocena: 5 gwiazdek (bardzo mi się podobało)
- Deweloper Ten adres pocztowy jest chroniony przed spamowaniem. W przeglądarce musi być włączona obsługa JavaScript, żeby go zobaczyć.

Komponent sieciowy Narzędzia deweloperskie web extension zintegrowany z OffiDocs Chromium Online