नीचे दिए गए वीडियो में, नए रिकॉर्डर पैनल (झलक देखने की सुविधा) की झलक देखें.
उपयोगकर्ता फ़्लो को रिकॉर्ड करने, फिर से चलाने, और मेज़र करने के लिए, Recorder पैनल का इस्तेमाल करने का तरीका जानने के लिए यह ट्यूटोरियल पूरा करें.
रिकॉर्ड किए गए उपयोगकर्ता फ़्लो शेयर करने, उनमें और उनके चरणों में बदलाव करने के तरीके के बारे में ज़्यादा जानने के लिए, रिकॉर्डर की सुविधाओं का रेफ़रंस देखें.
Recorder पैनल खोलना
- DevTools खोलें.
ज़्यादा विकल्प
> ज़्यादा टूल > रिकॉर्डर पर क्लिक करें.
इसके अलावा, रिकॉर्डर पैनल खोलने के लिए, कमांड मेन्यू का इस्तेमाल करें.
परिचय
हम कॉफी ऑर्डर करने वाले इस डेमो पेज का इस्तेमाल करेंगे. चेकआउट, शॉपिंग वेबसाइटों पर उपयोगकर्ताओं का एक सामान्य फ़्लो है.
अगले सेक्शन में, हम आपको रिकॉर्डर पैनल की मदद से, चेकआउट के इस फ़्लो को रिकॉर्ड करने, फिर से चलाने, और ऑडिट करने का तरीका बताएंगे:
- कार्ट में कॉफी जोड़ें.
- कार्ट में एक और कॉफी जोड़ें.
- कार्ट पेज पर जाएं.
- कार्ट से एक कॉफी हटाएं.
- चेकआउट की प्रोसेस शुरू करें.
- पेमेंट के तरीके की जानकारी भरें.
- चेक आउट करें.
यूज़र फ़्लो रिकॉर्ड करना
- यह डेमो पेज खोलें. शुरू करने के लिए, नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें.
- रिकॉर्डिंग का नाम टेक्स्ट बॉक्स में "coffee checkout" डालें.
- नई रिकॉर्डिंग शुरू करें बटन पर क्लिक करें. रिकॉर्डिंग शुरू हो गई है. पैनल में रिकॉर्डिंग की जा रही है... दिख रहा है. इससे पता चलता है कि रिकॉर्डिंग की जा रही है.
- इसे कार्ट में जोड़ने के लिए, कैप्पुचीनो पर क्लिक करें.
- अमेरिकन कॉफी को कार्ट में जोड़ने के लिए, उस पर क्लिक करें. ध्यान दें कि रिकॉर्डर में, अब तक किए गए चरणों की जानकारी दिखती है.
- कार्ट पेज पर जाएं और कार्ट से अमेरिकन कॉफी हटाएं.
- चेकआउट की प्रोसेस शुरू करने के लिए, कुल: 190 रुपये बटन पर क्लिक करें.
- पेमेंट की जानकारी वाले फ़ॉर्म में, नाम और ईमेल टेक्स्टबॉक्स भरें.इसके बाद, मुझे ऑर्डर से जुड़े अपडेट और प्रमोशनल मैसेज चाहिए चेकबॉक्स पर सही का निशान लगाएं.
- चेकआउट की प्रोसेस पूरी करने के लिए, सबमिट करें बटन पर क्लिक करें.
- रिकॉर्डिंग बंद करने के लिए, रिकॉर्डर पैनल में,
रिकॉर्डिंग बंद करें बटन पर क्लिक करें.
यूज़र फ़्लो को फिर से चलाना
उपयोगकर्ता फ़्लो रिकॉर्ड करने के बाद, उसे 
फिर से चलाएं बटन पर क्लिक करके फिर से चलाया जा सकता है.
पेज पर, उपयोगकर्ता फ़्लो को फिर से चलाया जा सकता है. रीप्ले की प्रोग्रेस, रिकॉर्डर पैनल में भी दिखती है.
अगर रिकॉर्डिंग के दौरान आपने गलत क्लिक किया है या कुछ काम नहीं कर रहा है, तो अपने उपयोगकर्ता फ़्लो को डीबग किया जा सकता है: इसके रीप्ले को धीमा करें, ब्रेकपॉइंट सेट करें, और इसे सिलसिलेवार तरीके से चलाएं.
धीमे नेटवर्क को सिम्युलेट करना
रीप्ले की सेटिंग कॉन्फ़िगर करके, नेटवर्क कनेक्शन के धीमे होने का अनुकरण किया जा सकता है. उदाहरण के लिए, रीप्ले सेटिंग को बड़ा करें. इसके बाद, नेटवर्क ड्रॉप-डाउन में जाकर, धीमा 3G चुनें.
आने वाले समय में, ज़्यादा सेटिंग के साथ भी यह सुविधा काम कर सकती है. रीप्ले की ऐसी सेटिंग हमारे साथ शेयर करें जो आपको चाहिए!
यूज़र फ़्लो को मेज़र करना
परफ़ॉर्मेंस मेज़र करें बटन पर क्लिक करके, यूज़र फ़्लो की परफ़ॉर्मेंस मेज़र की जा सकती है. उदाहरण के लिए, चेकआउट, शॉपिंग वेबसाइट के लिए उपयोगकर्ता फ़्लो का एक अहम हिस्सा है. रिकॉर्डर पैनल की मदद से, चेकआउट फ़्लो को एक बार रिकॉर्ड किया जा सकता है और उसे नियमित तौर पर मेज़र किया जा सकता है.
परफ़ॉर्मेंस मेज़र करें बटन पर क्लिक करने से, पहले उपयोगकर्ता फ़्लो को फिर से चलाया जाएगा. इसके बाद, परफ़ॉर्मेंस पैनल में परफ़ॉर्मेंस ट्रेस खुल जाएगा.
परफ़ॉर्मेंस पैनल की मदद से, अपने पेज की रनटाइम परफ़ॉर्मेंस का विश्लेषण करने का तरीका जानें. वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी मेट्रिक देखने और उपयोगकर्ता के ब्राउज़िंग अनुभव को बेहतर बनाने के अवसरों की पहचान करने के लिए, परफ़ॉर्मेंस पैनल में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी का चेकबॉक्स चालू किया जा सकता है.
चरणों में बदलाव करना
रिकॉर्ड किए गए वर्कफ़्लो में चरणों में बदलाव करने के बुनियादी विकल्पों के बारे में जानें.
बदलाव करने के विकल्पों की पूरी सूची के लिए, सुविधाओं के रेफ़रंस में सिलसिलेवार निर्देशों में बदलाव करें देखें.
चरणों को बड़ा करना
कार्रवाई की जानकारी देखने के लिए, हर चरण को बड़ा करें. उदाहरण के लिए, एलिमेंट "Cappuccino" पर क्लिक करें चरण को बड़ा करें.
ऊपर दिए गए चरण में दो सिलेक्टर दिखाए गए हैं. ज़्यादा जानकारी के लिए, रिकॉर्डिंग के सिलेक्टर के बारे में जानकारी लेख पढ़ें.
यूज़र फ़्लो को फिर से चलाते समय, रिकॉर्डर, क्रम के हिसाब से किसी एक सिलेक्टर की मदद से एलिमेंट को क्वेरी करने की कोशिश करता है. उदाहरण के लिए, अगर रिकॉर्डर पहले सिलेक्टर की मदद से एलिमेंट को क्वेरी करता है, तो वह दूसरे सिलेक्टर को छोड़कर अगले चरण पर जाएगा.
किसी चरण में सिलेक्टर जोड़ना और हटाना
आपके पास किसी भी सिलेक्टर को जोड़ने या हटाने का विकल्प है. उदाहरण के लिए, सिलेक्टर #2 को हटाया जा सकता है, क्योंकि इस मामले में सिर्फ़ aria/Cappuccino का इस्तेमाल करना काफ़ी है. सिलेक्टर #2 पर कर्सर घुमाएं और उसे हटाने के लिए, - पर क्लिक करें.
किसी चरण में सिलेक्टर में बदलाव करना
चुने गए आइटम में भी बदलाव किया जा सकता है. उदाहरण के लिए, अगर आपको कैप्पुचीनो के बजाय मोचा चुनना है, तो:
इसके बजाय, सिलेक्टर की वैल्यू को aria/Mocha पर सेट करें.
इसके अलावा, चुनें
बटन पर क्लिक करें. इसके बाद, पेज पर मोचा पर क्लिक करें.अब फ़्लो को फिर से चलाएं. इससे, कैप्पुचीनो के बजाय मोचा चुना जाना चाहिए.
टाइप, टारगेट, वैल्यू वगैरह जैसी अन्य चरण प्रॉपर्टी में बदलाव करें.
चरणों को जोड़ना और हटाना
चरणों को जोड़ने और हटाने के विकल्प भी हैं. यह सुविधा तब काम आती है, जब आपको कोई और चरण जोड़ना हो या गलती से जोड़ा गया चरण हटाना हो. उपयोगकर्ता फ़्लो को फिर से रिकॉर्ड करने के बजाय, उसमें बदलाव किया जा सकता है:
जिस चरण में बदलाव करना है उस पर राइट क्लिक करें या उसके बगल में मौजूद
तीन बिंदु वाले आइकॉन पर क्लिक करें. 
इसे हटाने के लिए, चरण हटाएं को चुनें. उदाहरण के लिए, Mocha चरण के बाद स्क्रोल इवेंट की ज़रूरत नहीं है.
मान लें कि आपको कोई भी कार्रवाई करने से पहले, पेज पर नौ कॉफी दिखने का इंतज़ार करना है. Mocha के चरण वाले मेन्यू में, इससे पहले चरण जोड़ें को चुनें.
एश्यर्ट एलिमेंट में, नए चरण में यह जानकारी जोड़ें:
- टाइप: waitForElement
- सिलेक्टर #1: .cup
- ऑपरेटर: == (ऑपरेटर जोड़ें बटन पर क्लिक करें)
- संख्या: 9 (संख्या जोड़ें बटन पर क्लिक करें)
बदलाव देखने के लिए, फ़्लो को अभी
फिर से चलाएं.
अगले चरण
बधाई हो, आपने ट्यूटोरियल पूरा कर लिया है!
रिकॉर्डर से जुड़ी ज़्यादा सुविधाओं और वर्कफ़्लो (उदाहरण के लिए, इंपोर्ट और एक्सपोर्ट) के बारे में जानने के लिए, रिकॉर्डर की सुविधाओं का रेफ़रंस देखें.