হোম » সফটওয়্যার » ক্রোম ডেভটুলস: ডেভলপার টুলস থেকে সর্বাধিক সুবিধা লাভের একটি সম্পূর্ণ নির্দেশিকা
ক্রোম ডেভটুলস: ডেভলপার টুলস থেকে সর্বাধিক সুবিধা লাভের একটি সম্পূর্ণ নির্দেশিকা
ক্রোম ডেভটুলস আপনাকে ব্রাউজারের ভেতর থেকেই যেকোনো ওয়েবসাইট গভীরভাবে বিশ্লেষণ ও অপ্টিমাইজ করার সুযোগ দেয়।
এর এলিমেন্টস, নেটওয়ার্ক, সোর্সেস এবং কনসোল প্যানেলগুলোতে ভিজ্যুয়াল ডিবাগিং, পারফরম্যান্স, রিসোর্স এবং স্ক্রিপ্ট অন্তর্ভুক্ত রয়েছে।
লাইটহাউস এবং রেকর্ডার ফাংশনের সাহায্যে আপনি পারফরম্যান্স, অ্যাক্সেসিবিলিটি এবং প্রকৃত ব্যবহারকারীর অভিজ্ঞতা নিরীক্ষা করতে পারেন।
ওয়েবসাইটের পারফরম্যান্স, অ্যাক্সেসিবিলিটি এবং সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত করতে আগ্রহী যেকোনো ওয়েব ডেভেলপার, ডিজাইনার বা এসইও বিশেষজ্ঞের জন্য ক্রোম ডেভটুলস একটি অপরিহার্য সঙ্গী হয়ে উঠেছে। গুগল ক্রোমের সাথে সমন্বিত এই টুলগুলো ওয়েবসাইটের কার্যকারিতার উপর গভীর অন্তর্দৃষ্টি এবং নিয়ন্ত্রণ প্রদান করে, যার মাধ্যমে এইচটিএমএল ও সিএসএস পরিদর্শন থেকে শুরু করে ব্যাপক নেটওয়ার্ক কার্যকলাপ বিশ্লেষণ, পারফরম্যান্স টেস্টিং এবং মোবাইল অপটিমাইজেশন পর্যন্ত সবকিছু করা যায়।
আপনি কি ক্রোম ডেভটুলস-এ দক্ষতা অর্জন করতে এবং যেকোনো ওয়েবসাইটের সমস্যা ডিবাগ, অপ্টিমাইজ ও নির্ণয় করার জন্য এর সমস্ত বৈশিষ্ট্য কাজে লাগাতে চান? এই আর্টিকেলে, আমরা উদাহরণ এবং টিপস সহ পরিষ্কারভাবে ব্যাখ্যা করব, এই টুলগুলো থেকে সর্বাধিক সুবিধা পেতে আপনার যা যা জানা প্রয়োজন। এর মধ্যে রয়েছে, কীভাবে দ্রুত এগুলো খুলবেন, প্রতিটি প্যানেল দিয়ে কী কী বিশ্লেষণ করা যায়, প্রতিটি ফাংশনের কাজ কী এবং ডেভেলপমেন্ট ও এসইও উভয় ক্ষেত্রেই কীভাবে এগুলো প্রয়োগ করবেন।
ক্রোম ডেভটুলস স্যুট হলো গুগল ক্রোমের একটি বিল্ট-ইন প্যানেল, যা যেকোনো ব্যবহারকারীকে অতিরিক্ত প্লাগইন ইনস্টল না করেই যেকোনো ওয়েবসাইটের কোড ও পারফরম্যান্স বিশ্লেষণ, ডিবাগ এবং অপ্টিমাইজ করার সুযোগ দেওয়ার জন্য ডিজাইন করা হয়েছে । এর অসংখ্য ট্যাব এবং ফিচারের মাধ্যমে আপনি এলিমেন্টগুলো ইন্সপেক্ট করতে, রিয়েল টাইমে স্টাইল পরিবর্তন করতে, নেটওয়ার্ক অ্যাক্টিভিটি ট্র্যাক করতে, স্ক্রিপ্ট ডিবাগ করতে, পারফরম্যান্স মূল্যায়ন করতে এবং এমনকি মোবাইল ডিভাইসে ওয়েবসাইটের আচরণ সিমুলেট করতে পারেন । এর পরিধি কেবল "সোর্স কোড দেখার" চেয়ে অনেক বেশি: এটি আপনাকে অভিজ্ঞতা দেয় যে ওয়েবসাইটটি কীভাবে ইন্টারঅ্যাক্ট করে, গুগল এটিকে কীভাবে ব্যাখ্যা করে এবং একজন ব্যবহারকারী বিভিন্ন ডিভাইস বা সংযোগ থেকে কীভাবে এটি নেভিগেট করে।
ক্রোম ডেভটুলস কীভাবে অ্যাক্সেস করবেন: কুইক শর্টকাট এবং কনটেক্সট মেনু
ক্রোম ডেভটুলস অ্যাক্সেস করা অত্যন্ত সহজ এবং আপনার অপারেটিং সিস্টেম ও পছন্দের উপর নির্ভর করে এটি করার বেশ কয়েকটি উপায় রয়েছে:
যে পৃষ্ঠাটি বিশ্লেষণ করতে চান, সেটির উপর ডান-ক্লিক করুন। এবং “Inspect” নির্বাচন করুন। এটি সবচেয়ে দৃশ্যমান এবং বহুল ব্যবহৃত পদ্ধতি।
ব্যবহার করুন কীবোর্ড শর্টকাট আপনার অপারেটিং সিস্টেমের জন্য নির্দিষ্ট: Windows লিনাক্স: Ctrl + Shift + I ম্যাক: সিএমডি + বিকল্প + আই
এছাড়াও আপনি ক্রোম মেনুতে (অ্যাড্রেস বারের ডানদিকে থাকা তিনটি উল্লম্ব ডট) গিয়ে More tools > Developer tools বেছে নিতে পারেন।
কিবোর্ড ব্যবহার করে সরাসরি নির্দিষ্ট প্যানেলগুলো খুলতে:
এলিমেন্টস প্যানেল (HTML/CSS): Ctrl + Shift + C (Windows/লিনাক্স) অথবা Cmd + Option + C (ম্যাক)
সর্বশেষ ব্যবহৃত প্যানেল: F12 (বেশিরভাগ সিস্টেমে) অথবা Ctrl + Shift + I / Cmd + Option + I
প্রতিটি নতুন ট্যাবে স্বয়ংক্রিয়ভাবে ডেভটুলস খুলুন। (যারা ডিবাগিংয়ে সময় ব্যয় করেন তাদের জন্য খুব দরকারি): এই বিকল্পটি সহ ক্রোম চালান --auto-open-devtools-for-tabs কমান্ড লাইন থেকে।
মনে রাখবেন: যখন আপনি DevTools খুলবেন, তখন আপনি ঠিক করতে পারেন যে সেগুলোকে উইন্ডোর ডানদিকে, বামদিকে, নীচে, বা এমনকি একটি আলাদা উইন্ডোতে পিন করবেন কিনা—যা একাধিক স্ক্রিন নিয়ে কাজ করার ক্ষেত্রে বিশেষভাবে সুবিধাজনক।
ক্রোম ডেভটুলস দিয়ে আপনি কী করতে পারেন? এর প্রধান বৈশিষ্ট্যগুলো দেখে নেওয়া যাক।
ক্রোম ডেভটুলস একাধিক প্যানেলে বিভক্ত। প্রতিটি প্যানেল ওয়েব বিশ্লেষণ এবং অপ্টিমাইজেশনের একটি অপরিহার্য দিক নিয়ে কাজ করে। নিচে সর্বাধিক ব্যবহৃত প্যানেলগুলো এবং তাদের সবচেয়ে প্রাসঙ্গিক কাজগুলো উল্লেখ করা হলো:
এলিমেন্টস প্যানেল: DOM এবং CSS-এর সরাসরি পরিদর্শন ও সম্পাদনা
এই প্যানেলটি বেশিরভাগ ডিবাগিং এবং ভিজ্যুয়াল বিশ্লেষণ কাজের সূচনা বিন্দু। এটি আপনাকে নিম্নলিখিত কাজগুলো করতে দেয়:
DOM (ডকুমেন্ট অবজেক্ট মডেল)-এর সঠিক কাঠামো পরিদর্শন করুন। ব্রাউজার যা রেন্ডার করছে, অর্থাৎ স্ক্রিপ্ট চালানো এবং স্টাইল লোড করার পর গুগল আসলে যা দেখতে পায়।
তাৎক্ষণিকভাবে HTML এবং CSS পরিবর্তন করুন।ওয়েবসাইটে পরিবর্তনগুলো কেমন দেখাচ্ছে তা তাৎক্ষণিকভাবে দেখে নেওয়া যায় (যা মূল সোর্স কোডকে প্রভাবিত না করেই নতুন স্টাইল রুলগুলোর প্রোটোটাইপিং বা পরীক্ষার জন্য দারুণ)।
ক্লাস এবং স্টাইল পরিচালনা করুন উপাদানগুলোর মধ্যে: আপনি নতুন ক্লাস সক্রিয়, নিষ্ক্রিয় বা পরীক্ষা করতে পারেন এবং রেসপন্সিভ ডিজাইনের জন্য ভিজ্যুয়াল বিবরণ সম্পাদনা করতে পারেন।
বিশেষ বৈশিষ্ট্যগুলি দেখুন এবং পরিচালনা করুন (যেমন data-nosnippet), যা এসইও-এর জন্য অপরিহার্য, কারণ এর মাধ্যমে আপনি যাচাই করতে পারেন যে গুগল কোনো নির্দিষ্ট কন্টেন্ট ইন্ডেক্স করতে পারবে কি না।
এমন কোনো এলিমেন্ট বা ব্লক আছে কিনা তা পরীক্ষা করুন যা শুধুমাত্র ব্যবহারকারীর কোনো পদক্ষেপের পরেই দৃশ্যমান হয় (উদাহরণস্বরূপ, ট্যাব বা ড্রপডাউন যা প্রদর্শনের জন্য জাভাস্ক্রিপ্ট প্রয়োজন)।
কনসোলে পরিদর্শন করা আইটেমটিতে দ্রুত অ্যাক্সেস $0 হিসাবে, এর ফলে আপনি জাভাস্ক্রিপ্টের মাধ্যমে সরাসরি এটি নিয়ন্ত্রণ করতে পারবেন।
টিপস! আপনি এই প্যানেল থেকে বিভিন্ন স্ক্রিন সাইজ এবং মোবাইল ডিভাইসও সিমুলেট করতে পারেন, যা আপনার ওয়েবসাইটকে সত্যিকারের রেসপন্সিভ করে তুলবে।
নেটওয়ার্ক প্যানেল: রিসোর্স লোড বিশ্লেষণ করে, ল্যাটেন্সি নির্ণয় করে এবং ধীরগতির সংযোগ অনুকরণ করে।
পারফরম্যান্স বিশ্লেষণের জন্য এটি অন্যতম অপরিহার্য একটি ড্যাশবোর্ড । এখানে আপনি এটি কালানুক্রমিকভাবে এবং বিস্তারিতভাবে দেখতে পারেন:
পৃষ্ঠাটি লোড করার সময় অনুরোধ করা সমস্ত সংস্থান (এইচটিএমএল, ছবি, সিএসএস, জেএস, ভিডিও, ফন্ট ইত্যাদি।).
কোন ক্রমে সেগুলি ডাউনলোড হয়, লোড হতে কত সময় লাগে এবং ফাইলের আকার কত। প্রতিটি সম্পদের: প্রতিবন্ধকতা বা অপ্রয়োজনীয় সম্পদ শনাক্ত করার চাবিকাঠি।
প্রতিটি রিসোর্সে ক্লিক করে আপনি চেক করতে পারেন HTTP হেডার, ক্যাশিং নীতি, প্রতিক্রিয়া সময়এবং এমনকি মিনিমাইজ করা ফাইল আছে কিনা তাও দেখুন।
ধীর সংযোগের সিমুলেশন (3G, 4G, ইত্যাদি) ব্যবহার করে শুধু আপনার নিজের কম্পিউটারে নয়, বরং আপনার ব্যবহারকারীদের ডিভাইসেও প্রকৃত পারফরম্যান্স দেখতে পারবেন।
জন্য কাজ ক্যাশে পরিষ্কার করুন এবং পুনরায় লোড করুননতুন ব্যবহারকারীর অভিজ্ঞতা যাচাই করার জন্য উপযোগী।
অনুরোধ অবরুদ্ধকরণ: নির্দিষ্ট কিছু রিসোর্স বাদ দেওয়ার প্রভাব বিশ্লেষণ করে (উদাহরণস্বরূপ, main.css নিষ্ক্রিয় করে পৃষ্ঠাটি কীভাবে ভুলভাবে কনফিগার হয় তা দেখা)।
উন্নত ফিল্টারিং: ফাইলের ধরন, উৎস ডোমেইন, রেগুলার এক্সপ্রেশন বা নির্দিষ্ট অ্যাট্রিবিউট দ্বারা অনুসন্ধান করুন, যা বাহ্যিক ডাউনলোড নিরীক্ষা বা নিরাপত্তা পর্যবেক্ষণের জন্য আদর্শ।
স্ক্রিনশট নেওয়া পেজ লোড হওয়ার বিভিন্ন পর্যায়ে, যা আপনাকে ব্যবহারকারীকে ধাপে ধাপে কী দেখানো হচ্ছে তা দেখার সুযোগ করে দেয়।
বিশেষ করে SEO এবং WPO-এর জন্য: প্রথমে কী লোড হয় এবং তা কীভাবে পারফরম্যান্স ও ওয়েব ভাইটালসকে প্রভাবিত করে তা বিশ্লেষণ করুন , এবং গুগল ও আপনার ভিজিটরদের জন্য অভিজ্ঞতাকে কীভাবে অপ্টিমাইজ করতে হয় তা বুঝুন।
কনসোল প্যানেল: ডিবাগ করুন, স্ক্রিপ্ট চালান এবং রিয়েল-টাইম অ্যালার্ট পান
কনসোলে আপনি ওয়েবসাইট থেকে রিয়েল টাইমে লগ, জাভাস্ক্রিপ্ট ত্রুটি এবং নিরাপত্তা সতর্কতা দেখতে পারেন। এছাড়াও আপনি যা করতে পারেন:
সরাসরি জাভাস্ক্রিপ্ট কমান্ড চালান খোলা পৃষ্ঠায়, যা দ্রুত পরীক্ষা বা অটোমেশনের জন্য আদর্শ।
ভেরিয়েবলটি ব্যবহার করে সর্বশেষ পরিদর্শন করা এলিমেন্টটির সাথে ইন্টারঅ্যাক্ট করুন। $0 (এবং $1, $2, ইত্যাদি), যা উন্নত ডিবাগিংকে ত্বরান্বিত করে।
সমস্যা সৃষ্টিকারী JS ফাইলের লাইনে সরাসরি যেতে এরর বা ওয়ার্নিং-এর উপর ক্লিক করুন।
সোর্স প্যানেল: স্ট্যাটিক ফাইল এবং বাহ্যিক রিসোর্স দেখুন ও ডিবাগ করুন
এই বিভাগে ওয়েবসাইটে আপলোড করা ফাইলগুলির কাঠামো দেখানো হয় : স্ক্রিপ্ট, স্টাইল, ছবি, ইত্যাদি, যা ডোমেইন অনুসারে সাজানো থাকে।
আপনি গুগল ফন্টসের মতো বাহ্যিক উৎস ব্যবহার করেন কিনা তা খুঁজে বের করুন।এবং গতি বাড়ানোর জন্য সেগুলোকে স্থানীয়ভাবে আয়োজন করার কথা বিবেচনা করছে।
এটি আপনাকে পরীক্ষার জন্য সোর্স ফাইল খুলতে, সম্পাদনা করতে এবং সংরক্ষণ করতে দেয়।
সংক্ষিপ্ত স্ক্রিপ্ট বিশ্লেষণ করুন, অধিক পাঠযোগ্যতার জন্য কোড প্রসারিত করুন এবং লুকানো নির্ভরতা পরীক্ষা করুন।
রেকর্ডার: ব্যবহারকারীর যাত্রাপথ অনুকরণ করে এবং তাদের বাস্তব অভিজ্ঞতা পরিমাপ করে।
রেকর্ডিং ফাংশনটি আপনাকে একজন ব্যবহারকারীর প্রকৃত ব্রাউজিং অনুকরণ করতে এবং নির্দিষ্ট সমস্যা শনাক্ত করতে সাহায্য করে:
আপনি নেভিগেশন ফ্লো (যেমন, মেনুতে ক্লিক করা, ফর্ম পূরণ করা, এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় যাওয়া) রেকর্ড করতে পারেন, ওয়েবসাইটটি কীভাবে সাড়া দিচ্ছে তা পরীক্ষা করতে পারেন এবং প্রতিটি অ্যাকশনের লোডিং টাইম বিশ্লেষণ করতে পারেন।
রূপান্তর বা ইউএক্স-এর জন্য গুরুত্বপূর্ণ পথগুলিতে বাধা শনাক্ত করার জন্য আদর্শ।
লাইটহাউস: কর্মক্ষমতা, প্রবেশগম্যতা এবং সর্বোত্তম অনুশীলনের ব্যাপক নিরীক্ষা
কৃত স্বয়ংক্রিয় নিরীক্ষা কর্মক্ষমতা (ডব্লিউপিও), অ্যাক্সেসিবিলিটি, সেরা অনুশীলন, এসইও এবং পিডব্লিউএ (প্রগতিশীল ওয়েব অ্যাপ্লিকেশন)।
সরবরাহ করে a সর্বমোট ফলাফল এবং ইতিমধ্যে প্রকাশিত ও নির্মাণাধীন উভয় ওয়েবসাইটের প্রতিটি বিভাগের জন্য কার্যকরী সুপারিশ।
এটি আপনাকে ডেস্কটপ এবং মোবাইল মোডে ওয়েবসাইটটি বিশ্লেষণ করার সুযোগ দেয়, ফলে মোবাইল-ফ্রেন্ডলিনেসের সমস্যা শনাক্ত করার জন্য এটি খুবই উপযোগী।
ব্যবহারিক প্রয়োগ: WPO এবং SEO-এর জন্য DevTools-এর সঠিক ব্যবহার
ক্রোম ডেভটুলস হলো ওয়েবসাইট অপটিমাইজেশনের সকল স্তরের জন্য একটি অপরিহার্য টুল : প্রাথমিক ডিজাইন থেকে শুরু করে বিজ্ঞাপনের অনুরোধ বিশ্লেষণ এবং অন-পেজ এসইও অডিটিং পর্যন্ত। এর কিছু প্রধান ব্যবহার হলো:
পারফরম্যান্স অপ্টিমাইজেশন (ডব্লিউপিও)
ছবি এবং বড় ফাইল শনাক্ত করে নেটওয়ার্ক ট্যাব থেকে এর অপ্টিমাইজেশনকে (কম্প্রেশন, নতুন ফরম্যাট, লেজি লোড) অগ্রাধিকার দিন।
বাহ্যিক সম্পদের ভার মূল্যায়ন করুনসময় বেশি লাগলে, আপনার নিজের সার্ভার থেকে সেগুলো ডাউনলোড করার কথা বিবেচনা করতে পারেন।
লোডিং অগ্রাধিকার পুনর্বিন্যাস করুন যাতে গুরুত্বপূর্ণ আইটেমগুলি প্রথমে পরিবেশন করা হয় (জটিল পথ).
নেটওয়ার্ক প্যানেল থেকে ক্যাশে নিষ্ক্রিয় করুন। পরিবর্তনগুলি বিশ্লেষণ করার সময়, নিশ্চিত করুন যে তথ্যটি স্থানীয়ভাবে সংরক্ষিত নেই।
মোবাইল ব্যবহারকারীর অভিজ্ঞতা পরীক্ষা করতে ধীর সংযোগ সিমুলেটরটি ব্যবহার করুন।
রিসোর্স হ্রাসকরণ (সিএসএস এবং জাভাস্ক্রিপ্ট)
ফন্ট ট্যাবে, অতিরিক্ত বড়, মিনিফাই না করা বা ডুপ্লিকেট ফাইল সনাক্ত করে।.
রিকোয়েস্ট কমাতে ও লোড টাইম উন্নত করতে CSS এবং JS একীভূত ও মিনিফাই করুন।
কাঠামোগত বিশ্লেষণ, প্রবেশগম্যতা এবং এসইও
হেডিং, অ্যাট্রিবিউট এবং এইচটিএমএল শব্দার্থের গঠন পর্যালোচনা করুন।নিশ্চিত করুন যে লজিক্যাল কাঠামোটি (h2, h3, ALT ট্যাগ, রোল) গুগলের জন্য সর্বোত্তম।
লাইটহাউসের সাথে যোগাযোগ করুন প্রয়োজনীয় লেবেল এবং ডেটার উপস্থিতি SEO, অ্যাক্সেসিবিলিটি এবং PWA-এর জন্য।
রেন্ডারিং-এর উপর জাভাস্ক্রিপ্টের প্রভাব বিশ্লেষণ করুন এবং মনে রাখবেন যে, ব্যবহারকারীর ইন্টারঅ্যাকশনের উপর নির্ভরশীল কোনো বিষয় লোড হওয়ার সময় দৃশ্যমান না হলে গুগল তা ব্যাখ্যা নাও করতে পারে।
কুকি, লোকাল স্টোরেজ এবং ব্রাউজারের অন্যান্য রিসোর্সের ব্যবহার পর্যবেক্ষণ করে।
স্ক্র্যাপিং বা রপ্তানির জন্য বিষয়বস্তু নিষ্কাশন ও প্রক্রিয়াকরণ
আপনি 'কপি এলিমেন্ট' ব্যবহার করে সরাসরি স্প্রেডশিট বা কোড এডিটরে বড় টেবিল বা তালিকা রপ্তানি করতে পারেন।
অন-স্ক্রিন কন্টেন্ট দক্ষতার সাথে সম্পাদনা করতে, ক্যাপচার প্রস্তুত করতে বা প্রাসঙ্গিক তথ্য এক্সপোর্ট করতে কনসোল এবং ডিজাইন মোড ব্যবহার করুন।
রিয়েল-টাইম কাস্টমাইজেশন এবং ডিবাগিং
সরাসরি প্রয়োগ করে বিজ্ঞাপনের ব্যানার বা বিরক্তিকর উপাদানগুলি লুকান প্রদর্শন: কোনোটিই নয় পরিদর্শকের মাধ্যমে।
কনসোল থেকে জাভাস্ক্রিপ্ট ব্যবহার করে নির্বাচিত এলিমেন্টগুলিতে কমান্ড কার্যকর করুন অথবা পেজ এডিট মোড চালু ও বন্ধ করুন।
মোবাইল ডিভাইসে ক্রোম ডেভটুলসের সীমাবদ্ধতা
যদিও ডেস্কটপ সংস্করণে "ইনসপেক্ট এলিমেন্ট" এবং সমস্ত ক্রোম ডেভটুলস সর্বদা উপলব্ধ থাকে, স্মার্টফোন এবং ট্যাবলেটে ডেভটুলস সরাসরি ব্যবহার করা যায় না । এর দুটি কারণ রয়েছে: ছোট স্ক্রিনে ইন্টারফেসটি ব্যবহারিক হবে না এবং মাউসের নির্ভুলতা ব্যাহত হয়। সৌভাগ্যবশত, আপনি আপনার ডেস্কটপ থেকে মোবাইলের অভিজ্ঞতা অনুকরণ করতে পারেন অথবা রিয়েল টাইমে সাইট ডিবাগ করার জন্য আপনার কম্পিউটারের সাথে একটি ফিজিক্যাল ডিভাইসও সংযুক্ত করতে পারেন, যা মোবাইল অ্যাপ ডেভেলপারদের জন্য বিশেষভাবে মূল্যবান। iOS সহ একটি Mac-এ, আপনাকে "সেটিংস > অ্যাডভান্সড"-এ সংশ্লিষ্ট অপশনটি চালু করতে হবে এবং উভয় ডিভাইসে একই iCloud অ্যাকাউন্ট ব্যবহার করতে হবে।
উন্নত ব্যবহার: ডিবাগিং থেকে স্ক্রিনশট নেওয়া পর্যন্ত
এসইও উন্নয়ন ও বিশ্লেষণে এর চিরাচরিত ব্যবহার ছাড়াও, ক্রোম ডেভটুলস অত্যন্ত কার্যকরী কিছু উন্নত বৈশিষ্ট্য প্রদান করে:
নেটওয়ার্ক ব্যর্থতার পরিস্থিতি অনুকরণ করার জন্য নির্দিষ্ট ফাইল (উদাহরণস্বরূপ: main.css) লোড হওয়া বন্ধ করে। এবং কোনো ত্রুটির ক্ষেত্রে ওয়েবসাইটটি কীভাবে কাজ করে তা পরীক্ষা করুন।
নেটওয়ার্ক প্যানেলের মধ্যে থাকা স্ক্রিনশট ফাংশনটি ব্যবহার করে রেন্ডারিং প্রক্রিয়াটি ধাপে ধাপে দেখুন এবং এর মাধ্যমে নির্দিষ্ট গুরুত্বপূর্ণ উপাদানগুলো কীভাবে ও কখন প্রদর্শিত হয়, তা আরও ভালোভাবে বুঝুন।
গ্লোবাল সার্চ ফাংশন ব্যবহার করে নির্দিষ্ট HTTP হেডার বা রেসপন্স অনুসন্ধান করুন (যেমন, কোন রিসোর্সগুলো সর্বোত্তম ক্যাশিং নীতি ব্যবহার করে তা খুঁজে বের করতে)।
বাহ্যিক ট্র্যাফিক বা গুরুত্বপূর্ণ রিসোর্স বিস্তারিতভাবে বিশ্লেষণ করার জন্য টাইপ, ডোমেইন বা প্যাটার্ন অনুযায়ী রিকোয়েস্ট ফিল্টার করুন।
মূল সোর্স ফাইল পরিবর্তন করার প্রয়োজন ছাড়াই, HTML এবং CSS পরিবর্তনের দ্রুত প্রোটোটাইপ তৈরি করুন এবং সহজেই আপনার টিমের সাথে শেয়ার করুন।
ক্রোম ডেভটুলস ওয়েব ডেভেলপমেন্ট এবং অ্যানালিটিক্সের ক্ষেত্রে একটি বহুমুখী টুলে পরিণত হয়েছে, যা ব্যক্তিগত প্রজেক্ট থেকে শুরু করে বড় প্ল্যাটফর্ম এবং পেশাদার প্রজেক্ট পর্যন্ত সব ক্ষেত্রেই সমানভাবে কার্যকর। ডিজাইনের কোনো খুঁটিনাটি দ্রুত পরীক্ষা করা থেকে শুরু করে WPO, SEO এবং অ্যাক্সেসিবিলিটির মতো কাজসহ আপনার ওয়েবসাইটের সমস্ত রিসোর্সের সম্পূর্ণ অডিট করা পর্যন্ত, লাইটহাউসের মতো টুলের সাথে এর ইন্টিগ্রেশন এটিকে শুধু গুগলের জন্যই নয়, আপনার ব্যবহারকারীদের জন্যও পেজ অপটিমাইজ করার একটি অপরিহার্য রিসোর্সে পরিণত করেছে।
