chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

ब्यौरा

उपलब्धता

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

खास जानकारी

devtools.recorder एपीआई, झलक देखने के लिए उपलब्ध एक सुविधा है. इसकी मदद से, Chrome DevTools में Recorder पैनल को बढ़ाया जा सकता है. Chrome M105 से, एक्सपोर्ट करने की सुविधा को बढ़ाया जा सकता है. Chrome M112 से, रीप्ले बटन को बड़ा किया जा सकता है.

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

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

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

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

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

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

प्लगिन एक्सपोर्ट करने का उदाहरण

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

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

रीप्ले प्लगिन का उदाहरण

नीचे दिए गए कोड में, एक एक्सटेंशन प्लगिन लागू किया गया है. यह एक डमी रिकॉर्डर व्यू बनाता है और रीप्ले के अनुरोध पर उसे दिखाता है:

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 पर एक्सटेंशन का पूरा उदाहरण देखें.

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

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