সাম্প্রতিক মাসগুলোতে ক্রমবর্ধমান সংখ্যক ওয়েব ডেভেলপার Firefox-এ স্যুইচ করেছে, Firefox Quantum প্রকাশের পর এটি Google Chrome-এর সমতুল্য পারফরম্যান্স উন্নত করেছে।
যদিও ফায়ারফক্স তার CSS গ্রিড ইন্সপেক্টরের মতো উদ্ভাবনী বৈশিষ্ট্যগুলির সাথে ডিফল্টরূপে ডেভেলপারদের জন্য উপযুক্ত টুলিং অফার করে, তবুও এটির অ্যাড-অন ইকোসিস্টেমের মাধ্যমে ব্রাউজারে আরও উত্তেজনাপূর্ণ বৈশিষ্ট্য যুক্ত করা সম্ভব৷
এটা মাথায় রেখে, ওয়েব ডেভেলপমেন্টের জন্য ফায়ারফক্স ব্যবহার করলে এখানে কয়েকটি এক্সটেনশনের চেষ্টা করা উচিত।
1. কমপ্যাট রিপোর্ট
ওয়েবসাইট বা ওয়েব অ্যাপ্লিকেশন তৈরি করার সময় কম্প্যাট রিপোর্ট আপনাকে সম্ভাব্য ব্রাউজার সামঞ্জস্যের সমস্যাগুলি সনাক্ত করতে সহায়তা করে। এই মুহূর্তে এটি শুধুমাত্র CSS-এর জন্য কাজ করে।
একবার আপনি এক্সটেনশন ইনস্টল করলে, বিকাশকারী সরঞ্জামগুলিতে একটি নতুন "সামঞ্জস্যতা" প্যানেল যোগ করা হবে৷ সেখান থেকে আপনি দেখতে সক্ষম হবেন যে কোনো প্রদত্ত সাইট প্রতিটি প্রধান ব্রাউজারে কীভাবে পারফর্ম করবে বলে আশা করা হচ্ছে
কোন সামঞ্জস্যের সমস্যা নেই এমন ব্রাউজার সংস্করণগুলি সবুজ রঙের, যেগুলির কয়েকটি সমস্যা হলুদে এবং যেগুলির কয়েকটি লাল রঙে রয়েছে৷ সমস্যা সৃষ্টিকারী সঠিক CSS নিয়মগুলি দেখতে আপনি নির্দিষ্ট ব্রাউজার সংস্করণগুলিতে খনন করতে পারেন।
2. JSON লাইট
আপনি যদি প্রায়শই JSON API-এর সাথে কাজ করেন, তাহলে ব্রাউজারে JSON ডেটা দেখতে আপনার ক্লান্তিকর মনে হতে পারে। এর কারণ হল ব্রাউজার এটিকে ডিফল্টরূপে সঠিকভাবে ফরম্যাট করে না যার ফলে এটি পড়তে অসুবিধা হয়৷
৷
JSON Lite সঠিক সিনট্যাক্স হাইলাইটিং এবং একটি নোড ভেঙে পড়ার বৈশিষ্ট্য সহ JSON এবং JSONP প্রতিক্রিয়াগুলি ফর্ম্যাট করে সেই সমস্যার সমাধান করে যা বিশাল JSON ডেটা পরিদর্শন করার সময় সহজ৷
আপনার যদি JSON Lite প্রদান করা সমস্ত বৈশিষ্ট্যের প্রয়োজন না হয়, তাহলে আপনি ঠিকানা বারে "about:config" লিখে, তারপর devtools.jsonview.enabled অনুসন্ধান করে Firefox-এ বিল্ট-ইন JSON ভিউয়ার সক্ষম করতে পারেন। কোড> . বিকল্পটিতে ডাবল ক্লিক করে এটিকে "সত্য" তে সেট করুন, তারপর ফলাফল দেখতে আপনার ব্রাউজারে যেকোনো JSON ফাইল লোড করুন৷
3. রিঅ্যাক্ট Devtools
রিঅ্যাক্ট হল ওয়েব ডেভেলপমেন্ট ইকোসিস্টেমের সবচেয়ে জনপ্রিয় লাইব্রেরিগুলির মধ্যে একটি। আপনি যদি প্রতিক্রিয়া দিয়ে ওয়েব অ্যাপ্লিকেশন তৈরি করেন, তাহলে আপনি আপনার কোড ডিবাগ করার জন্য এর ব্রাউজার এক্সটেনশন ব্যবহার করে অনেক মূল্য দেখতে পাবেন।
এটি ইনস্টল হয়ে গেলে, আপনি এটি ব্যবহার করে এমন যেকোনো ওয়েবসাইটে প্রতিক্রিয়া কোড পরীক্ষা করতে সক্ষম হবেন। অ্যাড-অন আইকনটি ব্রাউজার টুলবারে প্রদর্শিত হবে এবং আপনি অন্যান্য DevTools প্যানেলের পাশাপাশি একটি প্রতিক্রিয়া ট্যাবও পাবেন। প্রতিক্রিয়া প্যানেল একটি প্রতিক্রিয়া গাছ পরিদর্শন করার অনুমতি দেবে, যার মধ্যে উপাদান শ্রেণিবিন্যাস, প্রপস, রাজ্য এবং আরও অনেক কিছু রয়েছে৷
আপনি Vue.js devtools এবং Redux DevTools ইনস্টল করতে পারেন যদি আপনি লাইব্রেরির সাথে বিকাশ করেন।
4. ফন্টানেলো
Fontanello যে কোনো ওয়েবসাইটে ফন্ট শনাক্ত করার জন্য একটি সত্যিই দ্রুত উপায় প্রদান করে। এই অ্যাড-অনের সাহায্যে, ওয়েবসাইট কোন ফন্ট ব্যবহার করে তা খুঁজে বের করার জন্য আপনাকে আর devtools খুলতে হবে না। Fontanello Firefox-এ ডান-ক্লিক কনটেক্সট মেনুতে পাঠ্যের মৌলিক টাইপোগ্রাফিক শৈলী প্রদর্শন করে।
5. Wappalyzer
আপনি কি কখনও ভেবে দেখেছেন যে আপনার প্রিয় ওয়েবসাইটগুলি তৈরি করতে কী প্রযুক্তি ব্যবহার করা হয়? Wappalyzer এক ক্লিকে আপনাকে এই তথ্য প্রদান করতে পারে। এটি বিভিন্ন কন্টেন্ট ম্যানেজমেন্ট সিস্টেম, ইকমার্স প্ল্যাটফর্ম, ওয়েব সার্ভার, জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক, ডাটাবেস সফ্টওয়্যার, অ্যানালিটিক্স টুল এবং আরও অনেক কিছু সনাক্ত করতে পারে।
র্যাপিং আপ
আপনি যদি আপনার ডেভেলপমেন্ট ওয়ার্কফ্লোকে সুপারচার্জ করতে চান, তাহলে আপনি উপরে উল্লিখিত এক্সটেনশনগুলির মধ্যে কোনো ভুল করতে পারবেন না। নীচের মন্তব্য বিভাগে আপনার পছন্দগুলি শেয়ার করতে ভুলবেন না৷
৷এই নিবন্ধটি প্রথম 2010 সালের অক্টোবরে প্রকাশিত হয়েছিল এবং মার্চ 2018 এ আপডেট করা হয়েছিল৷
