ওভারভিউ

Chrome DevTools হল ওয়েব ডেভেলপার টুলগুলির একটি সেট যা সরাসরি Google Chrome ব্রাউজারে তৈরি করা হয়েছে৷ DevTools আপনাকে উড়তে থাকা পৃষ্ঠাগুলি সম্পাদনা করতে এবং সমস্যাগুলি দ্রুত নির্ণয় করতে সহায়তা করতে পারে, যা শেষ পর্যন্ত আপনাকে আরও দ্রুততর ওয়েবসাইট তৈরি করতে সহায়তা করে৷

CSS ডিবাগিং, প্রোটোটাইপিং CSS, জাভাস্ক্রিপ্ট ডিবাগিং এবং লোড কর্মক্ষমতা বিশ্লেষণ সহ মূল DevTools ওয়ার্কফ্লোগুলির লাইভ প্রদর্শনের জন্য ভিডিওটি দেখুন।

DevTools খুলুন

DevTools খোলার অনেক উপায় আছে, কারণ বিভিন্ন ব্যবহারকারী DevTools UI এর বিভিন্ন অংশে দ্রুত অ্যাক্সেস চায়।

  • DOM বা CSS এর সাথে কাজ করতে, পৃষ্ঠায় একটি উপাদানের ডান-ক্লিক করুন এবং এলিমেন্ট প্যানেলে ঝাঁপ দিতে পরিদর্শন নির্বাচন করুন। অথবা Command + Option + C (Mac) বা Control + Shift + C (Windows, Linux, ChromeOS) টিপুন।
  • লগ করা বার্তা দেখতে বা জাভাস্ক্রিপ্ট চালাতে, সরাসরি কনসোল প্যানেলে যেতে Command + Option + J (Mac) বা Control + Shift + J (Windows, Linux, ChromeOS) টিপুন।

আরও বিশদ বিবরণ এবং কর্মপ্রবাহের জন্য Chrome DevTools খুলুন দেখুন।

এবার শুরু করা যাক

আপনি যদি আরও অভিজ্ঞ ওয়েব ডেভেলপার হন, তাহলে DevTools কীভাবে আপনার উৎপাদনশীলতা উন্নত করতে পারে তা শেখার জন্য এখানে প্রস্তাবিত শুরুর পয়েন্টগুলি রয়েছে:

DevTools আবিষ্কার করুন

DevTools UI একটু অপ্রতিরোধ্য হতে পারে... অনেক ট্যাব আছে! কিন্তু, কি সম্ভব তা বোঝার জন্য আপনি যদি প্রতিটি ট্যাবের সাথে পরিচিত হতে কিছুটা সময় নেন, তাহলে আপনি আবিষ্কার করতে পারেন যে DevTools আপনার উত্পাদনশীলতাকে গুরুত্ব সহকারে বাড়িয়ে তুলতে পারে।

ডিভাইস মোড

ভিউপোর্টে ডিভাইস মোড চালু হয়েছে।

মোবাইল ডিভাইস অনুকরণ.

উপাদান প্যানেল

উপাদান প্যানেল।

DOM এবং CSS দেখুন এবং পরিবর্তন করুন।

কনসোল প্যানেল

কনসোল প্যানেল।

কনসোল থেকে বার্তা দেখুন এবং জাভাস্ক্রিপ্ট চালান।

উত্স প্যানেল

উত্স প্যানেল.

JavaScript ডিবাগ করুন, পৃষ্ঠা রিলোড জুড়ে DevTools-এ করা পরিবর্তনগুলি বজায় রাখুন, JavaScript-এর স্নিপেটগুলি সংরক্ষণ করুন এবং চালান এবং আপনি DevTools-এ করা পরিবর্তনগুলি স্থানীয় উত্সগুলিতে সংরক্ষণ করুন৷

নেটওয়ার্ক প্যানেল

নেটওয়ার্ক প্যানেল।

নেটওয়ার্ক কার্যকলাপ দেখুন এবং ডিবাগ করুন।

রেকর্ডার প্যানেল

রেকর্ডার প্যানেল।

রেকর্ড করুন, রিপ্লে করুন এবং ব্যবহারকারীর প্রবাহ পরিমাপ করুন।

কর্মক্ষমতা প্যানেল

কর্মক্ষমতা প্যানেল।

লোড এবং রানটাইম কর্মক্ষমতা উন্নত করার উপায় খুঁজুন।

মেমরি প্যানেল

মেমরি প্যানেল।

পৃষ্ঠার কর্মক্ষমতা প্রভাবিত করে এমন মেমরি সমস্যাগুলি খুঁজুন এবং ঠিক করুন, উদাহরণস্বরূপ, মেমরি লিক।

অ্যাপ্লিকেশন প্যানেল

পরিষেবা কর্মীদের বিভাগ সহ অ্যাপ্লিকেশন প্যানেল খোলা হয়েছে৷

IndexedDB বা Web SQL ডাটাবেস, স্থানীয় এবং সেশন স্টোরেজ, কুকিজ, অ্যাপ্লিকেশন ক্যাশে, ছবি, ফন্ট এবং স্টাইলশীট সহ লোড হওয়া সমস্ত সংস্থানগুলি পরিদর্শন করুন।

নিরাপত্তা প্যানেল

নিরাপত্তা প্যানেল।

মিশ্র বিষয়বস্তুর সমস্যা, শংসাপত্রের সমস্যা এবং আরও অনেক কিছু ডিবাগ করুন।

সম্প্রদায়

Crbug-এ বাগ রিপোর্ট এবং বৈশিষ্ট্যের অনুরোধ ফাইল করুন, যা ইঞ্জিনিয়ারিং দলের বাগ ট্র্যাকার।

ক্রবাগ

আপনি যদি আমাদেরকে কোনো বাগ বা বৈশিষ্ট্যের অনুরোধে সতর্ক করতে চান কিন্তু আপনার কাছে বেশি সময় না থাকে, তাহলে আপনাকে @ChromeDevTools-এ একটি টুইট পাঠাতে স্বাগত জানাই। আমরা উত্তর দিই এবং অ্যাকাউন্ট থেকে নিয়মিত ঘোষণা পাঠাই।

টুইটার

DevTools ব্যবহারে সহায়তার জন্য, স্ট্যাক ওভারফ্লো হল সেরা চ্যানেল।

স্ট্যাক ওভারফ্লো

DevTools ডক্সে বাগ বা বৈশিষ্ট্যের অনুরোধ ফাইল করতে, একটি GitHub সমস্যা খুলুন।

ডক্স সমস্যা

DevTools এর একটি স্ল্যাক চ্যানেলও রয়েছে, কিন্তু দলটি ধারাবাহিকভাবে এটি পর্যবেক্ষণ করে না।

স্ল্যাক