Chrome for Developers

সরাসরি আসল কন্টেন্টে যান

DevTools

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 দিয়ে যাত্রা শুরু করুন এবং একজন ডিবাগিং পাইরেট হয়ে উঠুন! ফোকাস স্টাইল অনুকরণ, অটোফিলের মাধ্যমে ফর্ম পরীক্ষা এবং নেটওয়ার্ক ওভাররাইডের মাধ্যমে ব্যাকএন্ড ত্রুটি সমাধানের কৌশল আবিষ্কার করুন।

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

আপনার রানটাইম পারফরম্যান্সের বিভিন্ন দিক পরিমাপ এবং অপ্টিমাইজ করতে আপনাকে সাহায্য করার জন্য সরঞ্জামগুলির একটি বিস্তৃত পরিসর: পারফরম্যান্স প্যানেল, লাইটহাউস এবং আরও অনেক কিছু।

কর্মক্ষমতা টুল ওভারভিউ

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

খবর এবং আপডেট

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

বৈশিষ্ট্য উল্লেখ

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

একটি কর্মক্ষেত্র সেট আপ করুন

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

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

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

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

আরও সরঞ্জাম

DevTools-এ অন্যান্য সমস্ত বৈশিষ্ট্য এবং ক্ষমতা আবিষ্কার করুন।

Read the original on developer.chrome.com ↗