Chrome DevTools খুলুন

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

ক্রোম ডেভটুলস খোলার অনেক উপায় আছে। এই বিস্তারিত নির্দেশিকা থেকে আপনার পছন্দের উপায়টি বেছে নিন।

আপনি ক্রোম ইউআই অথবা কিবোর্ড ব্যবহার করে ডেভটুলস অ্যাক্সেস করতে পারেন:

• ক্রোমের ড্রপ-ডাউন মেনু থেকে।
• ডেডিকেটেড শর্টকাট রয়েছে যা এলিমেন্টস , কনসোল বা আপনার ব্যবহার করা সর্বশেষ প্যানেলটি খোলে।

এছাড়াও, প্রতিটি নতুন ট্যাবের জন্য কীভাবে স্বয়ংক্রিয়ভাবে ডেভটুলস খুলতে হয় তা জেনে নিন।

ক্রোম মেনু থেকে ডেভটুলস খুলুন

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

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

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

DevTools এলিমেন্টস প্যানেলটি খোলে এবং DOM ট্রি থেকে এলিমেন্টটি নির্বাচন করে। স্টাইলস ট্যাবে, আপনি নির্বাচিত এলিমেন্টটিতে প্রয়োগ করা CSS নিয়মগুলো দেখতে পাবেন।

ক্রোমের প্রধান মেনু থেকে আপনার ব্যবহার করা সর্বশেষ প্যানেলটি খুলুন।

সর্বশেষ DevTools প্যানেলটি খুলতে, অ্যাড্রেস বারের ডানদিকে থাকা more_vert বোতামটিতে ক্লিক করুন এবং More Tools > Developer Tools নির্বাচন করুন।

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

শর্টকাট ব্যবহার করে প্যানেলগুলো খুলুন: এলিমেন্টস, কনসোল, অথবা আপনার সর্বশেষ প্যানেল।

আপনি যদি কীবোর্ড ব্যবহার করতে পছন্দ করেন, তাহলে আপনার অপারেটিং সিস্টেম অনুযায়ী ক্রোমে একটি শর্টকাট চাপুন:

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

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

• C মানে CSS।
• J মানে জাভাস্ক্রিপ্ট।
• I আপনার পছন্দকে নির্দেশ করে।

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

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

DevTools খোলা থাকা অবস্থায়, ক্যাশে সহ বা ক্যাশে ছাড়া পৃষ্ঠাটি রিলোড করুন।

DevTools খোলা থাকা অবস্থায়, আপনি তিনটি উপায়ে আপনার পেজ রিলোড করতে পারেন। Chrome উইন্ডোর প্রধান অ্যাকশন বারে, রিফ্রেশ রিলোড বাটনটি লং-প্রেস করুন এবং অপশনগুলো থেকে একটি বেছে নিন:

• সাধারণ রিলোড । রিলোডের সময় কমাতে ক্যাশে ব্যবহার করে।

  শর্টকাট: Cmd + R (macOS) অথবা Ctrl + R (Windows/Linux)।

  দ্রষ্টব্য: নেটওয়ার্ক প্যানেলে থাকা ‘ক্যাশ নিষ্ক্রিয় করুন’ চেকবক্সটি চালু করলে সমস্ত সাধারণ রিলোডের সময় ক্যাশ ব্যবহার করা হয় না।

• হার্ড রিলোড । এটি ক্যাশে বাইপাস করে, কিন্তু তা খালি করে না।

  শর্টকাট: Cmd + Shift + R (macOS) অথবা Ctrl + Shift + R (Windows/Linux)।

• ক্যাশ খালি করুন এবং হার্ড রিলোড করুন । রিলোড করার আগে সমস্ত সাইটের ক্যাশ খালি করে দেয়।

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

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

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

   গুরুত্বপূর্ণ বিষয়: এই ফ্ল্যাগটি শুধুমাত্র আপনার খোলা প্রথম Chrome ইনস্ট্যান্সের জন্যই কাজ করে। যদি এটি আপনার ক্ষেত্রে, উদাহরণস্বরূপ Windows-এ, কাজ না করে, তাহলে টাস্ক ম্যানেজার থেকে চালু থাকা সমস্ত Chrome প্রসেস বন্ধ করে দিন।

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 স্বয়ংক্রিয়ভাবে খুলে যাবে।

এরপর কী?

সফলতা: অভিনন্দন! আপনি সফলভাবে ক্রোম ডেভটুলস-এর ক্ষমতা আনলক করেছেন।

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

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