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

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

"আমরা সবাই এখন ইন্টারনেটের সাথে সংযুক্ত, যেন একটি বিশাল মস্তিষ্কের নিউরনস" ~ স্টিফেন হকিং

খুব সঠিক, তো? ইন্টারনেটের শক্তি অদ্ভুত! ওয়েব مليয়ন মিলিয়ন ওয়েবসাইট এবং তথ্য পূর্ণ। আপনি গবেষণার জন্য নির্দিষ্ট তথ্য খুঁজছেন, অথবা সادारणে এন্টারটেইনমেন্ট পোর্টাল ব্রাউজ করছেন, অথবা সোশ্যাল মিডিয়া খাঙছেন – ওয়েবসাইটগুলো আমাদের গ্যাজেটসের সাথে আটকে রাখার একটি প্রধান উৎস।

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

ছবির উৎস: YouTube

আপনি কি কোনো ওয়েবসাইট ব্যবহার করার সময় "Inspect Element" ফিচার শুনেছেন? Inspect Element হচ্ছে একটি ব্রাউজার টুল যা আপনাকে ওয়েবপেজের HTML এবং CSS স্ক্রিপ্ট দেখতে ও এডিট করতে দেয়। এই ফিচার সকল ব্রাউজারে থাকে, তবে নাম ভিন্ন হতে পারে, যেমন Chrome-এ Developer Mode, Safari-এ Web Inspector এবং Firefox-এ Inspect।

এই পোস্টে আমরা macOS-এ বিভিন্ন ব্রাউজারে Inspect Element কীভাবে ব্যবহার করবেন তা শিখব, Safari, Google Chrome, এবং Firefox সহ। আর শুরু করার আগে, Inspect Element টুল কীভাবে ব্যবহার করবেন এবং এটি কেন উপকারী সেটা জানিয়ে ফেলি।

"Inspect Element" কী?

যখন আপনি যেকোনো ওয়েবসাইটে রাইট-ক্লিক করবেন, কনটেক্সট মেনুতে "Inspect Element" ফিচারটি দেখবেন। টেকনিক্যাল ভাষায়, Inspect Element টুল ব্যবহারকারীদের ওয়েবপেজকে ফ্রন্ট-এন্ডে দেখতে বা মডিফাই করতে দেয়। এই টুল প্রধানত ফ্রন্ট-এন্ড ডেভেলপাররা একটি ওয়েবসাইটের লুক অ্যান্ড ফিল নিয়ে পরীক্ষা-নিরীক্ষা করতে ব্যবহার করে লাইভ কোড সাবোটেজ করার ভয় ছাড়া। এটি "Testing" ফেজে ওয়েবসাইটের এলিমেন্টগুলো "ইনস্পেক্ট" করতে ব্যবহৃত হয়।

Mac-এ Inspect Element কীভাবে ব্যবহার করবেন

Inspect Element ফিচার প্রতিটি ওয়েব ব্রাউজারের সাথে এম্বেডেড আসে, Safari, Chrome, এবং Firefox সহ। এখন আমরা প্রতিটি ওয়েব ব্রাউজারের Mac-এ Inspect Element কীভাবে ব্যবহার করবেন তা শিখব।

Safari:

শুরু করার আগে, প্রথমে Safari-এ "Inspect Element" ফিচারটি সক্রিয় করি যদি ডিফল্টভাবে অন না থাকে।

Safari চালু করুন, Preferences খুলুন।

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

"Advanced" ট্যাবে যান এবং "Show develop menu in the menu bar" অপশনে চেক দিন।

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

এই অপশন চেক দিলেই মেনু বার에 একটি নতুন "Develop" অপশন যোগ হবে।

Safari ব্রাউজারে Mac-এ Inspect Element করার জন্য আপনাকে যা করতে হবে:

অপশন ১: রাইট-ক্লিক মেথড

Mac-এ Inspect Element টুল ব্যবহার করার সবচেয়ে দ্রুত উপায় হচ্ছে রাইট-ক্লিক মেথড।

ওয়েবপেজে যান, সাদা জায়গায় রাইট-ক্লিক করুন, "Inspect" সিলেক্ট করুন।

অপশন ২: "Develop" মেনু 통해서

নতুন যোগ হওয়া "Develop" মেনু 통해서ও Inspect Element ফিচার ব্যবহার করা যায়।

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

ওয়েবসাইটে যান, উপরের মেনু বার থেকে "Develop" অপশনে ক্লিক করুন, তারপর "Show web inspector" সিলেক্ট করুন।

অপশন ৩: শর্টকাট কী ব্যবহার করুন

macOS-এ Inspect Element টুল ব্যবহার করার তৃতীয় বিকল্প হচ্ছে শর্টকাট কী।

সহজে Command + Option + I কী কোમ্বিনেশন চাপুন একটি ওয়েবপেজের Inspect Element করার জন্য।

Google Chrome:

Chrome ব্রাউজারে Mac-এ Inspect Element করার ৪টি ভিন্ন উপায় আছে।

অপশন ১: রাইট-ক্লিক মেথড

Mac-এ Chrome ব্রাউজার চালু করুন, যে ওয়েবসাইটে এলিমেন্ট ইনস্পেক্ট করতে চান সেটা ভিজিট করুন।

কहीं রাইট-ক্লিক করুন এবং "Inspect" সিলেক্ট করুন।

অপশন ২: মেনু বার 통해서

Chrome চালু করুন, উপরের মেনু বার থেকে "View" অপশনে ক্লিক করুন।

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

ছবির উৎস: Super User

Developer Tools > Developer > Developer Tools-এ নেভিগেট করুন।

Inspect Element Chrome-এ ব্যবহার করার জন্য "Customize and Control" অপশন সিলেক্ট করুন।

অপশন ৩: কীবোর্ড শর্টকাট ব্যবহার করুন

Command + Option + C চাপুন Chrome-এ "Inspect Element" উইন্ডো देखने के জন্য।

অপশন ৪: সেটিংস 통해서

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

macOS-এ Google Chrome চালু করুন, উপরের ডান কোণে তিন-ডট আইকনে ক্লিক করুন।

"More Tools"-এ ক্লিক করুন এবং তারপর "Developer Tools" সিলেক্ট করুন।

Mozilla Firefox:

Firefox-এ Inspect Element টুল ব্যবহার করার জন্য এই দ্রুত ধাপগুলো অনুসরণ করুন।

অপশন ১: রাইট-ক্লিক মেথড

Firefox চালু করুন, ওয়েবসাইটে যান।

স্ক্রিনের কোথাও রাইট-ক্লিক করুন, "Inspect" সিলেক্ট করুন।

অপশন ২: মেনু 통해서

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

Mac-এ Firefox চালু করুন। উপরের মেনু বার থেকে "Tools" অপশনে ক্লিক করুন, "Web Developer" সিলেক্ট করুন। "Inspect"-এ ট্যাপ করুন।

অপশন ৩: শর্টকাট কী

Firefox ব্রাউজারে Mac-এ Inspect Element সক্রিয় করার শর্টকাট হচ্ছে Command + Option + C কী কোম্বিনেশন চাপুন।

FAQs:

প্র. ১. Mac-এ Inspect Element কীভাবে খুলব?

macOS-এ Inspect Element মাস্টার করুন: Chrome, Safari, Firefox-র জন্য ধাপে ধাপ গাইড

ছবির উৎস: Zapier

Mac-এ Inspect Element টুল খোলার সবচেয়ে দ্রুত উপায় হচ্ছে ওয়েবসাইটে রাইট-ক্লিক করে কনটেক্সট মেনু থেকে "Inspect" অপশন বেছে নেওয়া।

প্র. ২. Mac-এ Inspect Element-এর শর্টকাট কী?

প্রতিটি ব্রাউজারের জন্য Inspect Element-এর শর্টকাট ভিন্ন:

  • Safari: Command + Option + I
  • Chrome: Command + Option + C
  • Firefox: Command Option + C

প্র. ৩. Mac-এ Chrome-এ Inspect Element কীভাবে খুলব?

Google Chrome-এ Inspect Element ব্যবহার করতে আপনি Command + Option + C কী কোম্বিনেশন চাপতে পারেন। অথবা স্ক্রিনের কোথাও রাইট-ক্লিক করে "Inspect" বেছে নিয়ে Inspect Element উইন্ডো চালু করতে পারেন।

Mac-এ Inspect Element করার ফাইনাল ওয়ার্ড

macOS-এ বিভিন্ন ওয়েব ব্রাউজারে Inspect Element টুল কীভাবে ব্যবহার করবেন সেটা নিয়ে একটি দ্রুত গাইড, Safari, Chrome, এবং Firefox সহ। সোশ্যাল মিডিয়ায় আমাদের ফলো করুন – Facebook, Instagram and YouTube। আপনি Mac-এ Inspect Element টুল কতটুকু ব্যবহার করেন এবং কোন উদ্দেশ্যে? পাঠকদের সাথে আপনার মতামত শেয়ার করুন।

  1. Chrome, Safari এবং Firefox-এ বন্ধ ট্যাব দ্রুত পুনরায় খোলার উপায়

  2. ম্যাকে কুকি মুছে ফেলুন: Chrome, Firefox এবং Safari-র জন্য ধাপে ধাপে গাইড

  3. ফায়ারফক্স এবং ক্রোমে অফলাইন ব্রাউজিং সক্ষম করুন: ধাপে ধাপে গাইড

  4. ম্যাকে কুকিজ সক্রিয় করা: Safari, Chrome এবং Firefox-এ ধাপে ধাপে গাইড (২০২২)