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