← بازگشت به ویژگی‌ها
Pro

صادر کردن عنصر

صادر کردن عنصر به شما اجازه می‌دهد روی هر عنصری در یک صفحه وب کلیک کنید و ساختار کامل آن را در سه فرمت صادر کنید: markup HTML خام با همه فرزندان و ویژگی‌ها، استایل‌های CSS محاسبه‌شده به عنوان stylesheet تمیز، یا یک نمایش ساختاریافته JSON.

هر توسعه‌دهنده‌ای لحظاتی دارد که نیاز دارد کد را از یک صفحه موجود استخراج کند — شاید یک کامپوننت کارت زیبا، یک نوار ناوبری خوب ساختاریافته یا یک چیدمان فرم. صادر کردن عنصر این را در یک کلیک خلاصه می‌کند. هر عنصری را انتخاب کنید و HTML کامل، CSS محاسبه‌شده کامل یا یک نمایش JSON ساختاریافته دریافت کنید — هرکدام در تب خود.

پیش‌نمایش زنده
example.com/components
Click any element to export
Pricing Card
Selected for export
$29.99/month
Subscribe
Export Element
HTML 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>
7 lines · 248 bytes Copy HTML
ویژگی‌های کلیدی

صادر کردن به عنوان HTML تمیز

markup HTML کامل عنصر انتخاب‌شده شامل همه فرزندان، ویژگی‌ها و ساختار تودرتو را دریافت کنید. خروجی به‌درستی تورفتگی‌گذاری و قالب‌بندی شده است.

صادر کردن به عنوان CSS محاسبه‌شده

هر ویژگی CSS محاسبه‌شده برای عنصر را به عنوان یک stylesheet تمیز و قالب‌بندی‌شده استخراج کنید. شامل تایپوگرافی، رنگ‌ها، فاصله‌گذاری، حاشیه‌ها، چیدمان و موقعیت‌دهی.

صادر کردن به عنوان JSON ساختاریافته

یک شی JSON شامل نام تگ عنصر، نقشه ویژگی‌ها، استایل‌های محاسبه‌شده، محتوای متن داخلی و یک آرایه فرزندان بازگشتی دریافت کنید.

تغییر فرمت با تب

بین تب‌های HTML، CSS و JSON فوراً جابه‌جا شوید. هر فرمت از همان عنصر انتخاب‌شده تولید می‌شود.

پیش‌نمایش با Syntax Highlighting

هر فرمت صادرات با syntax highlighting در پانل پیش‌نمایش نمایش داده می‌شود. تگ‌های HTML قرمز، ویژگی‌ها زرد، مقادیر سبز.

کپی یک‌کلیک با اطلاعات اندازه

روی دکمه کپی کلیک کنید تا محتوای تب فعلی را دریافت کنید. یک نوار وضعیت تعداد خطوط و اندازه بایت صادرات را نشان می‌دهد.

موارد استفاده رایج

استخراج کامپوننت‌ها از سایت‌های مرجع

یک کارت، بخش hero یا نوار ناوبری که می‌خواهید بازسازی کنید پیدا کردید؟ روی آن کلیک کنید، HTML برای ساختار و CSS برای استایل را صادر کنید.

مستندسازی کامپوننت‌های UI

عناصر را به عنوان JSON برای مستندات یا رکوردهای سیستم طراحی صادر کنید. نمایش ساختاریافته شامل نام تگ‌ها، ویژگی‌ها و استایل‌ها است.

ایجاد Test Fixtures

به HTML fixtures برای unit tests نیاز دارید؟ HTML عنصر را صادر کنید و در فایل آزمایش الصاق کنید.

اشکال‌زدایی مشکلات استایل محاسبه‌شده

صادرات CSS استایل‌های محاسبه‌شده را نشان می‌دهد — آنچه مرورگر پس از اعمال همه قوانین CSS رندر می‌کند.

ذخیره snippet های کد برای مرجع

پیاده‌سازی‌های زیبا از سایت‌های تولید را در کتابخانه snippet شخصی کپی کنید. هم HTML و هم CSS را صادر کنید تا کامپوننت کامل را حفظ کنید.

نحوه استفاده
1

فعال‌سازی صادر کردن عنصر

داک شناور DevSuite Pro را باز کنید و روی آیکون صادر کردن عنصر کلیک کنید. مکان‌نما به انتخاب‌گر crosshair تغییر می‌کند و یک پانل صادرات با تب باز می‌شود.

2

کلیک روی عنصر برای انتخاب

روی هر عنصر در صفحه کلیک کنید. با حاشیه بنفش برجسته می‌شود و پانل صادرات با نمایش‌های HTML، CSS و JSON عنصر پر می‌شود.

3

تغییر بین فرمت‌ها

روی تب HTML، CSS یا JSON کلیک کنید تا عنصر را در فرمت‌های مختلف ببینید.

4

بررسی و کپی

پیش‌نمایش را اسکن کنید تا مطمئن شوید حاوی آنچه نیاز دارید است. روی «کپی» کلیک کنید تا محتوای تب فعلی در کلیپ‌بورد باشد.

5

انتخاب عنصر دیگر

روی عنصر دیگری در صفحه کلیک کنید تا پانل صادرات با محتوای جدید به‌روزرسانی شود.

آماده برای امتحان کردن هستید؟ صادر کردن عنصر?

DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۳۹ ابزار توسعه را برای مرورگر خود باز کنید.

افزودن به Chrome افزودن به Edge افزودن به FireFox