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

এআই সহায়তা এবং কনসোল অন্তর্দৃষ্টি

DevTools-এ AI উদ্ভাবন কীভাবে আপনাকে আরও, দ্রুত করতে দেয় তা অন্বেষণ করুন।
আপনার ওয়েবসাইটের স্টাইলিং, নেটওয়ার্ক, উত্স এবং কর্মক্ষমতা বিশ্লেষণ এবং উন্নত করতে জেমিনিকে সাহায্য করুন৷
Chrome DevTools-এ AI সহায়তার জন্য ব্যবহারের কেসগুলি অন্বেষণ করুন এবং এটি কীভাবে স্টাইলিং, পারফরম্যান্স এবং আরও অনেক কিছু জুড়ে আপনার ডিবাগিং ওয়ার্কফ্লোকে সমর্থন করতে পারে তা জানুন।
DevTools-এ কনসোল বার্তা এবং ত্রুটিগুলি বুঝুন এবং সেগুলি কীভাবে ঠিক করবেন তা শিখুন - কোনও কপি-পেস্টিং ছাড়াই৷

DevTools টিপস

সাধারণ ওয়েব ডেভেলপমেন্ট সমস্যা সমাধানের জন্য কীভাবে DevTools ব্যবহার করতে হয় তা ব্যাখ্যা করে আমাদের মাসিক ভিডিও সিরিজ অন্বেষণ করুন।
DevTools-এ পারফরম্যান্স ট্রেস কীভাবে রেকর্ড করতে হয় তা শিখুন এবং পারফরম্যান্সের সমস্যা শনাক্ত ও ঠিক করতে এটি বিশ্লেষণ করুন।
LCP সমস্যাগুলি ডিবাগ করুন এবং আপনি আপনার ব্যবহারকারীদের অনুরূপ অভিজ্ঞতা ডিবাগ করছেন কিনা তা দেখতে CrUX ডেটা ব্যবহার করুন
বিভিন্ন ধরণের ব্রাউজার ক্যাশে এবং কীভাবে সেগুলিকে Chrome DevTools-এ পরিদর্শন ও পরিচালনা করতে হয় সেগুলি দেখুন!
একটি উপাদান পরিদর্শন করার চেষ্টা করছেন, এবং "poof" এটি চলে গেছে? মনে হচ্ছে আপনার কোড আপনার সাথে লুকোচুরি খেলছে!

কর্মক্ষমতা অন্তর্দৃষ্টি পান

আপনার রানটাইম পারফরম্যান্সের বিভিন্ন দিক পরিমাপ এবং অপ্টিমাইজ করতে আপনাকে সাহায্য করার জন্য সরঞ্জামগুলির একটি বিস্তৃত পরিসর: পারফরম্যান্স প্যানেল, লাইটহাউস এবং আরও অনেক কিছু।
পারফরম্যান্স প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: কীভাবে একটি পারফরম্যান্স ট্রেস রেকর্ড করতে হয়, কীভাবে ট্রেসটি দেখতে এবং বিশ্লেষণ করতে হয় এবং আরও অনেক কিছু।
পারফরম্যান্স প্যানেল ডেভেলপারদের তাদের রানটাইম পারফরম্যান্স পরিমাপ করতে এবং 15 বছরের ভাল অংশে অপ্টিমাইজ করতে সাহায্য করছে। এটি কীভাবে এগিয়ে যাচ্ছে তা জানুন।
জায়গায় ট্রেস টীকা করুন এবং সরাসরি শেয়ার করার জন্য ট্রেস ফাইলের মধ্যে সরাসরি সেভ করুন।

খবর এবং আপডেট

Improved navigation and filtering in the DevTools Performance panel

Updated ১৯ মার্চ, ২০২৫

DevTools Performance panel updates make it easier to navigate within and filter traces.

Advance network analysis with Chrome DevTools

Updated ২৭ ফেব্রুয়ারী, ২০২৫

Advance network analysis with Chrome DevTools.

How we introduced Gemini to Chrome DevTools

Updated ১৪ জানুয়ারী, ২০২৫

Learn about fun and exciting use-cases of the new AI assistance panel in DevTools

সম্পদ পরিদর্শন এবং সম্পাদনা

উত্স প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: কীভাবে ফাইলগুলি দেখতে এবং সম্পাদনা করতে হয়, জাভাস্ক্রিপ্ট ডিবাগ করতে হয় এবং একটি ওয়ার্কস্পেস সেট আপ করতে হয়৷
শুরু করুন
ওয়ার্কস্পেস আপনাকে আপনার কম্পিউটারে সঞ্চিত সোর্স কোডে DevTools-এর মধ্যে করা পরিবর্তনগুলি সংরক্ষণ করতে দেয়। আপনার নিজের প্রকল্পে একটি কর্মক্ষেত্র কিভাবে সেট আপ করবেন তা শিখুন।
টিউটোরিয়াল পড়ুন

নেটওয়ার্ক কার্যকলাপ বিশ্লেষণ

নেটওয়ার্ক প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: প্রতিক্রিয়া পরিদর্শন করুন এবং সংস্থাগুলির অনুরোধ করুন, শিরোনামগুলি ওভাররাইট করুন এবং আরও অনেক কিছু৷
শুরু করুন
নেটওয়ার্ক প্যানেলের মধ্যে সাধারণ কাজগুলির মাধ্যমে আপনাকে গাইড করার জন্য একটি হ্যান্ডস-অন টিউটোরিয়াল৷
টিউটোরিয়াল পড়ুন

আরও সরঞ্জাম

DevTools-এ অন্যান্য সমস্ত বৈশিষ্ট্য এবং ক্ষমতা আবিষ্কার করুন।
কিভাবে একটি পৃষ্ঠার DOM দেখতে এবং পরিবর্তন করতে হয় তা জানুন।
কিভাবে একটি পৃষ্ঠার CSS দেখতে এবং পরিবর্তন করতে হয় তা জানুন।
HTML, CSS, এবং JavaScript-এ পরিবর্তনগুলি ট্র্যাক করুন।
বার্তা লগ করুন এবং JavaScript চালান।

কর্মক্ষমতা

ওয়েবসাইট কর্মক্ষমতা মূল্যায়ন.

স্মৃতি

মেমরির সমস্যাগুলি খুঁজুন যা পৃষ্ঠার কার্যক্ষমতাকে প্রভাবিত করে, মেমরি লিক সহ, এবং আরও অনেক কিছু।
ওয়েব অ্যাপ্লিকেশানগুলি পরিদর্শন করুন, সংশোধন করুন এবং ডিবাগ করুন, ক্যাশে পরীক্ষা করুন, সঞ্চয়স্থান দেখুন এবং আরও অনেক কিছু করুন৷
পরিদর্শন এবং অ্যানিমেশন পরিবর্তন.
রেকর্ড করুন, রিপ্লে করুন, ব্যবহারকারীর প্রবাহ পরিমাপ করুন এবং তাদের পদক্ষেপগুলি সম্পাদনা করুন৷
বিকল্পগুলির একটি সংগ্রহ আবিষ্কার করুন যা ওয়েব সামগ্রী রেন্ডারিংকে প্রভাবিত করে৷
সংরক্ষিত ঠিকানাগুলি পরিদর্শন এবং ডিবাগ করুন।
আপনার ওয়েবসাইটের সমস্যাগুলি খুঁজুন এবং ঠিক করুন।
নিশ্চিত করুন যে একটি পৃষ্ঠা সম্পূর্ণরূপে HTTPS দ্বারা সুরক্ষিত।

মিডিয়া

ব্রাউজার ট্যাবে তথ্য দেখুন এবং মিডিয়া প্লেয়ার ডিবাগ করুন।
ডিভাইস সেন্সর অনুকরণ.
প্রমাণীকরণকারীদের অনুকরণ করুন।