Chrome DevTools খুলুন

Chrome DevTools খোলার অনেক উপায় আছে। এই ব্যাপক রেফারেন্স থেকে আপনার প্রিয় উপায় চয়ন করুন.

আপনি Chrome UI বা কীবোর্ড ব্যবহার করে DevTools অ্যাক্সেস করতে পারেন:

অতিরিক্তভাবে, প্রতিটি নতুন ট্যাবের জন্য কীভাবে DevTools স্বয়ংক্রিয়ভাবে খুলতে হয় তা শিখুন।

Chrome মেনু থেকে DevTools খুলুন

আপনি যদি UI পছন্দ করেন, আপনি Chrome-এর ড্রপ-ডাউন মেনু থেকে DevTools অ্যাক্সেস করতে পারেন।

DOM বা CSS পরিদর্শন করতে এলিমেন্টস প্যানেল খুলুন

পরিদর্শন করতে, একটি পৃষ্ঠায় একটি উপাদানের ডান-ক্লিক করুন এবং পরিদর্শন নির্বাচন করুন।

ক্রোমের একটি ড্রপ-ডাউন মেনুতে পরিদর্শন বিকল্পটি৷

DevTools এলিমেন্টস প্যানেল খোলে এবং DOM ট্রিতে উপাদান নির্বাচন করে। শৈলী ফলকে, আপনি নির্বাচিত উপাদানে প্রয়োগ করা CSS নিয়ম দেখতে পারেন।

এলিমেন্টস প্যানেলে নির্বাচিত একটি উপাদান।

Chrome এর প্রধান মেনু থেকে আপনার ব্যবহৃত শেষ প্যানেলটি খুলুন

শেষ DevTools প্যানেল খুলতে, ক্লিক করুন তিন-বিন্দু মেনু। ঠিকানা বারের ডানদিকে বোতাম এবং আরও সরঞ্জাম > বিকাশকারী সরঞ্জাম নির্বাচন করুন।

তিন-বিন্দু মেনু থেকে বিকাশকারী সরঞ্জাম বিকল্পটি নির্বাচন করা হয়েছে।

বিকল্পভাবে, আপনি একটি শর্টকাট দিয়ে শেষ প্যানেলটি খুলতে পারেন। আরও জানতে পরবর্তী অধ্যায় দেখুন।

শর্টকাট সহ প্যানেল খুলুন: উপাদান, কনসোল বা আপনার শেষ প্যানেল

আপনি যদি কীবোর্ড পছন্দ করেন, আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে ক্রোমে একটি শর্টকাট টিপুন:

ওএস উপাদান কনসোল আপনার শেষ প্যানেল
উইন্ডোজ বা লিনাক্স Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
ম্যাক Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

এখানে শর্টকাটগুলি মনে রাখার একটি সহজ উপায় রয়েছে:

  • C মানে CSS।
  • জাভাস্ক্রিপ্টের জন্য জে .
  • আমি আপনার পছন্দ মনোনীত.

C শর্টকাট এলিমেন্টস প্যানেল খোলে পরিদর্শন করুন। পরিদর্শক মোড। আপনি যখন একটি পৃষ্ঠার উপাদানগুলির উপর হোভার করেন তখন এই মোড আপনাকে সহায়ক টুলটিপ দেখায়। আপনি এলিমেন্টস > শৈলী প্যানে যেকোন উপাদানের CSS দেখতে ক্লিক করতে পারেন।

টুলটিপ সহ ইন্সপেক্টর মোডে এলিমেন্টস প্যানেল।

DevTools শর্টকাটগুলির সম্পূর্ণ তালিকার জন্য, কীবোর্ড শর্টকাটগুলি দেখুন৷

প্রতিটি নতুন ট্যাবে DevTools স্বয়ংক্রিয়ভাবে খুলুন

কমান্ড লাইন থেকে Chrome চালান এবং --auto-open-devtools-for-tabs পতাকা পাস করুন:

  1. চলমান যেকোন ক্রোম ইন্সট্যান্স বন্ধ করুন।

  2. আপনার প্রিয় টার্মিনাল বা কমান্ড লাইন অ্যাপ্লিকেশন চালান.

  3. আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে, নিম্নলিখিত কমান্ডটি চালান:

  • ম্যাক অপারেটিং সিস্টেম:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • উইন্ডোজ:

    start chrome --auto-open-devtools-for-tabs
    
  • লিনাক্স:

    google-chrome --auto-open-devtools-for-tabs
    

আপনি Chrome বন্ধ না করা পর্যন্ত প্রতিটি নতুন ট্যাবের জন্য DevTools স্বয়ংক্রিয়ভাবে খুলবে।

এরপর কি?

এরপর, দ্রুত DevTools নেভিগেশনের জন্য কিছু দরকারী শর্টকাট এবং সেটিংস শিখতে নিম্নলিখিত ভিডিওটি দেখুন।

আরও হাতে-কলমে শেখার অভিজ্ঞতার জন্য, দেখুন কিভাবে DevTools কাস্টমাইজ করা যায়