एजेंट के लिए Chrome DevTools की मदद से, आपका एजेंट रिस्पॉन्सिव लेआउट की पुष्टि कर सकता है, जगह की जानकारी देने वाले एपीआई की जांच कर सकता है, और अलग-अलग सीपीयू या नेटवर्क की स्पीड को सिम्युलेट कर सकता है. इन टूल का इस्तेमाल करके, एज केस की पहचान की जा सकती है और परफ़ॉर्मेंस ऑडिट को ज़्यादा असरदार तरीके से ऑटोमेट किया जा सकता है.
ये एम्युलेशन सुविधाएं, अन्य टूल के साथ काम करती हैं. इनकी मदद से, आपका एजेंट आपकी साइट के साथ इंटरैक्ट कर सकता है. जैसे, एलिमेंट पर क्लिक करना, फ़ॉर्म भरना, और पेजों पर नेविगेट करना.
इन चीज़ों को सिम्युलेट किया जा सकता है:
- व्यू पोर्ट और यूज़र एजेंट: खास स्क्रीन साइज़ और डिवाइस आइडेंटिफ़ायर को सिम्युलेट करें.
- जियोलोकेशन: जगह की जानकारी देने वाले एपीआई की जांच करने के लिए, जगह के निर्देशांकों को स्पूफ़ करें.
- नेटवर्क और सीपीयू: असल दुनिया में परफ़ॉर्मेंस की सीमाओं को सिम्युलेट करने के लिए, नेटवर्क की स्थितियों और सीपीयू की स्पीड को थ्रॉटल करें.
- कलर स्कीम: लाइट और डार्क मोड के बीच टॉगल करें.
एम्युलेशन का इस्तेमाल करते समय, इन बातों का ध्यान रखें:
- डिवाइस के साथ काम करने की सुविधा: आपका एजेंट, Puppeteer's
KnownDevicesसूची में मौजूद किसी भी डिवाइस को सिम्युलेट कर सकता है. इसमें, मोबाइल व्यू पोर्ट के लिए टच इवेंट को सिम्युलेट करना शामिल है. - ब्राउज़र इंजन का व्यवहार: टूल, डिवाइस की विशेषताओं को सिम्युलेट करता है. हालांकि, यह Chromium के अलावा अन्य ब्राउज़र इंजन या अलग-अलग ऑपरेटिंग सिस्टम को सिम्युलेट नहीं करता. आपका एजेंट, मौजूदा ऑपरेटिंग सिस्टम में हमेशा Chrome में काम करता है.
उपयोगकर्ता के एम्युलेशन के इस्तेमाल के उदाहरण
अपने एजेंट को निर्देश दें कि वह एनवायरमेंट को सिम्युलेट करे और आपके लिए यूज़र इंटरफ़ेस (यूआई) की पुष्टि करे. इसके बजाय, हर कोड में बदलाव के बाद, ब्राउज़र का साइज़ मैन्युअल तरीके से बदलने, आईपी को स्पूफ़ करने या नेटवर्क को थ्रॉटल करने की ज़रूरत नहीं है.
इन वर्कफ़्लो की मदद से, एम्युलेशन को अपनी डेवलपमेंट प्रोसेस में इंटिग्रेट करें.
रिस्पॉन्सिव डिज़ाइन को बेहतर बनाना
मोबाइल और डेस्कटॉप के फ़ॉर्म फ़ैक्टर के बीच, नेविगेशन पैटर्न अक्सर पूरी तरह से बदल जाते हैं. अपना ऐप्लिकेशन बनाते समय, अपने एजेंट को निर्देश दिया जा सकता है कि वह पुष्टि करे कि उसके लिखे गए कॉम्पोनेंट सही तरीके से रेंडर हो रहे हैं और अलग-अलग डिवाइसों पर एक जैसा कॉन्टेंट दिख रहा है.
प्रॉम्प्ट का उदाहरण:
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.
एजेंट के काम करने का उदाहरण: आपका एजेंट, Chrome विंडो खोलता है, पेज पर जाता है, एम्युलेशन शुरू करता है, और दोनों व्यू पोर्ट में मौजूद आइटम की तुलना करता है. इससे पुष्टि होती है कि मोबाइल व्यू (बर्गर मेन्यू) और डेस्कटॉप व्यू (हेडर) में, उम्मीद के मुताबिक लिंक मौजूद हैं.
अलग-अलग व्यू पोर्ट के बीच होने वाले इंटरैक्शन की पुष्टि करना
लेआउट, सिर्फ़ सीएसएस में ही नहीं, बल्कि इंटरैक्शन के दौरान भी टूट जाते हैं. स्टैटिक स्क्रीनशॉट में अक्सर वे गड़बड़ियां नहीं दिखती हैं जो उपयोगकर्ताओं के यूज़र इंटरफ़ेस (यूआई) को असल में टच करने पर होती हैं. छुपी हुई फ़ंक्शनल गड़बड़ियों को पकड़ने के लिए, अपने एजेंट को अलग-अलग व्यू पोर्ट के बीच, खास इंटरैक्शन फ़्लो की जांच करने का काम सौंपा जा सकता है.
प्रॉम्प्ट का उदाहरण:
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.
एजेंट के काम करने का उदाहरण: आपका एजेंट, साइट पर जाता है, बर्लिन खोजता है. इसके बाद, पेरिस को सिम्युलेट करने के लिए, अक्षांश और देशांतर के खास निर्देशांकों को डाइनैमिक तरीके से जोड़ता है. इसके बाद, मेरी जगह की जानकारी का इस्तेमाल करें सुविधा के साथ इंटरैक्ट करके, यह पक्का करता है कि सही स्टोर दिखें.