Chrome DevTools के साथ उपयोगकर्ता के फ़्लो को रिकॉर्ड करें, फिर से चलाएं, और मापें

1. परिचय

रिकॉर्डर पैनल का इस्तेमाल करके, उपयोगकर्ता के फ़्लो को रिकॉर्ड करें, फिर से चलाएं, और मापें.

नीचे दिए गए वीडियो के साथ, नए रिकॉर्डर पैनल (झलक की सुविधा) पर एक नज़र डालें.

आप क्याजानें

• यूज़र फ़्लो रिकॉर्ड करें
• यूज़र फ़्लो को फिर से चलाना
• यूज़र फ़्लो में बदलाव करें
• उपयोगकर्ता के फ़्लो का आकलन करना

आपको क्या चाहिए

• काम कर रहा कंप्यूटर और असली वाई-फ़ाई
• Chrome 101 और उसके बाद के वर्शन.

2. रिकॉर्डर पैनल खोलें

रिकॉर्डर पैनल को खोलें और यहां दिया गया तरीका अपनाएं

1. DevTools खोलें.
2. ज़्यादा विकल्प &g; ज़्यादा टूल > रिकॉर्डर पर क्लिक करें. इसके अलावा, रिकॉर्ड करने वाले पैनल को खोलने के लिए, कमांड मेन्यू का इस्तेमाल करें.

3. स्टार्ट

हम इस कॉफ़ी ऑर्डर के डेमो पेज का इस्तेमाल करेंगे. खरीदारी वेबसाइटों के बीच चेकआउट एक सामान्य उपयोगकर्ता फ़्लो है.

अगले सेक्शन में, हम आपको रिकॉर्डर पैनल के ज़रिए, नीचे दिए गए चेकआउट फ़्लो को रिकॉर्ड करने, फिर से चलाने, और मापने का तरीका बताएंगे:

1. कार्ट में कॉफ़ी जोड़ना.
2. कार्ट में एक और कॉफ़ी जोड़ दी जाएगी.
3. कार्ट पेज पर जाएं.
4. कार्ट से एक कॉफ़ी हटाएं.
5. चेकआउट की प्रोसेस शुरू करें.
6. पेमेंट के तरीके की जानकारी भरें.
7. पैसे चुकाएं.

पेज को खोलना

4. यूज़र फ़्लो रिकॉर्ड करें

1. डेमो पेज खोलें. शुरू करने के लिए नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें.
2. रिकॉर्डिंग नाम टेक्स्टबॉक्स में "कॉफ़ी चेकआउट&कोटेशन; डालें.
3. नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें. रिकॉर्डिंग शुरू हो गई है. पैनल में रिकॉर्डिंग... दिख रही है. इससे पता चलता है कि रिकॉर्डिंग चल रही है.
4. कार्ट में जोड़ने के लिए, Cappuccino पर क्लिक करें.
5. कार्ट में जोड़ने के लिए, Americano पर क्लिक करें. ध्यान दें कि रिकॉर्डर उन चरणों को दिखाता है जो आपने अब तक किए हैं.
6. कार्ट पेज पर जाएं.
7. कार्ट से Americano को हटाएं.
8. चेकआउट की प्रोसेस शुरू करने के लिए, कुल: 19.00 बटन पर क्लिक करें.
9. पैसे चुकाने की जानकारी वाले फ़ॉर्म में, नाम और ईमेल टेक्स्ट बॉक्स भरें.इसके बाद, मुझे ऑर्डर से जुड़े अपडेट और प्रचार के मैसेज चाहिए वाले चेकबॉक्स पर सही का निशान लगाएं.
10. चेकआउट प्रोसेस पूरी करने के लिए, सबमिट करें बटन पर क्लिक करें.
11. रिकॉर्डर पैनल में. रिकॉर्डिंग बंद करने के लिए, रिकॉर्डिंग बंद करें बटन पर क्लिक करें.

5. यूज़र फ़्लो को फिर से चलाना

यूज़र फ़्लो रिकॉर्ड करने के बाद, फिर से चलाएं बटन पर क्लिक करके, इसे फिर से चलाया जा सकता है.

आप पेज पर यूज़र फ़्लो रीप्ले देख सकते हैं. रीप्ले, रिकॉर्डर पैनल में भी दिखता है.

आप रीप्ले सेटिंग कॉन्फ़िगर करके इंटरनेट की रफ़्तार धीमी कर सकते हैं. उदाहरण के लिए, फिर से चलाने की सेटिंग को बड़ा करें. इसके बाद, नेटवर्क ड्रॉपडाउन में धीमे 3G को चुनें.

आप सभी चरणों के लिए, ज़्यादा समय खत्म होने की अवधि भी सेट कर सकते हैं.

हो सकता है कि आने वाले समय में ज़्यादा सेटिंग इस्तेमाल की जाएं. आप हमारे साथ फिर से चलाने की सेटिंग शेयर कर सकते हैं!

6. उपयोगकर्ता के फ़्लो का आकलन करना

आप परफ़ॉर्मेंस का आकलन करें बटन पर क्लिक करके, यूज़र फ़्लो की परफ़ॉर्मेंस मेज़र कर सकते हैं. उदाहरण के लिए, चेकआउट किसी शॉपिंग वेबसाइट का एक अहम उपयोगकर्ता फ़्लो है. रिकॉर्डर पैनल की मदद से, आप चेकआउट फ़्लो को एक बार रिकॉर्ड कर सकते हैं और उसे नियमित तौर पर मेज़र कर सकते हैं.

परफ़ॉर्मेंस मेज़र करें बटन पर क्लिक करने से, सबसे पहले उपयोगकर्ता के रीप्ले को ट्रिगर किया जाएगा. इसके बाद, परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस ट्रेस खोला जाएगा.

परफ़ॉर्मेंस पैनल की मदद से, अपने पेज के रनटाइम की परफ़ॉर्मेंस का विश्लेषण करने का तरीका जानें. आप परफ़ॉर्मेंस की जानकारी पैनल में जाकर, वेब वाइटल चेकबॉक्स चालू कर सकते हैं. साथ ही, वेब वाइटल मेट्रिक देख सकते हैं और उपयोगकर्ता ब्राउज़िंग अनुभव को बेहतर बनाने के अवसरों की पहचान कर सकते हैं.

7. यूज़र फ़्लो में बदलाव करें

उपयोगकर्ता के फ़्लो में बदलाव करने के लिए, विकल्पों को देखते हैं.

रिकॉर्डर पैनल के सबसे ऊपर, आपके लिए ये विकल्प हैं:

1. नई रिकॉर्डिंग जोड़ें. नई रिकॉर्डिंग जोड़ने के लिए, + आइकॉन पर क्लिक करें.
2. सभी रिकॉर्डिंग देखें. ड्रॉपडाउन में सेव की गई रिकॉर्डिंग की सूची दिखती है. सेव की गई रिकॉर्डिंग की सूची को बड़ा और मैनेज करने के लिए, [number] रिकॉर्डिंग विकल्प चुनें.
3. रिकॉर्डिंग एक्सपोर्ट करना स्क्रिप्ट को अपनी पसंद के मुताबिक बनाने के लिए, उपयोगकर्ता फ़्लो को Puppeteer स्क्रिप्ट के तौर पर एक्सपोर्ट किया जा सकता है.
4. रिकॉर्डिंग मिटाना. चुनी गई रिकॉर्डिंग मिटाएं.

आप रिकॉर्डिंग के नाम के बगल में मौजूद 'बदलाव करें' बटन पर क्लिक करके, उसके नाम में बदलाव भी कर सकते हैं.

8. चरणों में बदलाव करें

किसी वर्कफ़्लो में दिए गए चरणों में बदलाव करने के विकल्पों को देखें.

चरणों को बड़ा करें

1. कार्रवाई की जानकारी देखने के लिए, हर चरण को बड़ा करें. उदाहरण के लिए, क्लिक एलिमेंट &कोटेशन;कैप्चीनो&कोटेशन चरण को बड़ा करें.
2. ऊपर दिया गया तरीका दो सिलेक्टर दिखाता है. ज़्यादा जानकारी के लिए, सिलेक्टर की प्राथमिकता देखें. उपयोगकर्ता फ़्लो को फिर से चलाते समय, रिकॉर्डर किसी एक सिलेक्टर के साथ क्रम से, एलिमेंट के बारे में क्वेरी करने की कोशिश करता है. उदाहरण के लिए, अगर रिकॉर्डर पहले सिलेक्टर के साथ एलिमेंट की क्वेरी करता है, तो वह दूसरे सिलेक्टर को छोड़कर अगले चरण पर चला जाएगा.
3. आप किसी भी सिलेक्टर को जोड़ या हटा सकते हैं. उदाहरण के लिए, आप selector #2 को हटा सकते हैं, क्योंकि इस मामले में सिर्फ़ aria/Cappuccino काफ़ी है. चुनने वाले #2 पर माउस घुमाएं और - पर क्लिक करके उसे हटाएं.
4. चुनने वाले टूल में भी बदलाव किया जा सकता है. उदाहरण के लिए, अगर आप Cappuccino के बजाय Mocha चुनना चाहते हैं, तो आप चुनने के मान को aria/Mocha में बदल सकते हैं. वैकल्पिक रूप से, चुनें बटन पर क्लिक करें और फिर पेज पर Mocha पर क्लिक करें.
5. फ़्लो को अभी फिर से चलाएं, इसे Cappuccino के बजाय Mocha चुनें.
6. type, target, value जैसी दूसरी चरण प्रॉपर्टी में बदलाव करने की कोशिश करें.

चरण जोड़ें और हटाएं

आप इन चरणों को हटा और जोड़ भी सकते हैं. यह तब काम आता है, जब आप एक और चरण जोड़ना चाहते हैं या गलती से जोड़ा गया चरण हटा देना चाहते हैं. उपयोगकर्ता फ़्लो को फिर से रिकॉर्ड करने के बजाय, आप इसमें बदलाव कर सकते हैं. मेन्यू खोलने के चरण के बगल में 3-बिंदु वाले कबाब मेन्यू पर क्लिक करें.

1. उदाहरण के लिए, मोचा चरण के बाद स्क्रोल इवेंट ज़रूरी नहीं है. आप इसे हटाने के लिए चरण हटाएं चुन सकते हैं.
2. मान लें कि आप कोई भी काम करने से पहले, पेज पर नौ कॉफ़ी दिखाने का इंतज़ार करते हैं.
3. Mocha स्टेप मेन्यू में, पहले चरण जोड़ें चुनें.
4. असर एलिमेंट में, नए ब्यौरे में नीचे दी गई जानकारी में बदलाव करें:
   • टाइप: WaittForElement
   • सिलेक्टर #1: .cup
   • ऑपरेटर: == (ऑपरेटर जोड़ें बटन पर क्लिक करें)
   • संख्या: 9 (गिनती जोड़ें बटन पर क्लिक करें)
5. बदलाव देखने के लिए, फ़्लो को अभी फिर से चलाएं.

9. बधाई हो!

बधाई। आपने यह कोडलैब (कोड बनाना सीखना) पूरा कर लिया है!

वैसे, आप रिकॉर्डिंग के लिए सिलेक्टर को अपनी पसंद के मुताबिक भी बना सकते हैं. ज़्यादा जानने के लिए हमारे दस्तावेज़ पर जाएं.

आप इस कोडलैब को कैसे ढूंढ सकते हैं?

नहीं, यह उबाऊ है. अच्छा, मुझे यह पसंद है!