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