গত কয়েক মাসে ওয়েব ডেভেলপারদের বড় সংখ্যা ফায়ারফক্সে স্যুইচ করেছে ফায়ারফক্স কোয়ান্টাম রিলিজ হওয়ার পর, যেটি পারফরমেন্স উন্নত করে গুগল ক্রোমের সমকক্ষ এনেছে।
যদিও ফায়ারফক্স ডিফল্টরূপে ডেভেলপারদের জন্য যথেষ্ট টুলিং অফার করে 혁신적인 ফিচারهاییത്തে CSS Grid ইনস্পেক্টরের মতো, এছাড়া ব্রাউজারের অ্যড-অন ইকোসিস্টেমের মাধ্যমে আরও চমৎকার ফিচার যোগ করা সম্ভব।
এটি ধরে রেখে, এখানে কিছু এক্সটেনশন দেওয়া হলো যা আপনাকে ট্রাই করতে হবে যদি আপনি ওয়েব ডেভেলপমেন্টের জন্য ফায়ারফক্স ব্যবহার করেন।
১. কম্প্যাট রিপোর্ট (Compat Report)
Compat Report আপনাকে ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন ডেভেলপ করার সময় সম্ভাব্য ব্রাউজার কম্প্যাটিবিলিটি সমস্যা শনাক্ত করতে সাহায্য করে। এটি ফিলহাল শুধু CSS-এর জন্য কাজ করে।
এক্সটেনশন ইনস্টল করার পর, ডেভেলপার টুলসে একটি নতুন "Compatibility" প্যানেল যোগ হবে। সেখান থেকে আপনি দেখতে পাবেন কোনো নির্দিষ্ট সাইট প্রতিটি মেজর ব্রাউজারে কীভাবে পারফর্ম করতে আশা করা হয়।
যে ব্রাউজার ভার্সনগুলোতে কোনো কম্প্যাটিবিলিটি ইস্যু নেই সেগুলো গ্রিন রঙে, কিছুইস্যু থাকলে ইয়েলো, এবং অধিক ইস্যু থাকলে রেড রঙে দেখাবে। আপনি নির্দিষ্ট ব্রাউজার ভার্সনগুলোর ভিতরে গিয়ে সঠিক CSS রুলগুলো দেখতে পারেন যা সমস্যা সৃষ্টি করছে।
২. JSON Lite
আপনি যদি JSON API-এর সাথে ঘন ঘন কাজ করেন, তবে ব্রাউজারে JSON ডেটা দেখতে নীরস লাগতে পারে। এর কারণ হলো ব্রাউজার ডিফল্টরূপে এটি সঠিকভাবে ফরম্যাট করে না, যা পড়া কঠিন করে দেয়।
JSON Lite এই সমস্যাটি সমাধান করে JSON এবং JSONP রেসপন্সগুলোকে প্রপার সিনট্যাক্স হাইলাইটিং এবং নোড কোল্যাপসিং ফিচারসহ ফরম্যাট করে, যা বিশাল JSON ডেটা ইনস্পেক্ট করার সময় খুব হ্যান্ডি।
যদি আপনাকে JSON Lite-র সকল ফিচার প্রয়োজন না হয়, তবে আপনি ফায়ারফক্সের বিল্ট-ইন JSON ভিউয়ার ইনেবল করতে পারেন about:config এড্রেস বারে টাইপ করে, তারপর devtools.jsonview.enabled সার্চ করে। ডাবল-ক্লিক করে এটিকে "true" সেট করুন, তারপর আপনার ব্রাউজারে যেকোনো JSON ফাইল লোড করে ফলাফল দেখুন।
৩. React DevTools
React আজ ওয়েব ডেভেলপমেন্ট ইকোসিস্টেমের সবচেয়ে জনপ্রিয় লাইব্রেরির একটি। আপনি যদি React দিয়ে ওয়েব অ্যাপ্লিকেশন ডেভেলপ করেন, তবে এর ব্রাউজার এক্সটেনশন ব্যবহার করে কোড ডিবাগ করতে অনেক মান পাবেন।
ইনস্টল হলে, আপনি যেকোনো ওয়েবসাইট যেটি React ব্যবহার করে সেটির React কোড এক্সামিন করতে পারবেন। অ্যাড-অন আইকন ব্রাউজার টুলবারে দেখাবে, এবং অন্যান্য DevTools প্যানেলের পাশে একটি React ট্যাবও পাবেন। React প্যানেল আপনাকে React ট্রি ইনস্পেক্ট করতে দেবে, কম্পোনেন্ট হায়ারার্কি, প্রপস, স্টেট, এবং আরও অনেক কিছু সহ।
আপনি Vue.js devtools এবং Redux DevToolsও ইনস্টল করতে পারেন যদি আপনি সেসব লাইব্রেরির সাথে ডেভেলপ করেন।
৪. Fontanello
Fontanello যেকোনো ওয়েবসাইটে ফন্ট শনাক্ত করার খুব দ্রুত উপায় দেয়। এই অ্যাড-অন থাকলে, আপনাকে ডেভটুলস খুলতে হবে না শুধু জানতে যে ওয়েবসাইটটি কোন ফন্ট ব্যবহার করছে। Fontanello ফায়ারফক্সের রাইট-ক্লিক কনটেক্সট মেনুতে টেক্সটের বেসিক টাইপোগ্রাফিক স্টাইল দেখায়।
৫. Wappalyzer
আপনি কখনো কি চিন্তা করেছেন আপনার প্রিয় ওয়েবসাইটগুলো কোন টেকনোলজি দিয়ে বানানো হয়েছে? Wappalyzer এক ক্লিকেই আপনাকে সেই তথ্য দিতে পারে। এটি বিভিন্ন কন্টেন্ট ম্যানেজমেন্ট সিস্টেম, ই-কমার্স প্ল্যাটফর্ম, ওয়েব সার্ভার, জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, ডেটাবেস সফ্টওয়্যার, অ্যানালিটিক্স টুল এবং আরও অনেক কিছু ডিটেক্ট করতে পারে।
উপসংহার
আপনি যদি আপনার ডেভেলপমেন্ট ওয়ার্কফ্লো সুপারচার্জ করতে চান, তবে উপরে উল্লিখিত এক্সটেনশনগুলোর যেকোনোটি বেছে নিলে ভুল হবে না। কমেন্ট সেকশনে আপনার ফেভারিটগুলো শেয়ার করতে ভুলবেন না।
এই আর্টিকেল প্রথমে অক্টোবর ২০১০-এ প্রকাশিত হয়েছিল এবং মার্চ ২০১৮-এ আপডেট করা হয়েছিল।
