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

AI দিয়ে ডিবাগ করুন

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

Chrome DevTools MCP (মডেল কনটেক্সট প্রোটোকল) সার্ভারটিকে আপনার পছন্দের টুলের সাথে সংযুক্ত করুন: Gemini CLI, Claude Code, Cline, Copilot, এবং আরও অনেক কিছু।

GitHub সম্পর্কে আরও জানুন

ডেভেলপার টুলিং টিপস

DevTools-এ সাধারণ ডিবাগিং পরিস্থিতিগুলি মজাদারভাবে তুলে ধরার জন্য আমাদের মাসিক ভিডিও সিরিজটি ঘুরে দেখুন।
আপডেট করা পারফরম্যান্স প্যানেলটি ঘুরে দেখুন, যেখানে আপনাকে দেখানো হবে কিভাবে কোর ওয়েব ভাইটালস (LCP, CLS, INP) পরিমাপ করতে হয় এবং কিভাবে জেমিনি থেকে উপযুক্ত পরামর্শ পেতে হয়।
DevTools দিয়ে যাত্রা শুরু করুন এবং একজন ডিবাগিং পাইরেট হয়ে উঠুন! ফোকাস স্টাইল অনুকরণ, অটোফিলের মাধ্যমে ফর্ম পরীক্ষা এবং নেটওয়ার্ক ওভাররাইডের মাধ্যমে ব্যাকএন্ড ত্রুটি সমাধানের কৌশল আবিষ্কার করুন।
Chrome DevTools-এর সাহায্যে Al-সহায়তাযুক্ত ডিবাগিংয়ের শক্তি অন্বেষণ করুন! কনসোল ইনসাইটস, স্টাইলিং, পারফরম্যান্স, নেটওয়ার্ক এবং উৎসের জন্য Al সহায়তা কীভাবে আপনার কর্মপ্রবাহকে সুপারচার্জ করতে পারে তা আবিষ্কার করুন।
উন্নত নেটওয়ার্ক প্যানেল কৌশলগুলি অন্বেষণ করুন, যার মধ্যে রয়েছে পারফরম্যান্সের বাধাগুলি কীভাবে খুঁজে বের করা যায়, পপআপগুলি ডিবাগ করা যায়, নেটওয়ার্কের অবস্থা কনফিগার করা যায়, নেটওয়ার্ক অনুরোধ শুরুকারী নির্ধারণের জন্য শর্টকাট ব্যবহার করা যায় এবং আরও অনেক কিছু।

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

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

খবর এবং আপডেট

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

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

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

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

আরও সরঞ্জাম

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

কর্মক্ষমতা

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

স্মৃতি

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

মিডিয়া

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