Export Element আপনাকে ওয়েবপৃষ্ঠার যেকোনো এলিমেন্টে ক্লিক করতে এবং এর সম্পূর্ণ কাঠামো তিনটি ফরম্যাটে এক্সপোর্ট করতে দেয়: সমস্ত চিলড্রেন এবং অ্যাট্রিবিউট সহ র (raw) HTML মার্কআপ, একটি পরিষ্কার স্টাইলশিট হিসেবে কম্পিউটেড (computed) CSS স্টাইল অথবা একটি স্ট্রাকচার্ড JSON রিপ্রেজেন্টেশন। ডিজাইন প্যাটার্ন এক্সট্র্যাক্ট করা, কোড স্নিপেট সেভ করা এবং UI কম্পোনেন্ট ডকুমেন্ট করার জন্য এটি একটি নিখুঁত টুল।
প্রতিটি ডেভেলপারেরই এমন মুহূর্ত আসে যখন তাদের একটি বিদ্যমান পেজ থেকে কোড এক্সট্র্যাক্ট করার প্রয়োজন হয় — হতে পারে এটি একটি সুন্দর স্টাইল করা কার্ড কম্পোনেন্ট, একটি সুগঠিত ন্যাভিগেশন বার অথবা একটি ফর্ম লেআউট যা আপনি প্রতিলিপি করতে চান। সাধারণত এর মানে হলো রাইট-ক্লিক করা, "Inspect Element" করা, Elements প্যানেল থেকে ম্যানুয়ালি HTML কপি করা এবং তারপর Styles প্যানেল থেকে আলাদাভাবে CSS এক্সট্র্যাক্ট করা। Export Element এই কাজটিকে মাত্র এক ক্লিকে নিয়ে আসে। যেকোনো এলিমেন্ট সিলেক্ট করুন এবং এর সম্পূর্ণ HTML, ফুল কম্পিউটেড CSS অথবা একটি স্ট্রাকচার্ড JSON রিপ্রেজেন্টেশন পান — প্রতিটি আলাদা ট্যাবে সাজানো এবং ব্যবহারের জন্য প্রস্তুত। HTML এক্সপোর্টে এলিমেন্ট এবং এর সমস্ত চিলড্রেন সঠিক ইনডেন্টেশন সহ অন্তর্ভুক্ত থাকে। CSS এক্সপোর্টে প্রতিটি কম্পিউটেড স্টাইল (কেবল অথরড (authored) স্টাইল নয়) দেখা যায়, যাতে আপনি ব্রাউজারের রেন্ডার করা সঠিক চেহারাটি পান। 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 অবজেক্ট পান। এটি প্রোগ্রাম্যাটিক অ্যানালাইসিস, ডকুমেন্টেশন, টেস্টিং ফিক্সচার বা কাস্টম টুল তৈরির জন্য কার্যকর।
তাৎক্ষণিকভাবে HTML, CSS এবং JSON ট্যাবের মধ্যে স্যুইচ করুন। প্রতিটি ফরম্যাট একই নির্বাচিত এলিমেন্ট থেকে জেনারেট করা হয়, তাই আপনার প্রয়োজনে যেকোনোটি বেছে নিতে পারেন। এলিমেন্ট পুনরায় সিলেক্ট না করেই তিনটি ফরম্যাট সব সময় হাতে থাকে।
প্রতিটি এক্সপোর্ট ফরম্যাট প্রিভিউ প্যানেলে সিনট্যাক্স হাইলাইটিং সহ প্রদর্শিত হয়। HTML ট্যাগ লালে, অ্যাট্রিবিউট হলুদে এবং ভ্যালু সবুজে; CSS প্রপার্টি পার্পল রঙে এবং ভ্যালু সবুজে; JSON কী এবং ভ্যালুগুলো কালার-কোডেড থাকে। কপি করার আগে সহজেই পড়া যায়।
বর্তমান ট্যাবের কন্টেন্ট নিতে Copy বোতামে ক্লিক করুন। একটি স্ট্যাটাস বার এক্সপোর্টের লাইন সংখ্যা এবং বাইট সাইজ দেখায়, তাই আপনি জানেন কতটুকু কন্টেন্ট কপি করছেন। কপি সফল হলে কনফার্মেশন ফিডব্যাক দেখানো হয়।
এমন কোনো কার্ড, হিরো সেকশন বা ন্যাভিগেশন বার পেয়েছেন যা আপনি প্রতিলিপি করতে চান? সেটিতে ক্লিক করুন, কাঠামোর জন্য HTML এবং স্টাইলিংয়ের জন্য CSS এক্সপোর্ট করুন। আপনার নিজস্ব কম্পোনেন্টের জন্য একটি পূর্ণাঙ্গ স্টার্টিং পয়েন্ট পেয়ে গেলেন।
ডকুমেন্টেশন বা ডিজাইন সিস্টেম রেকর্ডের জন্য এলিমেন্টগুলোকে JSON হিসেবে এক্সপোর্ট করুন। স্ট্রাকচার্ড রিপ্রেজেন্টেশনে ট্যাগ নেম, অ্যাট্রিবিউট এবং স্টাইল অন্তর্ভুক্ত থাকে — যা কম্পোনেন্ট ইনভেন্টরি বজায় রাখা বা ডকুমেন্টেশন টুলে ডেটা দেওয়ার জন্য নিখুঁত।
ইউনিট টেস্টের জন্য HTML ফিক্সচার প্রয়োজন? এলিমেন্টের HTML এক্সপোর্ট করুন এবং আপনার টেস্ট ফাইলে পেস্ট করুন। আউটপুটটি অত্যন্ত পরিষ্কার এবং ফরম্যাটেড, যা কম্পোনেন্ট টেস্টিংয়ের জন্য DOM স্ন্যাপশট হিসেবে ব্যবহারের যোগ্য।
CSS এক্সপোর্ট কম্পিউটেড স্টাইলগুলো দেখায় — যা সমস্ত CSS রুল প্রয়োগের পর ব্রাউজার আসলে রেন্ডার করে। স্পেসিফিসিটি কনফ্লিক্ট, ইনহেরিটেন্স ওভাররাইড বা অপ্রত্যাশিত ডিফল্ট ভ্যালু খুঁজে পেতে আপনার লেখা CSS-এর সাথে কম্পিউটেড আউটপুট তুলনা করুন।
প্রোডাকশন সাইট থেকে চমৎকার সব ইমপ্লিমেন্টেশন আপনার ব্যক্তিগত স্নিপেট লাইব্রেরিতে কপি করুন। ভবিষ্যতের রেফারেন্সের জন্য সম্পূর্ণ কম্পোনেন্ট — কাঠামো এবং স্টাইলিং — একত্রে সংরক্ষণ করতে HTML এবং CSS উভয়ই এক্সপোর্ট করুন।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Export Element আইকনে ক্লিক করুন। কার্সারটি একটি ক্রসহেয়ার সিলেক্টরে পরিবর্তিত হবে এবং একটি ট্যাবড এক্সপোর্ট প্যানেল ওপেন হবে।
পেজের যেকোনো এলিমেন্টে ক্লিক করুন। এটি একটি বেগুনী বর্ডার দিয়ে হাইলাইট করা হবে এবং এক্সপোর্ট প্যানেলের তিনটি ট্যাবে এলিমেন্টের HTML, CSS এবং JSON তথ্য চলে আসবে।
এলিমেন্টটিকে বিভিন্ন ফরম্যাটে দেখতে HTML, CSS বা JSON ট্যাবে ক্লিক করুন। প্রতিটি ট্যাব এক্সপোর্ট কন্টেন্টের একটি সিনট্যাক্স-হাইলাইটেড এবং ফরম্যাটেড প্রিভিউ দেখায়।
প্রিভিউ দেখে নিশ্চিত হয়ে নিন যে এতে আপনার প্রয়োজনীয় সব তথ্য আছে। বর্তমান ট্যাবের কন্টেন্ট ক্লিপবোর্ডে নিতে "Copy" বোতামে ক্লিক করুন। স্ট্যাটাস বারে লাইন সংখ্যা এবং সাইজ দেখতে পাবেন।
এক্সপোর্ট প্যানেল নতুন কন্টেন্ট দিয়ে আপডেট করতে পেজের অন্য কোনো এলিমেন্টে ক্লিক করুন। ডিঅ্যাক্টিভেট করার প্রয়োজন নেই — একাধিক এলিমেন্ট এক্সপোর্ট করতে ক্লিক করে যান।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।