Measure Distance আপনাকে একটি ওয়েবপেজের যেকোনো দুটি এলিমেন্টে ক্লিক করে তাদের মধ্যে নিখুঁত পিক্সেল দূরত্ব তাৎক্ষণিকভাবে দেখতে সাহায্য করে — অনুভূমিকভাবে (X), লম্বভাবে (Y) এবং কোনাকুনি (diagonally)। এলিমেন্টগুলোর মাঝখানে লেবেলযুক্ত পরিমাপসহ ভিজ্যুয়াল কানেক্টিং লাইন দেখা যায় এবং একটি ইনফো বারে উভয় এলিমেন্টের ডাইমেনশন ও তিন দিকের সব দূরত্ব প্রদর্শিত হয়।
ব্রাউজার DevTools-এ দুটি এলিমেন্টের মধ্যে স্পেসিং চেক করতে প্রতিটি এলিমেন্টের ওপর আলাদাভাবে মাউস নিতে হয়, মার্জিন/প্যাডিং ভ্যালু পড়তে হয় এবং আসল ভিজ্যুয়াল দূরত্ব বের করতে মনে মনে হিসাব করতে হয়। Measure Distance এই ঝামেলা পুরোপুরি দূর করে। Element A-তে ক্লিক করুন, তারপর Element B-তে ক্লিক করুন এবং সাথে সাথে নিখুঁত পিক্সেল দূরত্বগুলো দেখা যাবে — X (অনুভূমিক), Y (লম্ব) এবং কোনাকুনি — যা পেজের ওপর সরাসরি এলিমেন্ট দুটির সংযোগকারী লেবেলযুক্ত লাইনের মাধ্যমে প্রদর্শিত হয়। টুলটি এলিমেন্টের প্রান্ত (bounding box) থেকে পরিমাপ করে, ফলে ভ্যালুগুলো ব্যবহারকারীর চোখে দৃশ্যমান প্রকৃত গ্যাপকে নির্দেশ করে। এটি কেবল মার্জিন/প্যাডিং ভ্যালু পড়ার চেয়ে আলাদা, কারণ এটি একাধিক স্পেসিং প্রোপার্টির সম্মিলিত প্রভাবকেও বিবেচনায় নেয়। প্রতিটি নির্বাচিত এলিমেন্ট একটি রঙিন বর্ডার দিয়ে হাইলাইট হয় এবং তার নিজস্ব ডাইমেনশন (width × height) দেখায়, যাতে আপনি এক ভিউতে এলিমেন্টের সাইজ এবং তাদের মধ্যবর্তী স্পেসিং — উভয়ই দেখতে পারেন।
প্রথম এলিমেন্টে (নীল বর্ডার দিয়ে হাইলাইট করা) ক্লিক করুন, তারপর দ্বিতীয় এলিমেন্টে (সবুজ বর্ডার দিয়ে হাইলাইট করা) ক্লিক করুন। তাদের বাউন্ডিং বক্সের মধ্যবর্তী দূরত্বগুলো তাৎক্ষণিকভাবে গণনা এবং প্রদর্শিত হবে। কোনো ড্র্যাগিং বা ম্যানুয়াল ইনপুটের প্রয়োজন নেই — কেবল দুটি ক্লিকই যথেষ্ট।
অনুভূমিক দূরত্ব (X), লম্ব দূরত্ব (Y) এবং কোনাকুনি দূরত্ব একসাথে দেখুন — প্রতিটি তার নিজস্ব কালার-কোডেড পরিমাপ লাইন এবং লেবেলের মাধ্যমে প্রদর্শিত হয়। X অ্যাম্বার (হলদেটে), Y লাল এবং কোনাকুনি বেগুনি রঙের হয়ে থাকে।
ড্যাশড (dashed) পরিমাপ লাইনগুলো সরাসরি পেজে দুটি নির্বাচিত এলিমেন্টকে সংযুক্ত করে, যেখানে প্রতিটি লাইনের মাঝখানে ডিস্ট্যান্স লেবেল থাকে। এই ভিজ্যুয়াল রিপ্রেজেন্টেশনের ফলে কী পরিমাপ করা হচ্ছে তা খুব সহজেই বোঝা যায়।
প্রতিটি নির্বাচিত এলিমেন্ট একটি ছোট লেবেলে তার নিজস্ব width × height ডাইমেনশন দেখায়। এটি আপনাকে টুল পরিবর্তন না করেই একই ভিউতে এলিমেন্টের সাইজ এবং তাদের মাঝখানের স্পেসিং — উভয়ই দেখতে দেয়।
পরিমাপগুলো তাৎক্ষণিকভাবে আপডেট করতে নতুন এক জোড়া এলিমেন্টে ক্লিক করুন। টুলটি বারবার বন্ধ এবং চালু করার প্রয়োজন নেই। পূর্ববর্তী পরিমাপের লাইনগুলো নতুন এক জোড়া এলিমেন্টের জন্য নতুন লাইন দ্বারা প্রতিস্থাপিত হবে।
ভিউর্পোর্টের নিচে থাকা একটি স্থায়ী ইনফো বার একটি সংক্ষিপ্ত সারসংক্ষেপ দেখায়: উভয় এলিমেন্টের নাম এবং ডাইমেনশন, সাথে তিনটি ডিস্ট্যান্স ভ্যালু (X, Y, কোনাকুনি)। এটি বাগ রিপোর্ট বা ডিজাইন ফিডব্যাক হিসেবে ব্যবহারের জন্য সহজেই কপি করা যায়।
মকআপ অনুযায়ী বাটনটি হেডিং থেকে ২৪px নিচে হওয়া উচিত। হেডিং-এ ক্লিক করুন, বাটনে ক্লিক করুন এবং নিশ্চিত হোন যে Y দূরত্ব ঠিক ২৪px। এটি এমন সূক্ষ্ম স্পেসিংয়ের অমিলগুলো শনাক্ত করে যা খালি চোখে দেখা সম্ভব নয় কিন্তু ডিজাইন টোকেনে উল্লেখ থাকে।
কার্ড ১ এবং কার্ড ২-এর মধ্যবর্তী দূরত্ব মাপুন, তারপর কার্ড ২ এবং কার্ড ৩-এর মধ্যবর্তী দূরত্ব মাপুন। যদি গ্যাপগুলো একই রকম না হয়, তবে আপনি একটি অসামঞ্জস্যতা খুঁজে পেয়েছেন — যা সম্ভবত মার্জিনের পার্থক্য বা ফ্লেক্সববক্স গ্যাপের সমস্যার কারণে হয়।
ডেস্কটপ উইডথ-এ এলিমেন্টের দূরত্ব মাপুন, তারপর ব্রাউজার রিসাইজ করে মোবাইল উইডথ-এ আবার মাপুন। যাচাই করুন যে ব্রেকপয়েন্ট অনুযায়ী স্পেসিং সঠিকভাবে স্কেল হচ্ছে কিনা এবং রেসপন্সিভ মার্জিন/প্যাডিং অ্যাডজাস্টমেন্ট ডিজাইন অনুযায়ী কাজ করছে কিনা।
আপনার বাগ রিপোর্টে সুনির্দিষ্ট পরিমাপ অন্তর্ভুক্ত করুন: "nav এবং hero-এর মাঝখানের গ্যাপ হলো ৪৭px, যা ডিজাইনের পরিকল্পনা অনুযায়ী ৩২px হওয়া উচিত।" ইনফো বারের ভ্যালুগুলো সরাসরি Jira টিকেট বা GitHub ইস্যুতে কপি করা যায়।
অনুভূমিকভাবে অ্যালাইন করা উচিত এমন দুটি এলিমেন্টে ক্লিক করুন। যদি Y দূরত্ব ০px হয়, তবে তারা পুরোপুরি অ্যালাইনড। ০px-এর বেশি যেকোনো Y ভ্যালু একটি ভার্টিক্যাল মিস-আ্যালাইনমেন্ট নির্দেশ করে — আর সংখ্যাটি আপনাকে বলবে এটি কত পিক্সেল সরে আছে।
DevSuite Pro ফ্লোটিং ডক ওপেন করুন এবং Measure Distance আইকনে ক্লিক করুন। কার্সারটি ক্রসহেয়ারে (crosshair) পরিণত হবে, যা নির্দেশ করে যে আপনি প্রথম এলিমেন্টটি সিলেক্ট করতে পারবেন।
পেজের যেকোনো এলিমেন্টে ক্লিক করুন। এটি নীল বর্ডার দিয়ে হাইলাইট হবে এবং তার ডাইমেনশনসহ (পিক্সেলে width × height) "Element A" হিসেবে চিহ্নিত হবে।
দ্বিতীয় একটি এলিমেন্টে ক্লিক করুন। এটি সবুজ বর্ডার দিয়ে হাইলাইট হবে এবং "Element B" লেবেল যুক্ত হবে। সাথে সাথে এলিমেন্ট দুটির সংযোগকারী পরিমাপ লাইনগুলো দেখা যাবে।
তিনটি পরিমাপ লাইন দেখা যাবে: অনুভূমিক (X) অ্যাম্বার রঙে, লম্ব (Y) লাল রঙে এবং কোনাকুনি বেগুনি রঙে। প্রতিটি লাইনে পিক্সেল দূরত্ব দেখানোর জন্য একটি লেবেল থাকে। নিচে থাকা ইনফো বারটি সব ভ্যালুর সারসংক্ষেপ দেখায়।
তাৎক্ষণিকভাবে একটি নতুন দূরত্ব পরিমাপ করতে অন্য এক জোড়া এলিমেন্টে ক্লিক করুন। কাজ শেষ হলে টুলটি বন্ধ করতে ডক-এ থাকা Measure Distance আইকনে ক্লিক করুন।
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৩৯+ ডেভলপার টুল আনলক করুন।
