इस पेज का अनुवाद Cloud Translation API से किया गया है.

chrome.devtools.recorder

ब्यौरा

DevTools में रिकॉर्डर पैनल को पसंद के मुताबिक बनाने के लिए, chrome.devtools.recorder API का इस्तेमाल करें.

devtools.recorder API, झलक देखने की सुविधा है. इसकी मदद से, Chrome DevTools में Recorder पैनल को बड़ा किया जा सकता है.

Developer Tools API के इस्तेमाल के बारे में सामान्य जानकारी के लिए, DevTool API की खास जानकारी देखें.

उपलब्धता

Chrome 105 और इसके बाद के वर्शन

सिद्धांत और इस्तेमाल

एक्सपोर्ट सुविधा को पसंद के मुताबिक बनाना

एक्सटेंशन प्लगिन को रजिस्टर करने के लिए, registerRecorderExtensionPlugin फ़ंक्शन का इस्तेमाल करें. इस फ़ंक्शन के लिए पैरामीटर के तौर पर प्लगिन इंस्टेंस, name, और mediaType की ज़रूरत होती है. प्लगिन इंस्टेंस में दो तरीके लागू करने होंगे: stringify और stringifyStep.

एक्सटेंशन से मिला name, Recorder पैनल के एक्सपोर्ट मेन्यू में दिखता है.

एक्सपोर्ट के कॉन्टेक्स्ट के आधार पर, जब उपयोगकर्ता एक्सटेंशन से मिले एक्सपोर्ट के विकल्प पर क्लिक करता है, तो Recorder पैनल, इन दोनों में से किसी एक फ़ंक्शन को शुरू करता है:

stringify, जिसे पूरी तरह से यूज़र फ़्लो रिकॉर्डिंग मिलती है
stringifyStep, जिसे रिकॉर्ड किया गया एक चरण मिलता है

mediaType पैरामीटर की मदद से एक्सटेंशन, stringify और stringifyStep फ़ंक्शन की मदद से जनरेट होने वाले आउटपुट का टाइप तय कर सकता है. उदाहरण के लिए, अगर नतीजा कोई JavaScript प्रोग्राम है, तो application/javascript.

रीप्ले बटन को कस्टमाइज़ करना

Recorder में रीप्ले बटन को पसंद के मुताबिक बनाने के लिए, registerRecorderExtensionPlugin फ़ंक्शन का इस्तेमाल करें. पसंद के मुताबिक बनाने के लिए, प्लग इन को replay तरीका लागू करना होगा. अगर तरीके का पता चलता है, तो Recorder में रीप्ले बटन दिखेगा. बटन पर क्लिक करने से, मौजूदा रिकॉर्डिंग ऑब्जेक्ट को replay तरीके में पहले तर्क के तौर पर पास कर दिया जाएगा.

इस स्थिति में, रीप्ले को मैनेज करने के लिए एक्सटेंशन, RecorderView दिखा सकता है या रीप्ले के अनुरोध को प्रोसेस करने के लिए, अन्य एक्सटेंशन एपीआई का इस्तेमाल कर सकता है. नया RecorderView बनाने के लिए, chrome.devtools.recorder.createView को शुरू करें.

उदाहरण

प्लगिन एक्सपोर्ट करें

यह कोड, एक ऐसा एक्सटेंशन प्लगिन लागू करता है जो JSON.stringify का इस्तेमाल करके, रिकॉर्डिंग को स्ट्रिंग बनाता है:

class MyPlugin {
  stringify(recording) {
    return Promise.resolve(JSON.stringify(recording));
  }
  stringifyStep(step) {
    return Promise.resolve(JSON.stringify(step));
  }
}

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  new MyPlugin(),
  /*name=*/'MyPlugin',
  /*mediaType=*/'application/json'
);

रीप्ले प्लगिन

इस कोड में, एक ऐसा एक्सटेंशन प्लगिन लागू किया जाता है जो डमी Recorder व्यू बनाता है. साथ ही, इसे फिर से चलाने का अनुरोध करने पर दिखाता है:

const view = await chrome.devtools.recorder.createView(
  /* name= */ 'ExtensionName',
  /* pagePath= */ 'Replay.html'
);

let latestRecording;

view.onShown.addListener(() => {
  // Recorder has shown the view. Send additional data to the view if needed.
  chrome.runtime.sendMessage(JSON.stringify(latestRecording));
});

view.onHidden.addListener(() => {
  // Recorder has hidden the view.
});

export class RecorderPlugin {
  replay(recording) {
    // Share the data with the view.
    latestRecording = recording;
    // Request to show the view.
    view.show();
  }
}

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  new RecorderPlugin(),
  /* name=*/ 'CoffeeTest'
);

GitHub पर एक्सटेंशन का पूरा उदाहरण देखें.

टाइप

RecorderExtensionPlugin

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

प्रॉपर्टी

फिर से चलाएं

void

Chrome 112 और उसके बाद के वर्शन

एक्सटेंशन को पसंद के मुताबिक फिर से चलाने की सुविधा लागू करने की अनुमति देता है.

replay फ़ंक्शन ऐसा दिखता है:
```
(recording: object)=> {...}
```
- रिकॉर्ड किया जा
  
  ऑब्जेक्ट
  
  पेज के साथ उपयोगकर्ता के इंटरैक्शन की रिकॉर्डिंग. यह Puppeteer की रिकॉर्डिंग स्कीमा से मेल खाना चाहिए.
स्ट्रिंग डालें

void

रिकॉर्डर पैनल फ़ॉर्मैट से रिकॉर्डिंग को स्ट्रिंग में बदलता है.

stringify फ़ंक्शन ऐसा दिखता है:
```
(recording: object)=> {...}
```
- रिकॉर्ड किया जा
  
  ऑब्जेक्ट
  
  पेज के साथ उपयोगकर्ता के इंटरैक्शन की रिकॉर्डिंग. यह Puppeteer की रिकॉर्डिंग स्कीमा से मेल खाना चाहिए.
stringifyStep

void

रिकॉर्डर पैनल फ़ॉर्मैट में मौजूद रिकॉर्डिंग के किसी चरण को स्ट्रिंग में बदलता है.

stringifyStep फ़ंक्शन ऐसा दिखता है:
```
(step: object)=> {...}
```
- चरण
  
  ऑब्जेक्ट
  
  पेज के साथ उपयोगकर्ता के इंटरैक्शन को रिकॉर्ड करने का चरण. यह Puppeteer के स्टेप स्कीमा से मेल खाना चाहिए.

RecorderView

Chrome 112 और उसके बाद के वर्शन

यह एक्सटेंशन के ज़रिए बनाए गए ऐसे व्यू के बारे में बताता है जिसे रिकॉर्डर पैनल में एम्बेड किया जा सकता है.

प्रॉपर्टी

onHidden

इवेंट<Functionvoidvoid>

व्यू छिपा होने पर सक्रिय होता है.

onHidden.addListener फ़ंक्शन ऐसा दिखता है:
```
(callback: function)=> {...}
```
- कॉलबैक
  
  फ़ंक्शन
  
  callback पैरामीटर ऐसा दिखता है:
```
()=>void
```
onShown

इवेंट<Functionvoidvoid>

व्यू दिखने पर ट्रिगर होता है.

onShown.addListener फ़ंक्शन ऐसा दिखता है:
```
(callback: function)=> {...}
```
- कॉलबैक
  
  फ़ंक्शन
  
  callback पैरामीटर ऐसा दिखता है:
```
()=>void
```
दिखाएं

void

इससे पता चलता है कि एक्सटेंशन इस व्यू को रिकॉर्डर पैनल में दिखाना चाहता है.

show फ़ंक्शन ऐसा दिखता है:
```
()=> {...}
```

तरीके

createView()

Chrome 112 और उसके बाद के वर्शन

chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
)

ऐसा व्यू बनाता है जो रीप्ले को हैंडल कर सकता है. यह व्यू, रिकॉर्डर पैनल में एम्बेड हो जाएगा.

पैरामीटर

title

स्ट्रिंग

डेवलपर टूल टूलबार में एक्सटेंशन आइकॉन के बगल में दिखने वाला टाइटल.
pagePath

स्ट्रिंग

एक्सटेंशन डायरेक्ट्री से जुड़े पैनल के एचटीएमएल पेज का पाथ.

रिटर्न

RecorderView

registerRecorderExtensionPlugin()

chrome.devtools.recorder.registerRecorderExtensionPlugin(
  plugin: RecorderExtensionPlugin,
  name: string,
  mediaType: string,
)

Recorder एक्सटेंशन प्लगिन को रजिस्टर करता है.

पैरामीटर

plugin

RecorderExtensionPlugin

RecorderExtensionPlugin इंटरफ़ेस को लागू करने वाला इंस्टेंस.
नाम

स्ट्रिंग

प्लगिन का नाम.
mediaType

स्ट्रिंग

प्लगिन से जनरेट की जाने वाली स्ट्रिंग कॉन्टेंट का मीडिया टाइप.