Export Element ви позволява да кликнете върху който и да е елемент на уебстраницата и да експортирате пълната му структура в три формата: суров HTML маркъп с всички дъщерни елементи и атрибути, изчислени CSS стилове като чист стилов файл (stylesheet) или структурирано JSON представяне. Перфектният инструмент за извличане на дизайнерски модели (patterns), запазване на кодови фрагменти (snippets) и документиране на UI компоненти.
Всеки разработчик има моменти, в които трябва да извлече код от съществуваща страница — може би това е красиво стилизиран card компонент, добре структурирана навигационна лента или оформление на формуляр, което искате да възпроизведете. Обикновено това означава щракване с десния бутон, „Inspect Element“, ръчно копиране на HTML от панела Elements, след което отделно извличане на CSS от панела Styles. Export Element обединява това в едно кликване. Изберете произволен елемент и вземете неговия пълен HTML, пълен изчислен CSS или структурирано JSON представяне — всяко в собствен раздел, форматирано и готово за използване. Експортирането на HTML включва елемента и всички негови дъщерни елементи с правилен отстъп (indentation). Експортирането на CSS показва всеки изчислен стил (не само авторските стилове), така че получавате точния външен вид, който браузърът рендира (изобразява). Извеждането в JSON предоставя структурирано представяне на данните, полезно за документация, тестове или програмен анализ.
<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>
Получете пълния HTML маркъп на избрания елемент, включително всички деца, атрибути и вложена структура. Изходът е правилно подравнен с отстъпи и форматиран — не в бъркотия на един ред, която получавате от outerHTML. Готов за поставяне в нов HTML файл или шаблон на компонент.
Извлечете всяко изчислено CSS свойство за елемента като чист, форматиран стилов файл. Включва типография, цветове, разстояния, граници, оформление (layout) и позициониране. CSS-ът е това, което браузърът действително рендира — отчитайки наследяването, спецификата(specificity) и каскадността (cascading).
Получете JSON обект, съдържащ името на тага на елемента, карта с атрибути, изчислени стилове, вътрешно текстово съдържание и рекурсивен масив от деца. Полезно за програмен анализ, документация, тестови фикстури (testing fixtures) или изграждане на персонализирани инструменти.
Превключвайте между HTML, CSS и JSON раздели мигновено. Всеки формат се генерира от един и същи избран елемент, така че можете да вземете което представяне ви трябва. И трите са винаги достъпни без повторно избиране на елемента.
Всеки формат за експортиране се показва с подчертаване на синтаксиса (syntax highlighting) в панела за визуализация. HTML тагове в червено, атрибути в жълто, стойности в зелено. CSS свойства в лилаво, стойности в зелено. JSON ключовете и стойностите също са цветово кодирани. Лесно за четене преди копиране.
Щракнете върху бутона Копиране, за да вземете съдържанието на текущия раздел. Лентата на състоянието (status bar) показва броя редове и размера в байтове на експорта, за да знаете колко съдържание копирате. Обратната връзка за потвърждение показва кога копирането е успешно.
Открихте card, секция hero или лента за навигация, която искате да възпроизведете? Щракнете върху нея, експортирайте HTML-а за структурата, след което експортирайте CSS-а за стилизирането. Имате пълна отправна точка за вашия собствен компонент.
Експортирайте елементи като JSON за документация или записи на дизайн системата. Структурираното представяне включва имена на тагове, атрибути и стилове — идеално за поддържане на инвентар с компоненти или захранване на инструменти за документация.
Имате нужда от HTML зависимости за модулни/единични тестове (unit tests)? Експортирайте HTML на елемента и го поставете във вашия тестов файл. Изходът е чист и форматиран, готов за използване като моментна снимка (DOM snapshot) за тестване на компоненти.
CSS експортът показва изчислените стилове — това, което браузърът всъщност рендира, след като са приложени всички CSS правила. Сравнете изчисления изход с вашия съставен (авторски) CSS, за да откриете конфликти на спецификата, презаписване на наследявания или неочаквани стойности по подразбиране.
Копирайте елегантни реализации от реални сайтове (production sites) в лична библиотека с фрагменти (snippets). Експортирайте заедно HTML и CSS, за да запазите целия компонент — структура и стил — за бъдещи справки.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Export Element. Курсорът се променя на селектор за прицелване и се отваря панел за експортиране с раздели.
Щракнете върху произволен елемент на страницата. Той се подчертава с лилава граница, а панелът за експортиране се попълва с HTML, CSS и JSON представянията на елемента в три раздела.
Щракнете върху раздела HTML, CSS или JSON, за да видите елемента в различни формати. Всеки раздел показва форматиран предварителен преглед с цветен синтаксис на експортираното съдържание.
Сканирайте визуализацията, за да се уверите, че съдържа това, от което се нуждаете. Щракнете върху бутона „Копиране“ (Copy), за да поставите съдържанието на текущия раздел в клипборда. Лентата на състоянието показва броя редове и размера.
Щракнете върху различен елемент на страницата, за да актуализирате панела за експортиране с ново съдържание. Няма нужда да деактивирате — продължавайте да щракате, за да експортирате множество елементи.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.