Az Elem exportálása eszközzel bármely weboldal-elemre kattintva exportálhatod annak teljes szerkezetét három formátumban: nyers HTML jelölés az összes gyermekelelemmel és attribútummal, számított CSS stílusok tiszta stíluslapként, vagy strukturált JSON reprezentáció. Tökéletes eszköz dizájnminták kinyeréséhez, kódrészletek mentéséhez és UI komponensek dokumentálásához.
Minden fejlesztőnek vannak olyan pillanatai, amikor kódot kell kinyernie egy meglévő oldalból — legyen az egy szépen stílusozott kártya komponens, egy jól strukturált navigációs sáv, vagy egy form elrendezés, amelyet szeretne lemásolni. Általában ez jobb kattintást, az "Elem vizsgálata" lehetőséget, az HTML manuális másolását az Elements panelből, majd a CSS külön kinyerését a Styles panelből jelenti. Az Elem exportálása ezt egyetlen kattintásba sűríti. Válassz ki bármely elemet, és megkapod a teljes HTML-t, a teljes számított CSS-t, vagy egy strukturált JSON reprezentációt — mindegyiket saját fülön, formázva és készen a felhasználásra. A HTML export tartalmazza az elemet és az összes gyermekelemét megfelelő behúzással. A CSS export minden számított stílust megmutat (nem csak az írt stílusokat), így pontosan azt a megjelenést kapod, amelyet a böngésző renderel. A JSON export strukturált adatreprezentációt nyújt, amely hasznos dokumentáláshoz, teszteléshez vagy programmatikus elemzéshez.
<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>
Megkapod a kiválasztott elem teljes HTML jelölését, beleértve az összes gyermekelemet, attribútumot és beágyazott struktúrát. A kimenet megfelelően van behúzva és formázva — nem az egysoros zűrzavar, amelyet az outerHTML ad. Kész beillesztésre egy új HTML fájlba vagy komponens sablonba.
Kinyered az elem összes számított CSS tulajdonságát tiszta, formázott stíluslapként. Tartalmaz tipográfiát, színeket, térközöket, kereteket, elrendezést és pozicionálást. A CSS az, amit a böngésző valójában renderel — figyelembe véve az öröklést, a specifikusságot és a kaszkádolást.
Kapsz egy JSON objektumot, amely tartalmazza az elem tag nevét, attribútumtérképét, számított stílusait, belső szövegtartalmát és egy rekurzív gyermektömböt. Hasznos programmatikus elemzéshez, dokumentáláshoz, tesztelési adatokhoz vagy egyéni eszközök készítéséhez.
Válts a HTML, CSS és JSON fülek között azonnal. Minden formátum ugyanabból a kiválasztott elemből generálódik, így bármelyik szükséges reprezentációt megragadhatod. Mindhárom mindig elérhető anélkül, hogy újra kellene kiválasztani az elemet.
Minden exportálási formátum szintaxiskiemelőssel jelenik meg az előnézeti panelen. HTML tagek pirossal, attribútumok sárgával, értékek zölddel. CSS tulajdonságok lilával, értékek zölddel. JSON kulcsok és értékek színkódolva. Könnyen olvasható másolás előtt.
Kattints a Másolás gombra az aktuális fül tartalmának megragadásához. Egy állapotsor mutatja az export sorainak számát és bájt méretét, így tudod, mennyi tartalmat másolsz. Visszajelzés jelenik meg, amikor a másolás sikerül.
Találtál egy kártyát, hős szekciót vagy navigációs sávot, amelyet le szeretnél másolni? Kattints rá, exportáld a HTML-t a struktúráért, majd exportáld a CSS-t a stílusért. Teljes kiindulópontot kapsz a saját komponensedhez.
Exportáld az elemeket JSON formátumban dokumentáláshoz vagy dizájnrendszer nyilvántartáshoz. A strukturált reprezentáció tartalmazza a tag neveket, attribútumokat és stílusokat — tökéletes egy komponensleltár karbantartásához vagy dokumentációs eszközökbe való betápláláshoz.
HTML adatokra van szükséged unit tesztekhez? Exportáld az elem HTML-jét és illeszd be a tesztfájlodba. A kimenet tiszta és formázott, készen áll DOM pillanatkép használatára komponens teszteléshez.
A CSS export megmutatja a számított stílusokat — amit a böngésző valójában renderel az összes CSS szabály alkalmazása után. Hasonlítsd össze a számított kimenetet az általad írt CSS-sel, hogy megtaláld a specifikusság-konfliktusokat, öröklési felülírásokat vagy váratlan alapértelmezett értékeket.
Másolj elegáns megvalósításokat éles oldalakról egy személyes kódrészlet-könyvtárba. Exportáld a HTML-t és a CSS-t együtt a teljes komponens megőrzéséhez — struktúrával és stílussal együtt — jövőbeli referenciának.
Nyisd meg a DevSuite Pro lebegő dokkolóját, és kattints az Elem exportálása ikonra. A kurzor célkeresztre változik, és egy füles exportálási panel nyílik meg.
Kattints bármely elemre az oldalon. Lila kerettel kiemelkedik, és az exportálási panel feltöltődik az elem HTML, CSS és JSON reprezentációival három fülön.
Kattints a HTML, CSS vagy JSON fülre az elem megtekintéséhez különböző formátumokban. Minden fül szintaxiskiemelt, formázott előnézetet mutat az exportált tartalomról.
Nézd át az előnézetet, hogy megbizonyosodj arról, tartalmazza, amit szükséged van. Kattints a "Másolás" gombra az aktuális fül tartalmának a vágólapra helyezéséhez. Az állapotsor mutatja a sorok számát és a méretet.
Kattints egy másik elemre az oldalon az exportálási panel frissítéséhez új tartalommal. Nem kell deaktiválni — csak kattintgass tovább több elem exportálásához.
Telepítse ingyen a DevSuite Pro-t, és oldjon fel 39+ fejlesztői eszközt böngészőjéhez.