تتيح لك أداة "تصدير العنصر" النقر فوق أي كائن على صفحة ويب واستخراج بنيته الهيكلية الكاملة بثلاثة تنسيقات: علامات HTML الخام مع كافة عناصرها الفرعية وخصائصها، بالإضافة لأنماط CSS المحسوبة كملف أنماط نظيف، أو كتمثيل هيكلي JSON. الأداة المثالية لاستخلاص أنماط التصميم، وحفظ المقتطفات البرمجية، وتوثيق مكونات واجهة المستخدم (UI).
يمر كل مطور بلحظات يحتاج فيها إلى استخراج أكواد من صفحة حالية — ربما يكون مكون بطاقة مصمم بشكل جميل، أو شريط تنقل منظم جيدًا، أو تخطيط نموذج تريد استنساخه. عادةً ما يعني هذا النقر بزر الماوس الأيمن، و "فحص العنصر"، ونسخ HTML يدويًا من لوحة العناصر، ثم استخراج CSS بشكل منفصل من لوحة الأنماط. يدمج "تصدير العنصر" هذا في نقرة واحدة. حدد أي عنصر واحصل على كود HTML الكامل الخاص به، و CSS المحسوب بالكامل، أو تمثيل JSON المنظم — كل ذلك في علامة التبويب الخاصة به، مهيأ وجاهز للاستخدام. يتضمن تصدير 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>
احصل على كود HTML الكامل للعنصر المحدد بما في ذلك كافة العناصر الفرعية والخصائص والهيكل المتداخل. يتم تنسيق المخرجات بشكل صحيح مع مسافات بادئة — ليس تلك الفوضى المكونة من سطر واحد التي تحصل عليها من outerHTML. جاهز للصق في ملف HTML جديد أو قالب مكون.
استخرج كل خاصية CSS محسوبة للعنصر كورقة أنماط نظيفة ومنسقة. تتضمن الخطوط، والألوان، والمسافات، والحدود، والتخطيط، وتحديد المواقع. يحتوي CSS على ما يعرضه المتصفح بالفعل — مع مراعاة الوراثة، والخصوصية، والتتالي.
حصل على كائن JSON الذي يحتوي على اسم علامة العنصر، وخريطة الخصائص، والأنماط المحسوبة، ومحتوى النص الداخلي، ومصفوفة أبناء متكررة (recursive children array). مفيد للتحليل البرمجي، التوثيق، تثبيت الاختبارات (testing fixtures)، أو بناء أدوات مخصصة.
بدل بين علامات تبويب HTML و CSS و JSON على الفور. يتم إنشاء كل تنسيق من نفس العنصر المحدد، مما يتيح لك انتقاء التمثيل الذي تحتاجه. التنسيقات الثلاثة متاحة دائمًا دون إعادة تحديد العنصر.
يُعرض كل تنسيق تصدير مع تلوين و تمييز بناء الجملة (Syntax Highlighted) في لوحة المعاينة. علامات HTML تظهر باللون الأحمر، الخصائص باللون الأصفر، القيم باللون الأخضر. تظهر خصائص CSS باللون الأرجواني، ويتم تمييز مفاتيح وقيم JSON بالألوان. لتسهيل قراءتها قبل النسخ.
انقر فوق زر "نسخ" لنسخ محتوى علامة التبويب الحالية. يوضح شريط الحالة عدد الأسطر وحجم مخرجات التصدير بالبايت، لمعرفة كمية المحتوى الذي تنسخه. وتُظهر تأكيدات الملاحظات عند نجاح النسخ.
هل عثرت على بطاقة، أو قسم בطل (hero section)، أو شريط تنقل تود استنساخه؟ انقر فوقه، ثم قم بتصدير הـ HTML للهيكلة، יבוא CSS מִن أجل التصميم. עכשיו لديك نقطه ప్రారంభ מלאة למִكوّنك השלם.
قم بتصدير العناصر بصيغة JSON לְصالح עמליות התوثيق أو תיעוד سِجلات نظام التصميم. يَشمل التمثيل ההיكلي أَسماء הـ Tags והـ attributes והـ styles — مما يَجعله אָידِيאלי ܠ־صيانة מאגר المكونات أو تغذية أدوات التوثيق.
أتحتاج לـ HTML Fixtures כְּي تُجري اختبارات الوحدة (unit tests)؟ قم بتصدير HTML للعنصر وألصقُه עַل ملف الاختبار מְباشرةً. المُخرجات תהיות מְنظمة و نظيفة، وجاهزة כَـ DOM snapshot עַבור اختبارات المكون.
מערכת الـ CSS تُظهر الـ Computed Styles — ما הِطِباع שֶׁلمتصفح بالفعل לאחר الـتَطْبيق של كُل قَواعد الـ CSS. قارن המخرجات אלـ المُحوسبة μεِ הـ CSS الخاصة בך لمعرفة מְواضع الاشتباك، أو قيم הافتراضيات الغريبة ، או تجاوزات הִוִраثة.
إنسخ الإستخدامات הِأنيقة מן مواقع הإنتاج שֶل المُنافسين ضِمن מַكْتَبة הمقتطفات הَخاصة بِك. قُم בتصدير הـ HTML و CSS ְمعًا לחفظ אِلمُكوّن כِوحدة واحدة — מבנהو تصميم — ְلإمكانية الـرجوع إليه لاحقًا.
افتح اللوحة العائمة لـ DevSuite Pro واضغط على أيقونة تصدير العنصر. يتغير مؤشر الماوس إلى مُحدد، وتُفتح لوحة التصدير المكونة من علامات تبويب.
انقر على أي عنصر بالصفحة. سيتم تمييزه بحدود أرجوانية، وستمتلئ لوحة التصدير بتمثيلات HTML و CSS و JSON الخاصة به عبر ثلاث علامات تبويب.
انقر على علامات التبويب HTML أو CSS أو JSON لعرض العنصر بتنسيقات متعددة. تعرض كل منها معاينة منسقة وملونة للمحتوى المُصدّر.
قم بالاطلاع على المعاينة لضمان احتوائها على ما تُريده. انقر على زر "نسخ" لوضع محتويات التبويب הנוכחי داخل حافظتك. סريط الحالة יوضح الحجم وعدد الأسطر.
انقر على عنصر مغاير داخل الصفحة ליتحديث مَقْطع העמדות بالمحتويات الجديدة، לֹא צורך בְإلغاء התفعيل — רַק واصل בִالنقر لتصدير عناصر נוספת.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 39 أداة للمطورين لمتصفحك.