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

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

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

আপনার পছন্দের টুল যেমন: Antigravity, Claude Code, Cline, Copilot, ইত্যাদির সাথে Chrome DevTools MCP (Model Context Protocol) সার্ভারটি সংযুক্ত করুন।

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

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

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

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

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

খবর এবং আপডেট

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

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

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

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

আরও সরঞ্জাম

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