chrome.devtools.recorder

refresh date: 2026-09-25 robots: noindex

Beschreibung

Mit der chrome.devtools.recorder API können Sie das Steuerfeld „Recorder“ in den DevTools anpassen.

Verfügbarkeit

Chrome 105 oder höher

Eine allgemeine Einführung in die Verwendung von Entwicklertool-APIs finden Sie in der Zusammenfassung der Entwicklertool-APIs.

Übersicht

Die devtools.recorder API ist eine Funktion in der Vorabversion, mit der Sie das Recorder-Steuerfeld in den Chrome-Entwicklertools erweitern können. Ab Chrome M105 können Sie die Exportfunktion erweitern. Ab Chrome M112 können Sie die Schaltfläche „Wiederholen“ erweitern.

Exportfunktion anpassen

Verwenden Sie die Funktion registerRecorderExtensionPlugin, um ein Erweiterungs-Plug-in zu registrieren. Diese Funktion erfordert eine Plug-in-Instanz, einen name und einen mediaType als Parameter. Die Plug-in-Instanz muss zwei Methoden implementieren: stringify und stringifyStep.

Die von der Erweiterung bereitgestellte name wird im Menü Exportieren im Bereich Rekorder angezeigt.

Je nach Exportkontext ruft das Recorder-Steuerfeld eine der beiden Funktionen auf, wenn der Nutzer auf die von der Erweiterung bereitgestellte Exportoption klickt:

Mit dem Parameter mediaType kann die Erweiterung die Art der Ausgabe angeben, die sie mit den Funktionen stringify und stringifyStep generiert. Beispiel: application/javascript, wenn das Ergebnis ein JavaScript-Programm ist.

Beispiel für ein Export-Plug-in

Mit dem folgenden Code wird ein Erweiterungs-Plug-in implementiert, das eine Aufzeichnung mit JSON.stringify in einen String umwandelt:

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'
);

Schaltfläche „Noch einmal abspielen“ anpassen

Wenn Sie die Schaltfläche „Nochmal“ im Rekorder anpassen möchten, verwenden Sie die Funktion registerRecorderExtensionPlugin. Das Plug-in muss die Methode replay implementieren, damit die Anpassung wirksam wird. Wenn die Methode erkannt wird, wird im Rekorder eine Schaltfläche zum Wiederholen angezeigt. Wenn Sie auf die Schaltfläche klicken, wird das aktuelle Aufnahmeobjekt als erstes Argument an die Methode replay übergeben.

An dieser Stelle kann die Erweiterung eine RecorderView anzeigen, um die Wiederholung zu verarbeiten, oder andere Erweiterungs-APIs verwenden, um die Wiederholungsanfrage zu verarbeiten. Rufen Sie chrome.devtools.recorder.createView auf, um ein neues RecorderView zu erstellen.

Beispiel für ein Plug-in zur Wiedergabe

Der folgende Code implementiert ein Erweiterungs-Plug-in, das eine Dummy-Ansicht für den Rekorder erstellt und bei einer Wiedergabeanfrage anzeigt:

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'
);

Ein vollständiges Beispiel für eine Erweiterung finden Sie auf GitHub.

Typen

RecorderExtensionPlugin

Eine Plug-in-Schnittstelle, die vom Steuerfeld „Rekorder“ aufgerufen wird, um das Steuerfeld „Rekorder“ anzupassen.

Attribute

  • Nochmal

    void

    Chrome 112 oder höher

    Ermöglicht es der Erweiterung, eine benutzerdefinierte Wiedergabefunktion zu implementieren.

    Die Funktion replay sieht so aus: 

    (recording: object) => {...}

  • stringify

    void

    Konvertiert eine Aufzeichnung aus dem Format des Rekorder-Bereichs in einen String.

    Die Funktion stringify sieht so aus: 

    (recording: object) => {...}

  • stringifyStep

    void

    Konvertiert einen Schritt der Aufzeichnung aus dem Format des Rekorder-Bereichs in einen String.

    Die Funktion stringifyStep sieht so aus: 

    (step: object) => {...}

    • Schritt

      Objekt

      Ein Schritt der Aufzeichnung einer Nutzerinteraktion mit der Seite. Dies sollte dem Schrittschema von Puppeteer entsprechen.

RecorderView

Chrome 112 oder höher

Stellt eine Ansicht dar, die von einer Erweiterung erstellt wurde, um in das Rekorder-Steuerfeld eingebettet zu werden.

Attribute

  • onHidden

    Event<functionvoidvoid>

    Wird ausgelöst, wenn die Ansicht ausgeblendet wird.

    Die Funktion onHidden.addListener sieht so aus: 

    (callback: function) => {...}

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      () => void

  • onShown

    Event<functionvoidvoid>

    Wird ausgelöst, wenn die Ansicht angezeigt wird.

    Die Funktion onShown.addListener sieht so aus: 

    (callback: function) => {...}

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      () => void

  • Einblenden

    void

    Gibt an, dass die Erweiterung diese Ansicht im Bereich „Rekorder“ anzeigen möchte.

    Die Funktion show sieht so aus: 

    () => {...}

Methoden

createView()

Chrome 112 oder höher 
chrome.devtools.recorder.createView(
  title: string,
  pagePath: string,
): RecorderView

Erstellt eine Ansicht, die die Wiedergabe verarbeiten kann. Diese Ansicht wird in das Steuerfeld „Recorder“ eingebettet.

Parameter

  • Titel

    String

    Titel, der neben dem Erweiterungssymbol in der Symbolleiste der Entwicklertools angezeigt wird.

  • pagePath

    String

    Pfad der HTML-Seite des Bereichs relativ zum Verzeichnis der Erweiterung.

Ausgabe

registerRecorderExtensionPlugin()

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

Registriert ein Rekorder-Erweiterungs-Plug-in.

Parameter

  • Eine Instanz, die die Schnittstelle „RecorderExtensionPlugin“ implementiert.

  • name

    String

    Der Name des Plug-ins.

  • mediaType

    String

    Der Medientyp des Stringinhalts, den das Plug-in erzeugt.