ওয়েবসাইট আজ আমাদের যুগের অপরিহার্য। ব্যবসায়িক তথ্য, কাজ বা পড়াশোনার রিসার্চ – সবके জন্য এটি ব্যবহার হয়। ওয়েবসাইট ওয়েব প্রোগ্রামিং ল্যাঙ্গুয়েজ থেকে তৈরি যা অনবহি ব্যক্তির জন্য বোঝা কঠিন।
যদি আপনি ওয়েবসাইটের পার্টস সম্পর্কে জানতে চান, তবে ম্যাকে Inspect Element কীভাবে ব্যবহার করবেন তা জানতে হবে। এই "Inspect Element" ফিচার আপনাকে ওয়েবসাইটের ফ্রন্ট-এন্ড দেখতে ও মডিফাই করতে দেয়। নিজের ওয়েবসাইট বানাতে বা সাইটগুলো কীভাবে কাজ করে তা শিখতে এটি খুব কাজে আসে।
ওয়েবসাইট চেক করার পাশাপাশি কুকি ক্লিয়ার করাও একটি সাধারণ অপারেশন। বিস্তারিত জানতে লিংক ক্লিক করুন।
এই পোস্টে ম্যাকে Inspect Element করার বিস্তারিত দেওয়া হলো। কেন কখনো ওয়েবসাইটের এলিমেন্ট ইন্সপেক্ট করা যায় না, এবং বিভিন্ন ব্রাউজারে কীভাবে করবেন তা শিখাব।
ভাগ ১: আমার ম্যাকে ইন্সপেক্ট কেন কাজ করে না?
ম্যাকে ইন্সপেক্ট এলিমেন্ট জানতে চাইলে আগে জানতে হবে কেন এটি কাজ করে না। সাফারি ব্রাউজারে Develop Menu সক্রিয় না থাকলে ওয়েবসাইট ইন্সপেক্ট করা সম্ভব নয়। তাই Develop Menu সক্রিয় করতে হবে। এটি Apple-এর Web Inspector ব্যবহার করতে দেবে।
Develop Menu সক্রিয় করার ধাপ:
- Safari খুলুন।
- ব্রাউজারের Preferences সেকশনে যান।
- Advanced ট্যাবে ক্লিক করুন।
- পেনের নিচে "Show Develop Menu In Menu Bar" বক্স চেক করুন।
- Develop অপশন বেছে নিন।
- Show Web Inspector-এ ক্লিক করুন।
ভাগ ২: ম্যাক ব্রাউজারে Inspect Element কীভাবে করবেন?
বিভিন্ন ব্রাউজারের জন্য ম্যাকে Inspect Element করার পদ্ধতিভিন্ন। Chrome, Safari, Firefox-এ কীভাবে করবেন নিচে দেখুন।
Chrome ব্রাউজারে ম্যাকে Inspect Element
Chrome-এ ম্যাকে Inspect Element করার কিছু পদ্ধতি:
- Right-Click Method
- Mac-এ Chrome খুলুন।
- যেকোনো পেজে যান যা ইন্সপেক্ট করতে চান।
- রাইট-ক্লিক করে Inspect বেছে নিন। নির্দিষ্ট এলিমেন্টে রাইট-ক্লিক করলে সেটি ইনসপেক্টর ভিউতে খুলবে।
- Menu Bar Method
- টপ মেনু বার থেকে View মেনু → Developer → Developer Tools।
- Customize and Control অপশন লঞ্চ করুন।
- Settings Icon Method
- তিন বিন্দুর আইকন (উপরের ডান পাশ) → More Tools → Developer Tools।
- Keyboard Shortcut Method
- macOS-এ
CMD + OPTION + Cটাইপ করুন। - প্যানেল লোকেশন পরিবর্তন করতে তিন বিন্দুর আইকন → Dock position বেছে নিন (যেমন Dock To Right)।
এখন Elements, Sources, Console ইত্যাদি ট্যাব দেখতে পাবেন। সাধারণত Elements ট্যাবে সবকিছু থাকে।
এলিমেন্ট সিলেক্ট করলে এর সোর্স কোড দেখতে পাবেন। কোড ভিউ করার পাশাপাশি টেক্সট এডিট, ডিলিট, হাইড, HTML হিসেবে এডিট করা যায়। Styles ট্যাবে ফরম্যাটিং চেক করা যায়। মোবাইল ভিউতে ইন্সপেক্ট করা যায় – ওয়েব ডেভেলপার ও বیزনেস মালিকের জন্য মোবাইল-ফ্রেন্ডলি সাইট বানাতে সাহায্যকারী।
Safari ব্রাউজারে ম্যাকে Inspect Element
Safari-এ ইন্সপেক্ট করার আগে Developer Tools সক্রিয় করুন:
- Safari খুলুন → Preferences।
- Advanced ট্যাবে যান।
- "Show Develop Menu In Menu Bar" চেক করুন।
- মেনুতে Develop অপশন আছে কিনা চেক করুন।
Safari-এ Inspect Element করার পদ্ধতি:
- Right-Click Method: পেজে যান → রাইট-ক্লিক → Inspect।
- Develop Menu Method: Develop মেনু → Show Web Inspector।
- Shortcut Keys Method:
CMD + OPTION + Iচাপুন।
এখন Safari-এ ম্যাকে Inspect Element করতে পারবেন। সাফারি ধীর খুললে সমাধান লিংক আর্টিকেলে আছে।
Firefox ব্রাউজারে ম্যাকে Inspect Element
Firefox-এ ম্যাকে Inspect করার পদ্ধতি:
- Right-Click Method: পেজে যান → রাইট-ক্লিক → Inspect Element। নির্দিষ্ট এলিমেন্টে রাইট-ক্লিক করেও করা যায়।
- Tools Menu Method: Tools মেনু → Web Developer → Inspect।
- Shortcut Keys Method:
COMMAND + OPTION + C(Mac-এ) চাপুন।
রাইট-ক্লিক ছাড়া ম্যাকে Inspect Element
রাইট-ক্লিক ছাড়া ইন্সপেক্ট করার জন্য শর্টকাট কী ব্যবহার করুন:
- Safari –
COMMAND + OPTION + I - Chrome –
COMMAND + OPTION + C - Firefox –
COMMAND + OPTION + C
অতিরিক্তভাবে Preferences, Tools বা Menus দিয়েও রাইট-ক্লিক ছাড়া ইন্সপেক্ট করা যায়। উপরের Safari, Chrome, Firefox-এর পদ্ধতিগুলো দেখুন।
