CSS Inspector

আপনি লেআউটের সমস্যা ডিবাগ করছেন, পছন্দের কোনো ডিজাইন রিভার্স-ইঞ্জিনিয়ার করছেন, নাকি দ্রুত স্পেসিং ও টাইপোগ্রাফি ভ্যালু যাচাই করছেন — যাই হোক না কেন, CSS Inspector একটি পরিষ্কার, ফ্লোটিং প্যানেলে আপনার প্রয়োজনীয় সবকিছু হাজির করে। ব্রাউজারের DevTools থেকে ভিন্ন, এটি আপনার কাজে বাধা দেয় না — কোনো ডক করা প্যানেল নেই, ভিউপোর্ট রিসাইজ হয় না। শুধু হোভার করুন, ক্লিক করুন, এবং ইনস্পেক্ট করুন। টুলটি computed styles দেখায় (ব্রাউজার আসলে যা রেন্ডার করে), শুধু আপনার লেখা CSS নয়। এর মানে আপনি inheritance, specificity এবং cascading রেজলভ হওয়ার পরের প্রকৃত ভ্যালুগুলো দেখতে পান — ঠিক সেই ভ্যালু যা স্ক্রিনে ইউজাররা যা দেখে তাতে প্রভাব ফেলে।

কোনো এলিমেন্ট ইনস্পেক্ট করা কখনোই পেজের reflow বা repaint ঘটায় না, তাই স্ক্রল পজিশন, অ্যানিমেশন বা JavaScript স্টেট নষ্ট হওয়ার চিন্তা ছাড়াই আপনি নির্দ্বিধায় এক্সপ্লোর করতে পারেন। ::before এবং ::after-এর মতো pseudo-element গুলোও সাপোর্ট করা হয় — প্যারেন্ট এলিমেন্টে হোভার করলে প্যানেল জেনারেট করা কনটেন্টের স্টাইল আলাদাভাবে দেখায়, এলিমেন্টের নিজস্ব স্টাইল থেকে পৃথক করে। CSS কাস্টম প্রপার্টি (variable) তাদের চূড়ান্ত computed ভ্যালুতে রেজলভ হয়, কিন্তু প্যানেলটি সেই variable-এর নামও দেখায় যা থেকে এই ভ্যালু এসেছে, ফলে আপনি একটি কালার বা স্পেসিং ভ্যালুকে তার ডিজাইন-টোকেন সোর্স পর্যন্ত ট্রেস করতে পারেন, শুধু একটি raw পিক্সেল সংখ্যা দেখার বদলে।

দৈনন্দিন ব্যবহারে, বেশিরভাগ ডেভেলপার একটি সেশনে ডজনখানেক বার CSS Inspector-এর কাছে ফিরে আসেন — কেন একটি মার্জিন কলাপ্স হলো তা যাচাই করতে, স্টাইলশিটে কপি করার আগে একটি hex কোড নিশ্চিত করতে, বা একটি media query ব্রেকপয়েন্ট আসলেই তার নির্ধারিত স্টাইল প্রয়োগ করেছে কিনা তা যাচাই করতে। যেহেতু এটি ব্রাউজার-ওয়াইড কোনো মোড নয় বরং একটি ফ্লোটিং প্যানেল, তাই আপনি এটি খোলা রেখেই ট্যাব পাল্টে নিজের কোড এডিটর বা কোনো ডিজাইন ফাইল চেক করতে পারেন, এরপর একই হোভার করা এলিমেন্টে সরাসরি ফিরে আসতে পারেন, নিজের জায়গা না হারিয়ে।