Vie elementti antaa sinulle mahdollisuuden napsauttaa mitä tahansa verkkosivun elementtiä ja viedä sen täydellinen rakenne kolmessa muodossa: raaka HTML-merkintäkoodi kaikkine lapsineen ja attribuutteineen, lasketut CSS-tyylit siistinä tyylitaulukkona tai jäsennelty JSON-esitys. Täydellinen työkalu suunnittelumallien poimimiseen, koodinpätkien tallentamiseen ja UI-komponenttien dokumentointiin.
Jokaisella kehittäjällä on hetkiä, jolloin he tarvitsevat koodin purkamista olemassa olevalta sivulta — ehkä se on kauniisti tyylitelty korttikomponentti, hyvin rakennettu navigointipalkki tai lomakerakenne, jonka haluat toistaa. Normaalisti tämä tarkoittaa hiiren oikealla napsauttamista, "Tarkasta elementti", HTML:n manuaalinen kopioiminen Elements-paneelista ja sitten CSS:n erillinen purkaminen Styles-paneelista. Vie elementti yhdistää tämän yhteen napsautukseen. Valitse mikä tahansa elementti ja saat sen täydellisen HTML:n, täydellisen lasketun CSS:n tai jäsennellyn JSON-esityksen — kukin omassa välilehdessään, muotoiltuna ja käyttövalmiina. HTML-vienti sisältää elementin ja kaikki sen lapset asianmukaisella sisennöinnillä. CSS-vienti näyttää jokaisen lasketun tyylin (ei vain kirjoitettuja tyylejä), joten saat tarkan ulkoasun, jonka selain renderöi. JSON-vienti tarjoaa jäsennellyn tietoesityksen, joka on hyödyllinen dokumentoinnissa, testauksessa tai ohjelmallisessa analysoinnissa.
<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>
Saat valitun elementin täydellisen HTML-merkintäkoodin kaikkine lapsineen, attribuutteineen ja sisäkkäisine rakenteineen. Tulostus on asianmukaisesti sisennetty ja muotoiltu — ei yksirivistä sotkua, jonka saisit outerHTML:stä. Valmis liitettäväksi uuteen HTML-tiedostoon tai komponenttitemplaattiin.
Pura jokainen laskettu CSS-ominaisuus elementille siistinä, muotoiltuna tyylitaulukkona. Sisältää typografian, värit, välistyksen, reunat, layoutin ja sijoittelun. CSS on sitä, mitä selain todella renderöi — ottaen huomioon periytymisen, spesifisyyden ja kaskaadin.
Saat JSON-objektin, joka sisältää elementin tagname-nimen, attribuuttikartan, lasketut tyylit, sisäisen tekstisisällön ja rekursiivisen lapsimatriisit. Hyödyllinen ohjelmallisessa analysoinnissa, dokumentoinnissa, testausfiktuurit tai mukautettujen työkalujen rakentamisessa.
Vaihda HTML-, CSS- ja JSON-välilehtien välillä välittömästi. Jokainen muoto generoidaan samasta valitusta elementistä, joten voit nappata tarvitsemasi esityksen. Kaikki kolme ovat aina saatavilla ilman elementin uudelleenvalintaa.
Jokainen vientimuoto näytetään syntaksikorostuksella esikatselupaneelissa. HTML-tagit punaisessa, attribuutit keltaisessa, arvot vihreässä. CSS-ominaisuudet violetissa, arvot vihreässä. JSON-avaimet ja arvot värikoodattuja. Helppo lukea ennen kopioimista.
Napsauta Kopioi-painiketta nappaamaan nykyisen välilehden sisältö. Tilapalkki näyttää viennin rivimäärän ja tavukoon, joten tiedät, kuinka paljon sisältöä kopioit. Vahvistusedon näyttää, milloin kopiointi onnistui.
Löysitkö kortin, hero-osion tai navigointipalkin, jonka haluat toistaa? Napsauta sitä, vie HTML rakennetta varten ja vie CSS tyylittelyä varten. Sinulla on täydellinen lähtökohta omalle komponentillesi.
Vie elementtejä JSON:na dokumentointia tai suunnittelujärjestelmätietueita varten. Jäsennelty esitys sisältää tagname-nimet, attribuutit ja tyylit — täydellinen komponentti-inventaarion ylläpitoon tai dokumentointityökaluihin syöttämiseen.
Tarvitsetko HTML-fiktuureja yksikkötesteille? Vie elementin HTML ja liitä se testitiedostoosi. Tulostus on siistiä ja muotoiltua, valmiina käytettäväksi DOM-tilannekuvana komponenttitestauksessa.
CSS-vienti näyttää lasketut tyylit — mitä selain todella renderöi kaikkien CSS-sääntöjen soveltamisen jälkeen. Vertaa laskettua tulostusta kirjoitettuun CSS:ääsi löytääksesi spesifisyysristiriidat, periytymisen ylikirjoitukset tai odottamattomat oletusarvot.
Kopioi tyylikkäitä toteutuksia tuotantosivustoilta henkilökohtaiseen pätkäkirjastoosi. Vie sekä HTML että CSS yhdessä säilyttääksesi täydellisen komponentin — rakenne ja tyylittely — tulevaa viitettä varten.
Avaa DevSuite Pron kelluva telakka ja napsauta Vie elementti -kuvaketta. Kohdistin muuttuu tähtäinvalitsimeksi ja välilehdillinen vientipaneeli avautuu.
Napsauta mitä tahansa sivun elementtiä. Se korostuu violetilla reunuksella ja vientipaneeli täyttyy elementin HTML-, CSS- ja JSON-esityksillä kolmessa välilehdessä.
Napsauta HTML-, CSS- tai JSON-välilehteä nähdäksesi elementin eri muodoissa. Jokainen välilehti näyttää syntaksikorostetun, muotoillun esikatselun vientilähdöstä.
Skannaa esikatselu varmistaaksesi, että se sisältää tarvitsemasi. Napsauta "Kopioi"-painiketta laittaaksesi nykyisen välilehden sisällön leikepöydällesi. Tilapalkki näyttää rivimäärän ja koon.
Napsauta eri elementtiä sivulla päivittääksesi vientipaneelin uudella sisällöllä. Ei tarvetta deaktivoida — jatka napsauttamista viedäksesi useita elementtejä.
Asenna DevSuite Pro ilmaiseksi ja avaa yli 39 kehittäjätyökalua selaimellesi.