Eksportuj element pozwala kliknąć dowolny element na stronie i wyeksportować jego kompletną strukturę w trzech formatach: surowy znacznik HTML ze wszystkimi dziećmi i atrybutami, obliczone style CSS jako czysty arkusz stylów lub uporządkowaną reprezentację JSON. Idealne narzędzie do wyodrębniania wzorców projektowych, zapisywania fragmentów kodu i dokumentowania komponentów UI.
Każdy programista ma momenty, gdy musi wyodrębnić kod z istniejącej strony — może to pięknie wystylizowany komponent karty, dobrze ustrukturyzowany pasek nawigacyjny lub układ formularza, który chcesz odtworzyć. Zwykle oznacza to kliknięcie prawym, "Zbadaj element", ręczne kopiowanie HTML z panelu Elements, a następnie oddzielne wyodrębnienie CSS z panelu Styles. Eksportuj element konsoliduje to w jednym kliknięciu. Wybierz dowolny element i uzyskaj jego kompletny HTML, pełne obliczone CSS lub uporządkowaną reprezentację JSON — każde na własnej karcie, sformatowane i gotowe do użycia. Eksport HTML zawiera element i wszystkie jego dzieci z prawidłowym wcięciem. Eksport CSS pokazuje każdy obliczony styl (nie tylko napisane style), więc otrzymujesz dokładny wygląd, który renderuje przeglądarka. Eksport JSON zapewnia uporządkowaną reprezentację danych przydatną do dokumentacji, testowania lub analizy programowej.
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
Uzyskaj kompletny znacznik HTML wybranego elementu, w tym wszystkie dzieci, atrybuty i zagnieżdżoną strukturę. Wynik jest prawidłowo wcięty i sformatowany — nie jest to jednoliniowy bałagan, który dostajesz z outerHTML. Gotowe do wklejenia do nowego pliku HTML lub szablonu komponentu.
Wyodrębnij każdą obliczoną właściwość CSS dla elementu jako czysty, sformatowany arkusz stylów. Obejmuje typografię, kolory, odstępy, ramki, układ i pozycjonowanie. CSS jest tym, co naprawdę renderuje przeglądarka — uwzględniając dziedziczenie, specyficzność i kaskadowanie.
Uzyskaj obiekt JSON zawierający nazwę tagu elementu, mapę atrybutów, obliczone style, zawartość tekstu wewnętrznego i rekurencyjną tablicę dzieci. Przydatne do analizy programowej, dokumentacji, fixturów testowych lub budowania niestandardowych narzędzi.
Przełączaj się między kartami HTML, CSS i JSON natychmiast. Każdy format jest generowany z tego samego wybranego elementu, więc możesz pobrać dowolną potrzebną reprezentację. Wszystkie trzy są zawsze dostępne bez ponownego wybierania elementu.
Każdy format eksportu jest wyświetlany z podświetleniem składni w panelu podglądu. Tagi HTML w czerwonym, atrybuty w żółtym, wartości w zielonym. Właściwości CSS w fioletowym, wartości w zielonym. Klucze i wartości JSON są kodowane kolorami. Łatwe do odczytania przed kopiowaniem.
Kliknij przycisk Kopiuj, aby pobrać zawartość bieżącej karty. Pasek stanu pokazuje liczbę wierszy i rozmiar bajtowy eksportu, więc wiesz, ile zawartości kopiujesz. Potwierdzenie pokazuje, kiedy kopiowanie się powiedzie.
Znalazłeś kartę, sekcję hero lub pasek nawigacyjny, który chcesz odtworzyć? Kliknij go, wyeksportuj HTML dla struktury, a następnie wyeksportuj CSS dla stylizacji. Masz kompletny punkt wyjścia dla własnego komponentu.
Eksportuj elementy jako JSON do dokumentacji lub rekordów systemu projektowego. Uporządkowana reprezentacja zawiera nazwy tagów, atrybuty i style — idealne do utrzymywania inwentarza komponentów lub zasilania narzędzi dokumentacji.
Potrzebujesz fixturów HTML do testów jednostkowych? Wyeksportuj HTML elementu i wklej go do swojego pliku testowego. Wynik jest czysty i sformatowany, gotowy do użycia jako snapshot DOM do testowania komponentów.
Eksport CSS pokazuje obliczone style — to, co faktycznie renderuje przeglądarka po zastosowaniu wszystkich reguł CSS. Porównaj obliczony wynik z napisanym CSS, aby znaleźć konflikty specyficzności, nadpisania dziedziczenia lub nieoczekiwane wartości domyślne.
Kopiuj eleganckie implementacje z produkcyjnych stron do osobistej biblioteki fragmentów. Eksportuj HTML i CSS razem, aby zachować kompletny komponent — strukturę i stylizację — do przyszłego odniesienia.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Eksportuj element. Kursor zmienia się w celownik, a otwiera się panel eksportu z kartami.
Kliknij dowolny element na stronie. Zostanie podświetlony fioletową ramką, a panel eksportu wypełni się reprezentacjami HTML, CSS i JSON elementu na trzech kartach.
Kliknij kartę HTML, CSS lub JSON, aby wyświetlić element w różnych formatach. Każda karta pokazuje sformatowany podgląd zawartości eksportu z podświetleniem składni.
Przejrzyj podgląd, aby upewnić się, że zawiera to, czego potrzebujesz. Kliknij przycisk "Kopiuj", aby umieścić zawartość bieżącej karty w schowku. Pasek stanu pokazuje liczbę wierszy i rozmiar.
Kliknij inny element na stronie, aby zaktualizować panel eksportu nową zawartością. Nie ma potrzeby dezaktywacji — klikaj dalej, aby eksportować wiele elementów.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.