এজেন্টদের জন্য ক্রোম ডেভটুলস আপনার এজেন্টকে রেসপন্সিভ লেআউট যাচাই করতে, অবস্থান-সচেতন এপিআই পরীক্ষা করতে এবং বিভিন্ন সিপিইউ বা নেটওয়ার্ক গতি অনুকরণ করতে দেয়। এজ কেস শনাক্ত করতে এবং পারফরম্যান্স অডিট আরও কার্যকরভাবে স্বয়ংক্রিয় করতে এই টুলগুলো ব্যবহার করুন।
এই এমুলেশন ফিচারগুলো অন্যান্য টুলের সাথে কাজ করে, যা আপনার এজেন্টকে সাইটের বিভিন্ন এলিমেন্টে ক্লিক করা, ফর্ম পূরণ করা এবং পেজ নেভিগেট করার মতো কাজে সহায়তা করে।
যে বিষয়গুলো আপনি অনুকরণ করতে পারেন, সেগুলো হলো:
- ভিউপোর্ট ও ইউজার এজেন্ট : নির্দিষ্ট স্ক্রিন সাইজ এবং ডিভাইস আইডেন্টিফায়ার অনুকরণ করুন।
- ভূ-অবস্থান: অবস্থান-সচেতন এপিআই পরীক্ষা করার জন্য অবস্থানের স্থানাঙ্ক নকল করা।
- নেটওয়ার্ক এবং সিপিইউ: বাস্তব পারফরম্যান্সের সীমাবদ্ধতা অনুকরণ করতে নেটওয়ার্কের অবস্থা এবং সিপিইউ-এর গতি নিয়ন্ত্রণ করুন।
- রঙের বিন্যাস: হালকা ও গাঢ় মোডের মধ্যে পরিবর্তন করুন।
এমুলেশন ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলো মনে রাখবেন:
- ডিভাইস সাপোর্ট: আপনার এজেন্ট Puppeteer-এর
KnownDevicesতালিকায় থাকা যেকোনো ডিভাইস অনুকরণ করতে পারে। এর মধ্যে মোবাইল ভিউপোর্টের জন্য টাচ ইভেন্ট অনুকরণ করাও অন্তর্ভুক্ত। - ব্রাউজার ইঞ্জিনের আচরণ : যদিও টুলটি ডিভাইসের বৈশিষ্ট্য অনুকরণ করে, এটি নন-ক্রোমিয়াম ব্রাউজার ইঞ্জিন বা ভিন্ন অপারেটিং সিস্টেমকে সিমুলেট করে না। আপনার এজেন্ট সর্বদা আপনার বর্তমান অপারেটিং সিস্টেমের ক্রোমে এক্সিকিউট হয়।
ব্যবহারকারী অনুকরণের ব্যবহারের ক্ষেত্র
প্রতিটি কোড পরিবর্তনের পর ম্যানুয়ালি ব্রাউজারের আকার পরিবর্তন করা, আইপি স্পুফিং করা বা নেটওয়ার্কের গতি কমানো-র পরিবর্তে, আপনার এজেন্টকে পরিবেশ অনুকরণ করতে এবং আপনার হয়ে ইউআই যাচাই করতে নির্দেশ দিন।
এই ওয়ার্কফ্লোগুলির মাধ্যমে আপনার ডেভেলপমেন্ট প্রক্রিয়ায় এমুলেশনকে অন্তর্ভুক্ত করুন।
রেসপন্সিভ ডিজাইন নিয়ে পুনরাবৃত্তি করুন
মোবাইল এবং ডেস্কটপ ফর্ম ফ্যাক্টরের মধ্যে নেভিগেশন প্যাটার্ন প্রায়শই ব্যাপকভাবে পরিবর্তিত হয়। আপনার অ্যাপ্লিকেশন তৈরি করার সময়, আপনি আপনার এজেন্টকে নির্দেশ দিতে পারেন এটি যাচাই করার জন্য যে, তার লেখা কম্পোনেন্টগুলো সঠিকভাবে রেন্ডার হচ্ছে এবং ডিভাইস নির্বিশেষে একই কন্টেন্ট সরবরাহ করছে।
উদাহরণ প্রম্পট:
Go to developer.chrome.com. Click the burger menu on mobile, check the top level
items and ensure the same items are available for a desktop device.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট একটি ক্রোম উইন্ডো খোলে, পেজটিতে নেভিগেট করে, এমুলেশন শুরু করে এবং উভয় ভিউপোর্টের আইটেমগুলো তুলনা করে। এটি নিশ্চিত করে যে মোবাইল ভিউ (বার্গার মেনু) এবং ডেস্কটপ ভিউ (হেডার)-এ প্রত্যাশিত লিঙ্কগুলো রয়েছে।
ক্রস-ভিউপোর্ট ইন্টারঅ্যাকশন যাচাই করুন
শুধু CSS-এই নয়, ইন্টারঅ্যাকশনের সময়ও লেআউট ভেঙে যায়। স্থির স্ক্রিনশটে প্রায়শই সেইসব বাগ ধরা পড়ে না, যা ব্যবহারকারীরা সরাসরি UI স্পর্শ করার সময় ঘটে। লুকানো ফাংশনাল বাগ ধরার জন্য আপনি আপনার এজেন্টকে একাধিক ভিউপোর্টে নির্দিষ্ট ইন্টারঅ্যাকশন ফ্লো পরীক্ষা করার দায়িত্ব দিতে পারেন।
উদাহরণ প্রম্পট:
Go to https://developer.chrome.com/ on mobile, tablet and desktop device, type
in a search query but don't submit it and wait for the type-ahead suggestions.
Ensure the Sign in button is visible all the time. Let me know if that's not the
case.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট একটি সার্চ কোয়েরি টাইপ করে এবং স্ক্রিনটিকে তিনটি ভিন্ন আকারে পরিবর্তন করে। এই উদাহরণে, আপনার এজেন্ট লক্ষ্য করে যে ট্যাবলেট এবং মোবাইলে, সার্চ বারটি হেডারের সম্পূর্ণ প্রস্থ জুড়ে প্রসারিত হয়ে 'সাইন ইন' লিঙ্কটিকে ঢেকে দেয়।
প্রোটোটাইপ অবস্থান-সচেতন বৈশিষ্ট্য
ব্যবহারকারীর ভৌতিক অবস্থানের উপর নির্ভরশীল এপিআই (যেমন "আমার কাছাকাছি" অনুসন্ধান বা স্টোর লোকেটার) পরীক্ষা করার জন্য সাধারণত আপনাকে ম্যানুয়ালি সেন্সর ওভাররাইড করতে হয়। এখন, আপনি আপনার এজেন্টকে নির্দিষ্ট জিওলোকেশন স্পুফ করার নির্দেশ দিয়ে আপনার ফ্রন্টএন্ড এবং ব্যাকএন্ড লজিক নির্বিঘ্নে যাচাই করতে পারবেন।
উদাহরণ প্রম্পট:
Go to chrome.dev/devtools-store-locator. Search for Berlin, and confirm there's
a store showing. Confirm there's no store for Washington. Finally, simulate
Paris as location and verify there are stores listed.
এজেন্টের কার্য সম্পাদনের উদাহরণ: আপনার এজেন্ট সাইটটিতে যায়, বার্লিন অনুসন্ধান করে, এবং তারপর প্যারিসকে অনুকরণ করার জন্য গতিশীলভাবে নির্দিষ্ট অক্ষাংশ ও দ্রাঘিমাংশের স্থানাঙ্ক যুক্ত করে। এরপর সঠিক স্টোরগুলোতে তথ্য আসা নিশ্চিত করতে এটি 'Use My Location' ফিচারটি ব্যবহার করে।