GrabCSS: Wyodrębnij czysty HTML i CSS z dowolnego elementu sieci
GrabCSS, autorstwa Schneidera Damiena, to rozszerzenie Chrome do szybkiego wyodrębniania kodu komponentów z żywych stron internetowych. Kopiuje czysty, sformatowany HTML i CSS, gdy najedziesz na element, rozwiązując zmienne CSS i dziedziczone zasady, aby wynik działał samodzielnie do prototypowania, audytowania i nauki. Możliwości obejmują Scoped CSS, Inline Styles, wyjście Tailwind, przechwytywanie animacji i pseudo-stanów, nawigację po DOM za pomocą klawiatury oraz kontrole kontrastu WCAG. Narzędzie jest skierowane do programistów front-end, projektantów UI/UX, audytorów stron internetowych oraz studentów potrzebujących szybko czytelnego kodu komponentów.
Produkuje zwięzły, czytelny dla ludzi CSS poprzez pominięcie obliczonego szumu
GrabCSS wydobywa skoncentrowane reguły zamiast długiej listy obliczonych właściwości wyświetlanych w panelach inspektora przeglądarki. Rozszerzenie rozwiązuje zmienne CSS i dziedziczone deklaracje, dzięki czemu fragmenty działają samodzielnie, a formatowanie wyjścia dostosowuje się do powszechnych przepływów pracy. Warianty wyjścia obejmują opcję CSS z zakresem, która używa czystych nazw klas, opcję stylów wbudowanych oraz opcję klas Tailwind CSS, co ułatwia dostosowanie wklejonych komponentów w porównaniu do surowych obliczonych stylów.
Obsługuje precyzyjny wybór i szybkie przechwytywanie kodu za pomocą kontroli za pomocą myszy i klawiatury
Picker wyświetla pływający panel, gdy jest aktywny, pozwalając na inspekcję elementów przez najechanie i skopiowanie sformatowanego kodu jednym kliknięciem. Nawigacja po DOM za pomocą klawiatury używa strzałek w górę i w dół do poruszania się między elementami rodzica i dziecka w celu precyzyjnego celowania. Ekstraktor przechwytuje animacje, przejścia i pseudo-stany, takie jak :hover, a kontrole kontrastu WCAG są uruchamiane na najechanych elementach tekstowych, aby wspierać podstawowy przegląd dostępności.
Przetwarza lokalnie, pasuje do przepływów pracy Chromium i działa jako lekka alternatywa dla DevTools
Wszystkie przetwarzanie odbywa się w przeglądarce bez zbierania danych zewnętrznych i bez wymagania konta, dzięki czemu przechwyty pozostają na maszynie. Rozszerzenie instaluje się w Chrome i innych przeglądarkach opartych na Chromium, takich jak Microsoft Edge i Brave, co ułatwia dodanie do istniejących ustawień deweloperskich. Deweloper przedstawia narzędzie jako lekką alternatywę dla przeszukiwania DevTools, chwaloną za szybkie, czyste wyjście. Brak synchronizacji opartej na koncie oznacza, że centralne udostępnianie fragmentów wymaga osobnych kroków.
Praktyczny wybór dla indywidualnych przepływów pracy, z kompromisami dla udostępniania zespołowego
GrabCSS to pragmatyczny wybór dla indywidualnych praktyków front-end i studentów, którzy potrzebują kompaktowych, edytowalnych fragmentów komponentów na jednym urządzeniu. Jego projekt tylko w przeglądarce sprzyja lokalnej kontroli i szybkiemu wydobywaniu, chociaż ten sam projekt oznacza, że nie zapewnia synchronizacji opartej na koncie dla bibliotek zespołowych lub wielourządzeniowych. Wybierz go do szybkiego, ręcznego przechwytywania; polegaj na osobnej wspólnej bibliotece, gdy wymagana jest współpraca w dystrybucji.
