DevTools
Chrome DevTools হল ওয়েব ডেভেলপার টুলগুলির একটি সেট যা সরাসরি Google Chrome ব্রাউজারে তৈরি করা হয়েছে৷ DevTools আপনাকে উড়তে থাকা পৃষ্ঠাগুলি সম্পাদনা করতে এবং দ্রুত সমস্যাগুলি নির্ণয় করতে দেয়, যা আপনাকে আরও ভাল ওয়েবসাইটগুলি দ্রুত তৈরি করতে সহায়তা করে৷
AI দিয়ে ডিবাগ করুন
জানুন কীভাবে DevTools-এর AI উদ্ভাবন আপনাকে আরও বেশি কাজ, আরও দ্রুত করতে সাহায্য করে। DevTools-এর শক্তিকে আপনার প্রিয় কোডিং এজেন্টগুলোর সাথে সংযুক্ত করতে এজেন্টদের জন্য DevTools ব্যবহার করুন।
এআই উদ্ভাবন, এআই উদ্ভাবন
আপনার ওয়েবসাইটের স্টাইলিং, নেটওয়ার্ক, উৎস এবং কর্মক্ষমতা বিশ্লেষণ এবং উন্নত করতে জেমিনিকে সাহায্য করুন। কনসোল এবং উৎস প্যানেলে কনসোল ত্রুটি এবং কোড পরামর্শের জন্য সাহায্য পান।
এজেন্টদের জন্য ডেভটুলস
আপনার এআই ওয়ার্কফ্লোর মধ্যে, নেটওয়ার্ক কার্যকলাপ নিরীক্ষা করতে, ট্রেস রেকর্ড করতে এবং ওয়েব অ্যাপ্লিকেশন ট্রাবলশুট করতে আপনি যে বিশ্বস্ত টুলগুলো ব্যবহার করেন, সেগুলোই আপনার কোডিং এজেন্টদের দিন।
আপনার পছন্দের টুল যেমন: Antigravity, Claude Code, Cline, Copilot, ইত্যাদির সাথে Chrome DevTools MCP (Model Context Protocol) সার্ভারটি সংযুক্ত করুন।
আপনার পছন্দের টুল যেমন: Antigravity, Claude Code, Cline, Copilot, ইত্যাদির সাথে Chrome DevTools MCP (Model Context Protocol) সার্ভারটি সংযুক্ত করুন।
কর্মক্ষমতা বুঝুন
আপনার পৃষ্ঠার পারফরম্যান্সের একটি বিস্তৃত এবং কার্যকর দৃশ্য পান।
সম্পদ পরিদর্শন করুন
আপনার পৃষ্ঠা দ্বারা লোড করা সংস্থানগুলি কীভাবে পরিদর্শন করবেন এবং আপনার ব্রাউজার থেকে সেগুলি সম্পাদনা করবেন তা শিখুন৷
নেটওয়ার্ক বিশ্লেষণ করুন
ফ্লাইতে নেটওয়ার্ক অনুরোধ এবং প্রতিক্রিয়াগুলি বিশ্লেষণ এবং ওভাররাইট করুন।
ডেভেলপার টুলিং টিপস
DevTools-এ সাধারণ ডিবাগিং পরিস্থিতিগুলি মজাদারভাবে তুলে ধরার জন্য আমাদের মাসিক ভিডিও সিরিজটি ঘুরে দেখুন।
কোডিং এজেন্টের মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা অনুকরণ করুন
এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার এজেন্টকে রেসপন্সিভ লেআউট যাচাই করতে, অবস্থান-সচেতন এপিআই পরীক্ষা করতে এবং বিভিন্ন সিপিইউ বা নেটওয়ার্ক গতি অনুকরণ করতে দেয়।
কোডিং এজেন্টের সাহায্যে লাইটহাউস অডিট স্বয়ংক্রিয় করুন
এজেন্টদের জন্য ক্রোম ডেভটুলস-এর লাইটহাউস আপনার কোডিং এজেন্টকে অ্যাক্সেসিবিলিটি, এসইও, সেরা অনুশীলন এবং এজেন্টিক ব্রাউজিং-এর জন্য লাইভ হেলথ চেক করার মাধ্যমে ওয়েবসাইটের মান মূল্যায়ন করতে দেয়।
পারফরম্যান্স অপ্টিমাইজেশন পিটস্টপ
আপডেট করা পারফরম্যান্স প্যানেলটি ঘুরে দেখুন, যেখানে আপনাকে দেখানো হবে কিভাবে কোর ওয়েব ভাইটালস (LCP, CLS, INP) পরিমাপ করতে হয় এবং কিভাবে জেমিনি থেকে উপযুক্ত পরামর্শ পেতে হয়।
পিক্সেল পাইরেট
DevTools দিয়ে যাত্রা শুরু করুন এবং একজন ডিবাগিং পাইরেট হয়ে উঠুন! ফোকাস স্টাইল অনুকরণ, অটোফিলের মাধ্যমে ফর্ম পরীক্ষা এবং নেটওয়ার্ক ওভাররাইডের মাধ্যমে ব্যাকএন্ড ত্রুটি সমাধানের কৌশল আবিষ্কার করুন।
কর্মক্ষমতা অন্তর্দৃষ্টি পান
আপনার রানটাইম পারফরম্যান্সের বিভিন্ন দিক পরিমাপ এবং অপ্টিমাইজ করতে আপনাকে সাহায্য করার জন্য সরঞ্জামগুলির একটি বিস্তৃত পরিসর: পারফরম্যান্স প্যানেল, লাইটহাউস এবং আরও অনেক কিছু।
কর্মক্ষমতা টুল ওভারভিউ
পারফরম্যান্স প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: কীভাবে একটি পারফরম্যান্স ট্রেস রেকর্ড করতে হয়, কীভাবে ট্রেসটি দেখতে এবং বিশ্লেষণ করতে হয় এবং আরও অনেক কিছু।
DevTools-এ আপনার স্থানীয় এবং বাস্তব-ব্যবহারকারীর Core Web Vitals পারফরম্যান্স নিরীক্ষণ করুন
CPU থ্রোটলিং ক্যালিব্রেশনের মতো নতুন DevTools বৈশিষ্ট্যগুলি সম্পর্কে জানুন যাতে আপনি বাস্তব জগতের ডেটার উপর আপনার পারফরম্যান্স ডিবাগিং সিদ্ধান্তগুলিকে ভিত্তি করতে পারেন
DevTools পারফরম্যান্স প্যানেলে অন্তর্দৃষ্টি সাইডবার
সরাসরি DevTools পারফরম্যান্স প্যানেলে নতুন পারফরম্যান্সের অন্তর্দৃষ্টি, Lighthouse এর শক্তি সম্পর্কে জানুন।
খবর এবং আপডেট
সম্পদ পরিদর্শন এবং সম্পাদনা
বৈশিষ্ট্য উল্লেখ
উত্স প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: কীভাবে ফাইলগুলি দেখতে এবং সম্পাদনা করতে হয়, জাভাস্ক্রিপ্ট ডিবাগ করতে হয় এবং একটি ওয়ার্কস্পেস সেট আপ করতে হয়৷
একটি কর্মক্ষেত্র সেট আপ করুন
ওয়ার্কস্পেস আপনাকে আপনার কম্পিউটারে সঞ্চিত সোর্স কোডে DevTools-এর মধ্যে করা পরিবর্তনগুলি সংরক্ষণ করতে দেয়। আপনার নিজের প্রকল্পে একটি কর্মক্ষেত্র কিভাবে সেট আপ করবেন তা শিখুন।
নেটওয়ার্ক কার্যকলাপ বিশ্লেষণ
নেটওয়ার্ক প্যানেল
নেটওয়ার্ক প্যানেলের সমস্ত বৈশিষ্ট্য সম্পর্কে জানুন: প্রতিক্রিয়া পরিদর্শন করুন এবং সংস্থাগুলির অনুরোধ করুন, শিরোনামগুলি ওভাররাইট করুন এবং আরও অনেক কিছু৷
নেটওয়ার্ক কার্যকলাপ পরিদর্শন করুন
নেটওয়ার্ক প্যানেলের মধ্যে সাধারণ কাজগুলির মাধ্যমে আপনাকে গাইড করার জন্য একটি হ্যান্ডস-অন টিউটোরিয়াল৷
আরও সরঞ্জাম
DevTools-এ অন্যান্য সমস্ত বৈশিষ্ট্য এবং ক্ষমতা আবিষ্কার করুন।
উপাদান
কিভাবে একটি পৃষ্ঠার DOM দেখতে এবং পরিবর্তন করতে হয় তা জানুন।
শৈলী, শৈলী, শৈলী
কিভাবে একটি পৃষ্ঠার CSS দেখতে এবং পরিবর্তন করতে হয় তা জানুন।
পরিবর্তন
HTML, CSS, এবং JavaScript-এ পরিবর্তনগুলি ট্র্যাক করুন।
কনসোল
বার্তা লগ করুন এবং JavaScript চালান।
কর্মক্ষমতা
ওয়েবসাইট কর্মক্ষমতা মূল্যায়ন.
স্মৃতি
মেমরির সমস্যাগুলি খুঁজুন যা পৃষ্ঠার কার্যক্ষমতাকে প্রভাবিত করে, মেমরি লিক সহ, এবং আরও অনেক কিছু।
আবেদন
ওয়েব অ্যাপ্লিকেশানগুলি পরিদর্শন করুন, সংশোধন করুন এবং ডিবাগ করুন, ক্যাশে পরীক্ষা করুন, সঞ্চয়স্থান দেখুন এবং আরও অনেক কিছু করুন৷
অ্যানিমেশন
পরিদর্শন এবং অ্যানিমেশন পরিবর্তন.
রেকর্ডার
রেকর্ড করুন, রিপ্লে করুন, ব্যবহারকারীর প্রবাহ পরিমাপ করুন এবং তাদের পদক্ষেপগুলি সম্পাদনা করুন৷
রেন্ডারিং
বিকল্পগুলির একটি সংগ্রহ আবিষ্কার করুন যা ওয়েব সামগ্রী রেন্ডারিংকে প্রভাবিত করে৷
অটোফিল
সংরক্ষিত ঠিকানাগুলি পরিদর্শন এবং ডিবাগ করুন।
ইস্যু
আপনার ওয়েবসাইটের সমস্যাগুলি খুঁজুন এবং ঠিক করুন।
গোপনীয়তা এবং নিরাপত্তা
নিশ্চিত করুন যে একটি পৃষ্ঠা সম্পূর্ণরূপে HTTPS দ্বারা সুরক্ষিত।
মিডিয়া
ব্রাউজার ট্যাবে তথ্য দেখুন এবং মিডিয়া প্লেয়ার ডিবাগ করুন।
সেন্সর
ডিভাইস সেন্সর অনুকরণ.
WebAuthn
প্রমাণীকরণকারীদের অনুকরণ করুন।