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 পতাকা পাস করুন:
চলমান যেকোন ক্রোম ইন্সট্যান্স বন্ধ করুন।
আপনার প্রিয় টার্মিনাল বা কমান্ড লাইন অ্যাপ্লিকেশন চালান.
আপনার অপারেটিং সিস্টেমের উপর নির্ভর করে, নিম্নলিখিত কমান্ডটি চালান:
macOS:
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 কাস্টমাইজ করা যায় ।