ייצוא אלמנט מאפשר לך ללחוץ על כל אלמנט בדף אינטרנט ולייצא את המבנה המלא שלו בשלושה פורמטים: תגיות HTML גולמיות עם כל הצאצאים והתכונות, סגנונות CSS מחושבים כגיליון עיצוב נקי, או ייצוג JSON מובנה. הכלי המושלם לחילוץ תבניות עיצוב, שמירת קטעי קוד, ותיעוד רכיבי UI.
לכל מפתח יש רגעים שבהם הוא צריך לחלץ קוד מדף קיים — אולי זה רכיב כרטיסייה מעוצב בצורה יפה, סרגל ניווט מובנה היטב, או פריסת טופס שברצונך לשחזר. בדרך כלל זה אומר לחיצה ימנית, "בדוק אלמנט", העתקה ידנית של HTML מלוח האלמנטים, ואז חילוץ נפרד של CSS מלוח הסגנונות. ייצוא אלמנט מאחד את הכל ללחיצה אחת. בחר כל אלמנט וקבל את ה-HTML המלא שלו, ה-CSS המחושב המלא, או ייצוג JSON מובנה — כל אחד בלשונית נפרדת, מעוצב ומוכן לשימוש. ייצוא ה-HTML כולל את האלמנט וכל צאצאיו עם הזחה מתאימה. ייצוא ה-CSS מציג כל computed style (לא רק סגנונות שנכתבו), כך שתקבל את המראה המדויק שהדפדפן מרנדר. ייצוא ה-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 חדש או תבנית רכיב.
חלץ כל computed CSS property של האלמנט כגיליון עיצוב נקי ומעוצב. כולל טיפוגרפיה, צבעים, ריווח, גבולות, פריסה ומיקום. ה-CSS הוא מה שהדפדפן מרנדר בפועל — תוך התחשבות בירושה, ספציפיות וגלישה.
קבל אובייקט JSON המכיל את שם התג של האלמנט, מפת תכונות, computed styles, תוכן טקסט פנימי ומערך צאצאים רקורסיבי. שימושי לניתוח פרוגרמטי, תיעוד, fixture לבדיקות, או בניית כלים מותאמים אישית.
עבור בין לשוניות HTML, CSS ו-JSON באופן מיידי. כל פורמט נוצר מאותו אלמנט נבחר, כך שתוכל לאחוז בייצוג שאתה צריך. כל שלושת הפורמטים זמינים תמיד ללא בחירה מחדש של האלמנט.
כל פורמט ייצוא מוצג עם הדגשת תחביר בלוח התצוגה המקדימה. תגיות HTML באדום, תכונות בצהוב, ערכים בירוק. מאפייני CSS בסגול, ערכים בירוק. מפתחות וערכי JSON מקודדים בצבע. קל לקריאה לפני ההעתקה.
לחץ על כפתור ההעתקה כדי לאחוז את תוכן הלשונית הנוכחית. סרגל סטטוס מציג את מספר השורות וגודל הבייטים של הייצוא, כך שתדע כמה תוכן אתה מעתיק. משוב אישור מוצג כשההעתקה מצליחה.
מצאת כרטיסייה, מקטע hero, או סרגל ניווט שברצונך לשכפל? לחץ עליו, ייצא את ה-HTML עבור המבנה, ואז ייצא את ה-CSS עבור העיצוב. יש לך נקודת התחלה מלאה לרכיב שלך.
ייצא אלמנטים כ-JSON לתיעוד או רשומות מערכת עיצוב. הייצוג המובנה כולל שמות תגיות, תכונות וסגנונות — מושלם לתחזוקת מלאי רכיבים או הזנה לכלי תיעוד.
צריך fixture של HTML לבדיקות יחידה? ייצא את ה-HTML של האלמנט והדבק אותו לקובץ הבדיקה שלך. הפלט נקי ומעוצב, מוכן לשימוש כ-DOM snapshot לבדיקת רכיבים.
ייצוא ה-CSS מציג computed styles — מה שהדפדפן מרנדר בפועל לאחר החלת כל חוקי ה-CSS. השווה את הפלט המחושב מול ה-CSS שנכתב כדי למצוא קונפליקטים של ספציפיות, עקיפות ירושה, או ערכי ברירת מחדל בלתי צפויים.
העתק מימושים אלגנטיים מאתרי ייצור לספריית קטעים אישית. ייצא גם HTML וגם CSS יחד כדי לשמר את הרכיב המלא — מבנה ועיצוב — לעיון עתידי.
פתח את הדוק הצף של DevSuite Pro ולחץ על סמל ייצוא אלמנט. הסמן משתנה לסמן בחירה של כוונת, ולוח ייצוא עם לשוניות נפתח.
לחץ על כל אלמנט בדף. הוא מודגש עם גבול סגול, ולוח הייצוא מתמלא עם ייצוגי ה-HTML, CSS ו-JSON של האלמנט על פני שלוש לשוניות.
לחץ על לשונית HTML, CSS, או JSON כדי לצפות באלמנט בפורמטים שונים. כל לשונית מציגה תצוגה מקדימה מעוצבת עם הדגשת תחביר של תוכן הייצוא.
סרוק את התצוגה המקדימה כדי לוודא שהיא מכילה את מה שאתה צריך. לחץ על כפתור "העתק" כדי להכניס את תוכן הלשונית הנוכחית ללוח. סרגל הסטטוס מציג מספר שורות וגודל.
לחץ על אלמנט שונה בדף כדי לעדכן את לוח הייצוא עם תוכן חדש. אין צורך להשבית — המשך ללחוץ כדי לייצא אלמנטים מרובים.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.