কম্পিউটার টিউটোরিয়াল

Chrome-এ ওয়েব ডেভেলপমেন্টের জন্য ১১টি সেরা এক্সটেনশন

ওয়েবসাইট ডেভেলপ করার সময় অনেক জটিল রিকোয়ারমেন্টের চেকলিস্ট মেনে চলতে হয়। কালার বা ফন্ট স্কিম, CSS লেআউট সমস্যা, বা বিভিন্ন ডিভাইসে ওয়েবসাইট রেসপন্সিভনেস—যেকোনো উত্থানশীল ইশুতে নজর রাখা গুরুত্বপূর্ণ। নিচে Google Chrome (এবং অন্যান্য Chromium-ভিত্তিক ব্রাউজার) এর জন্য সেরা ওয়েব ডেভেলপমেন্ট এক্সটেনশনগুলো দেওয়া হলো।

১. Color Pick Eyedropper

যেকোনো ওয়েবপেজের কালার স্কিম পছন্দ হলে এবং নিজের প্রজেক্টে ব্যবহার করতে চাইলে "Color Pick Eyedropper" নামক Chrome এক্সটেনশন পিনপয়েন্ট একুরেসি এবং অ্যাডজাস্টেবল জুম ফিচার দিয়ে কালার এক্সট্র্যাক্ট করতে দেয়।

এই টাইপের এক্সটেনশন সব ওয়েবসাইটে পারমিশন চায় কালার এক্সট্রাকশনের জন্য। কিছুটা অ্যাডভান্সড ফিচার চাইলে ColorZilla ট্রাই করুন যা গ্রেডিয়েন্ট জেনারেটর, প্যালেট ভিউয়ার এবং কালার হিস্ট্রি দিয়ে আসে।

২. One-Click Full Page Screenshot

ফুল-পেজ ওয়েব স্ক্রিনশট নেওয়া প্রতিদিনের কাজের প্রয়োজন। কখনো কখনো ডিজাইন পরিবর্তন কমিউনিকেশন করার সেরা উপায় হচ্ছে পুরো ওয়েবসাইট ক্যাপচার করা। "One Click Full Page Screenshot" এক্সটেনশন দিয়ে এটি সঠিকভাবে করা যায়।

স্ক্রিন ক্যাপচার চলাকালীন আপনার ফিনিশড স্ক্রোলিং ইমেজ একটি নতুন উইন্ডোতে খুলবে। পুরো ওয়েবপেজ স্ক্রিন এখন PNG ফরম্যাটে ডাউনলোড উপলব্ধ। ফিল্টার, ওয়েবপেজে ড্রইং, টেক্সট যোগ ইত্যাদি ইফেক্টও লাগানো যায়।

৩. EditThisCookie

ওয়েব ডেভেলপারদের কুকি ম্যানেজারের অ্যাক্সেস দরকার হয় কুকি যোগ, ডিলিট, এডিট, প্রটেক্ট এবং ব্লক করার জন্য। EditThisCookie একটি উপকারী এক্সটেনশন যা আপনাকে কুকি নিয়ে যেভাবে ইচ্ছে কাজ করতে দেয় এবং JSON ফরম্যাটে এক্সপোর্ট/ইম্পোর্ট করতে দেয়। এটি পুরনো কুকি রিমুভ করে এবং যেকোনো কুকির সর্বোচ্চ এক্সট্রাকশন ডেট লিমিট করে ওয়েবসাইটকে সুস্থ রাখতে সাহায্য করে।

৪. ModHeader

ModHeader হলো ওয়েবপেজ HTTP হেডার মডিফাই করার সবচেয়ে জনপ্রিয় Chrome এক্সটেনশন। শুধু এক বা দু ক্লিক দিয়ে URL বা রিসোর্স টাইপ ভিত্তিক হেডার মডিফিকেশন ইনএবল করা যায়। সেরা পার্ট: একাধিক প্রোফাইল তৈরি করা যায় এবং মডিফাইড হেডারে ভিন্ন ভ্যালু যোগ করা যায়। সব মডিফিকেশন শুধু একটি ট্যাব বা পুরো সাইটের জন্য সীমাবদ্ধ রাখা যায়।

৫. UX Check

চলমান ওয়েবসাইটের হিউরিস্টিক ইভ্যালুয়েশন সবসময় দরকার। UX Check এক্সটেনশন এটি সহজ করে দিয়েছে সব UX-রিলেটেড ফিডব্যাক একটি সাইড প্যানে দেখিয়ে। যেকোনো এলিমেন্টে ক্লিক করলে যা হিউরিস্টিকের সাথে মেলে না, সেটি নোট করুন এবং স্ক্রিনশট নিন। শেষে সব পরিবর্তন .docx ফরম্যাটে এক্সপোর্ট করা যায়।

৬. Window Resizer

ওয়েব ডেভেলপারদের বিভিন্ন স্ক্রিন ডাইমেনশনে ওয়েব পেজ এমুলেট করতে হয়। Window Resizer দিয়ে ল্যাপটপ, ট্যাবলেট, স্মার্টফোন এবং আপনার পছন্দের যেকোনো স্ক্রিন ডাইমেনশনের জন্য এই ইভ্যালুয়েশন সহজে করা যায়।

টুলটিতে "Rotate" এবং "Live Measurement" এর মতো কুল ফিচার আছে, সাথে ভিজুয়াল কাস্টোমাইজেশন ফাংশনগুলো। সত্যিকারের রেসপন্সিভ ওয়েবসাইট বানাতে চাইলে সব স্ক্রিন ডাইমেনশনের জন্য চেক করে নিন।

৭. Lorem Ipsum Generator

ওয়েব পেজে কাজ দ্রুত শেষ করতে ডিফল্ট টেক্সট লাগে। "Lorem Ipsum Generator" এক্সটেনশন বিভিন্ন প্যারাগ্রাফ এবং সেন্টেন্সের ডিফল্ট টেক্সট অপশন দেয়। টেক্সট ফ্র্যাগমেন্ট বা পুরো টেক্সট "Auto select" অপশন দিয়ে সিলেক্ট করা যায়। টেক্সটের ভ্যারিয়েশন إمكانির কারণে ফাইনাল টেমপ্লেট এলিগ্যান্ট লাগে।

৮. BuiltWith Technology Profiler

BuiltWith একটি ক্লাসিক এক্সটেনশন যা ওয়েবসাইটের আন্ডারলাইন টেকনোলজি সম্পর্কে জানতে সাহায্য করে। এক ক্লিকেই এটি একটি প্রোফাইল তৈরি করে যা লেটেস্ট অ্যাড-অন এবং ইনস্ট্রুমেন্ট সম্পর্কে জানতে সাহায্য করে যেগুলো ওয়েবসাইটকে আউটস্ট্যান্ডিং করে। এটি আপনার নিজের কাজে সেই ফাংশনালিটি রেপ্লিকেট করতে সাহায্য করে।

৯. WhatFont

WhatFont হলো ওয়েব পেজে ভিন্ন ফন্ট টাইপ শনাক্ত করার সবচেয়ে দ্রুত এবং সহজ উপায়। টেক্সটের নিকট হোভার করলেই এর সম্পূর্ণ ডিটেইলস পাওয়া যায়। এটি TypeKit এবং Google FontAPI-এর মতো অ্যাডভান্সড টেমপ্লেট সাপোর্ট করে।

১০. CheckMyLinks

কখনো কখনো ওয়েবসাইটের সব লিংকের অবজেক্টিভ সমারি দরকার। CheckMyLinks একটি জনপ্রিয় এক্সটেনশন যা ভ্যালিড, ইনভ্যালিড এবং ব্রোকেন লিংক সারমারাইজ করে। যেকোনো চলমান ওয়েবসাইটের লিংক রেজাল্ট সাইড প্যানে তৎক্ষণে দেখতে পাওয়া যায়। ওয়েবসাইট বা পাবলিশড পরিবর্তন লাইভ হওয়ার আগে লাস্ট মিনিট স্পট চেকের জন্য এটি অত্যন্ত হ্যান্ডি।

১১. Pesticide

ওয়েবসাইটে CSS লেআউট সমস্যা আশংকা করলে? Pesticide প্রতিটি পেজ এলিমেন্টের আউटलাইন দিয়ে এই সমস্যা ডিবাগ করতে সাহায্য করে। Ctrl কী ধরে রাখলে এলিমেন্ট ইনফো দেখতে পাবেন এবং পেজে এলিমেন্টের প্লেসমেন্ট বিশ্লেষণ করতে পারবেন।

ওয়েবসাইট অ্যাপ্লিকেশনে গুরুত্বপূর্ণ ডিটেইল ম্যানেজ করার আরও অনেক জনপ্রিয় ওয়েব এক্সটেনশন আছে। যেমন JSON Viewer যারা JSON ফাইল নিয়ে কাজ করে। HTML Tree Generator যেটি ওয়েবসাইটের সব এলিমেন্টের ট্রি দেয়।

উপরের পাশাপাশি ব্রাউজিং স্পিড বাড়ানোর জন্য আরও অনেক Chrome এক্সটেনশন আছে। সেগুলো চেক আউট করুন!

  1. ট্যাব ম্যানেজমেন্টের জন্য সেরা ৬টি ক্রোম এক্সটেনশন

  2. প্রোডাক্টিভিটি বাড়াতে সেরা ক্রোম এক্সটেনশন

  3. অনলাইন নিরাপত্তার জন্য ১০ অপরিহার্য ক্রোম এক্সটেনশন

  4. ২০২২ সালের অ্যান্ড্রয়েডের জন্য ৯টি মাস্ট-হেভ Chrome এক্সটেনশন