এই নির্দেশিকা আপনাকে শেখায় কিভাবে একটি ওয়েব পৃষ্ঠার সংস্থান দেখতে Chrome DevTools ব্যবহার করতে হয়৷ রিসোর্স হল সেই ফাইল যা একটি পৃষ্ঠার সঠিকভাবে প্রদর্শনের জন্য প্রয়োজন। সম্পদের উদাহরণগুলির মধ্যে রয়েছে CSS, JavaScript, এবং HTML ফাইল, সেইসাথে ছবি।
এই নির্দেশিকাটি অনুমান করে যে আপনি ওয়েব ডেভেলপমেন্ট এবং Chrome DevTools এর মৌলিক বিষয়গুলির সাথে পরিচিত৷
সম্পদ খুলুন
আপনি যে সংস্থানটি পরিদর্শন করতে চান তার নাম জানলে, কমান্ড মেনু সংস্থানটি খোলার একটি দ্রুত উপায় প্রদান করে।
কন্ট্রোল + পি বা কমান্ড + পি (ম্যাক) টিপুন। ওপেন ফাইল ডায়ালগ খোলে।
চিত্র 1 . ওপেন ফাইল ডায়ালগ
ড্রপডাউন থেকে ফাইলটি নির্বাচন করুন, অথবা ফাইলের নাম টাইপ করা শুরু করুন এবং স্বয়ংসম্পূর্ণ বাক্সে সঠিক ফাইলটি হাইলাইট হয়ে গেলে এন্টার টিপুন।
চিত্র ২ . ওপেন ফাইল ডায়ালগে একটি ফাইলের নাম টাইপ করা হচ্ছে
নেটওয়ার্ক প্যানেলে সম্পদ খুলুন
একটি সম্পদের বিশদ পরিদর্শন দেখুন।
চিত্র 3 । নেটওয়ার্ক প্যানেলে একটি সংস্থান পরিদর্শন করা হচ্ছে
অন্যান্য প্যানেল থেকে নেটওয়ার্ক প্যানেলে সংস্থানগুলি প্রকাশ করুন৷
DevTools UI-এর বিভিন্ন অংশ থেকে সংস্থানগুলি কীভাবে দেখতে হয় তা নীচের সংস্থানগুলি ব্রাউজ করুন৷ আপনি যদি কখনও নেটওয়ার্ক প্যানেলে কোনও সংস্থান পরিদর্শন করতে চান তবে সংস্থানটিতে ডান-ক্লিক করুন এবং নেটওয়ার্ক প্যানেলে প্রকাশ করুন নির্বাচন করুন।
চিত্র 4 । নেটওয়ার্ক প্যানেল বিকল্পে প্রকাশ করুন
সম্পদ ব্রাউজ করুন
নেটওয়ার্ক প্যানেলে সম্পদ ব্রাউজ করুন
লগ নেটওয়ার্ক কার্যকলাপ দেখুন।
চিত্র 5 । নেটওয়ার্ক লগে পৃষ্ঠা সম্পদ
ডিরেক্টরি দ্বারা ব্রাউজ করুন
ডিরেক্টরি দ্বারা সংগঠিত একটি পৃষ্ঠার সংস্থান দেখতে:
- সোর্স প্যানেল খুলতে সোর্স ট্যাবে ক্লিক করুন।
পৃষ্ঠার সংস্থানগুলি দেখাতে পৃষ্ঠা ট্যাবে ক্লিক করুন। পৃষ্ঠা ফলক খোলে।
চিত্র 6 । পৃষ্ঠা ফলক
এখানে চিত্র 6- এ অ-স্পষ্ট আইটেমগুলির একটি ভাঙ্গন রয়েছে:
- শীর্ষ হল প্রধান নথি ব্রাউজিং প্রসঙ্গ ।
- airhorner.com একটি ডোমেন প্রতিনিধিত্ব করে। এটির অধীনে থাকা সমস্ত সংস্থান সেই ডোমেন থেকে আসে। উদাহরণস্বরূপ, comlink.global.js ফাইলের সম্পূর্ণ URL সম্ভবত
https://airhorner.com/scripts/comlink.global.js। - স্ক্রিপ্ট একটি ডিরেক্টরি।
- (index) হল প্রধান HTML নথি।
- iu3 আরেকটি ব্রাউজিং প্রসঙ্গ। এই প্রসঙ্গটি সম্ভবত মূল নথি HTML এ এমবেড করা একটি
<iframe>উপাদান দ্বারা তৈরি করা হয়েছে। - sw.js হল একটি সার্ভিস ওয়ার্কার এক্সিকিউশন প্রসঙ্গ।
সম্পাদকে এটি দেখতে একটি সম্পদে ক্লিক করুন।
চিত্র 7 । এডিটরে একটি ফাইল দেখা হচ্ছে
ফাইলের নাম দ্বারা ব্রাউজ করুন
ডিফল্টরূপে পৃষ্ঠা ফলক সংস্থানগুলি ডিরেক্টরি দ্বারা গোষ্ঠীভুক্ত করে। এই গ্রুপিং অক্ষম করতে এবং প্রতিটি ডোমেনের সংস্থানগুলিকে একটি সমতল তালিকা হিসাবে দেখতে:
- পৃষ্ঠা ফলক খুলুন। ডিরেক্টরি দ্বারা ব্রাউজ দেখুন.
আরও বিকল্পে ক্লিক করুন
এবং ফোল্ডার দ্বারা গ্রুপ নিষ্ক্রিয় করুন।
চিত্র 8 . ফোল্ডার দ্বারা গ্রুপ বিকল্প
সম্পদ ফাইলের ধরন দ্বারা সংগঠিত হয়. প্রতিটি ফাইল টাইপের মধ্যে সংস্থানগুলি বর্ণানুক্রমিকভাবে সংগঠিত হয়।
চিত্র 9 । ফোল্ডার দ্বারা গ্রুপ নিষ্ক্রিয় করার পরে পৃষ্ঠা ফলক
ফাইল টাইপ দ্বারা ব্রাউজ করুন
তাদের ফাইলের প্রকারের উপর ভিত্তি করে সংস্থানগুলিকে একত্রিত করতে:
অ্যাপ্লিকেশন ট্যাবে ক্লিক করুন। অ্যাপ্লিকেশন প্যানেল খোলে। ডিফল্টরূপে ম্যানিফেস্ট ফলকটি সাধারণত প্রথমে খোলে।
চিত্র 10 । অ্যাপ্লিকেশন প্যানেল
ফ্রেম ফলকে নিচে স্ক্রোল করুন।
চিত্র 11 । ফ্রেম ফলক
আপনি যে বিভাগগুলিতে আগ্রহী সেগুলি প্রসারিত করুন।
এটি দেখতে একটি সম্পদ ক্লিক করুন.
চিত্র 11 । অ্যাপ্লিকেশন প্যানেলে একটি সংস্থান দেখা হচ্ছে
নেটওয়ার্ক প্যানেলে টাইপ অনুসারে ফাইল ব্রাউজ করুন
রিসোর্স টাইপ দ্বারা ফিল্টার দেখুন।
চিত্র 12 । নেটওয়ার্ক লগে CSS-এর জন্য ফিল্টারিং