Exportovat prvek vám umožňuje kliknout na libovolný prvek na webové stránce a exportovat jeho kompletní strukturu ve třech formátech: surový HTML kód se všemi potomky a atributy, vypočítané styly CSS jako čistý stylesheet nebo strukturovaná reprezentace JSON. Perfektní nástroj pro extrahování návrhových vzorů, ukládání fragmentů kódu a dokumentování komponent uživatelského rozhraní.
Každý vývojář má okamžiky, kdy potřebuje extrahovat kód z existující stránky — třeba to je krásně stylizovaná komponenta karty, dobře strukturovaná navigační lišta nebo rozvržení formuláře, které chcete replikovat. Normálně to znamená kliknout pravým tlačítkem, "Zkontrolovat prvek", ručně kopírovat HTML z panelu Prvky a poté samostatně extrahovat CSS z panelu Styly. Exportovat prvek to vše konsoliduje do jednoho kliknutí. Vyberte libovolný prvek a získejte jeho kompletní HTML, úplné vypočítané CSS nebo strukturovanou reprezentaci JSON — každý ve vlastní záložce, naformátovaný a připravený k použití. Export HTML zahrnuje prvek a všechny jeho potomky se správným odsazením. Export CSS zobrazuje každou vypočítanou vlastnost stylu (nejen autorské styly), takže získáte přesný vzhled, který prohlížeč vykresluje. Export JSON poskytuje strukturovanou datovou reprezentaci užitečnou pro dokumentaci, testování nebo programovou analýzu.
<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>
Získejte kompletní HTML kód vybraného prvku včetně všech potomků, atributů a vnořené struktury. Výstup je správně odsazen a naformátován — ne jednořádkový chaos, který dostanete z outerHTML. Připraveno k vložení do nového HTML souboru nebo šablony komponenty.
Extrahujte každou vypočítanou vlastnost CSS pro prvek jako čistý, naformátovaný stylesheet. Zahrnuje typografii, barvy, mezery, ohraničení, rozvržení a pozicování. CSS je to, co prohlížeč skutečně vykresluje — s ohledem na dědičnost, specificitu a kaskádování.
Získejte JSON objekt obsahující název tagu prvku, mapu atributů, vypočítané styly, textový obsah a rekurzivní pole potomků. Užitečné pro programovou analýzu, dokumentaci, testovací přípravky nebo budování vlastních nástrojů.
Okamžitě přepínejte mezi záložkami HTML, CSS a JSON. Každý formát je generován ze stejného vybraného prvku, takže můžete získat libovolnou reprezentaci, kterou potřebujete. Všechny tři jsou vždy dostupné bez nutnosti znovu vybírat prvek.
Každý formát exportu je zobrazen se zvýrazněním syntaxe v náhledovém panelu. HTML tagy červeně, atributy žlutě, hodnoty zeleně. Vlastnosti CSS fialově, hodnoty zeleně. Klíče a hodnoty JSON jsou barevně odlišeny. Snadno čitelné před kopírováním.
Kliknutím na tlačítko Kopírovat přenesete obsah aktuální záložky. Stavový řádek zobrazuje počet řádků a velikost exportu v bajtech, takže víte, kolik obsahu kopírujete. Potvrzovací zpětná vazba se zobrazí, když kopírování proběhne úspěšně.
Našli jste kartu, sekci hrdiny nebo navigační lištu, kterou chcete replikovat? Klikněte na ni, exportujte HTML pro strukturu a poté exportujte CSS pro stylizaci. Máte kompletní výchozí bod pro vlastní komponentu.
Exportujte prvky jako JSON pro dokumentaci nebo záznamy návrhového systému. Strukturovaná reprezentace zahrnuje názvy tagů, atributy a styly — ideální pro udržování inventáře komponent nebo pro napájení dokumentačních nástrojů.
Potřebujete HTML přípravky pro unit testy? Exportujte HTML prvku a vložte ho do testovacího souboru. Výstup je čistý a naformátovaný, připravený k použití jako snímek DOM pro testování komponent.
Export CSS zobrazuje vypočítané styly — to, co prohlížeč skutečně vykresluje po aplikaci všech pravidel CSS. Porovnejte vypočítaný výstup s vašimi autorskými styly CSS a najděte konflikty specificity, přepsání dědičnosti nebo neočekávané výchozí hodnoty.
Kopírujte elegantní implementace z produkčních webů do osobní knihovny fragmentů. Exportujte HTML i CSS společně pro zachování kompletní komponenty — struktury i stylizace — pro budoucí referenci.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Exportovat prvek. Kurzor se změní na zaměřovač a otevře se exportní panel se záložkami.
Klikněte na libovolný prvek na stránce. Zvýrazní se fialovým ohraničením a exportní panel se naplní HTML, CSS a JSON reprezentacemi prvku ve třech záložkách.
Kliknutím na záložku HTML, CSS nebo JSON zobrazíte prvek v různých formátech. Každá záložka zobrazuje náhled exportního obsahu se zvýrazněním syntaxe a naformátovaný.
Prohlédněte si náhled a ujistěte se, že obsahuje to, co potřebujete. Kliknutím na tlačítko "Kopírovat" přenesete obsah aktuální záložky do schránky. Stavový řádek zobrazuje počet řádků a velikost.
Klikněte na jiný prvek na stránce a aktualizujte exportní panel novým obsahem. Není třeba deaktivovat — pokračujte v klikání pro export více prvků.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.