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