chrome.devtools.performance

Beschreibung

Mit der chrome.devtools.recorder API kannst du den Rekorder-Bereich in den Entwicklertools anpassen.

Eine allgemeine Einführung zur Verwendung der Entwicklertools-APIs finden Sie in der Zusammenfassung der Entwicklertools.

Verfügbarkeit

Chrome 105 oder höher

Konzepte und Verwendung

Mit der chrome.devtools.performance API können Entwickler mit den Aufzeichnungsfunktionen des Steuerfelds „Leistung“ in den Chrome-Entwicklertools interagieren. Mit dieser API können Sie Benachrichtigungen erhalten, wenn die Aufzeichnung beginnt oder endet.

Es sind zwei Ereignisse verfügbar:

  • onProfilingStarted: Dieses Ereignis wird ausgelöst, wenn im Steuerfeld Leistung mit der Aufzeichnung von Leistungsdaten beginnt.
  • onProfilingStopped: Dieses Ereignis wird ausgelöst, wenn im Steuerfeld Leistung keine Leistungsdaten mehr aufgezeichnet werden. Version, die den aktuellen Stacktrace mit der Erstellung verknüpft Beide Ereignisse haben keine zugehörigen Parameter.

Dadurch können Entwickler Erweiterungen erstellen, die im Bereich Leistung auf den Aufzeichnungsstatus reagieren und die Erstellung von Leistungsprofilen zusätzlich automatisieren.

Beispiele

So können Sie mithilfe der API Aktualisierungen des Aufnahmestatus anhören


chrome.devtools.performance.onProfilingStarted.addListener(() => {
  // Profiling started listener implementation
});

chrome.devtools.performance.onProfilingStopped.addListener(() => {
  // Profiling stopped listener implementation
})

Typen

RecorderExtensionPlugin

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

Attribute

  • Nochmal

    voidm

    Chrome 112 und höher

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

    Die Funktion replay sieht so aus: 

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

  • stringify

    voidm

    Konvertiert eine Aufnahme aus dem Feld „Rekorder“ in einen String.

    Die Funktion stringify sieht so aus: 

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

  • stringifyStep

    voidm

    Konvertiert einen Schritt der Aufnahme aus dem Feldformat Rekorder in einen String.

    Die Funktion stringifyStep sieht so aus: 

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

    • Schritt

      Objekt

      Ein Schritt der Aufzeichnung einer Nutzerinteraktion mit der Seite. Dies sollte mit dem Puppeteer-Schrittschema übereinstimmen.

RecorderView

Chrome 112 und höher

Stellt eine durch Erweiterung erstellte Ansicht dar, die in den Rekorder-Bereich eingebettet wird.

Attribute

  • onHidden

    Ereignis<functionvoidvoid>

    Wird ausgelöst, wenn die Ansicht ausgeblendet ist

    Die Funktion onHidden.addListener sieht so aus: 

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

    • callback

      Funktion

      Der Parameter callback sieht so aus: 

      () => void

  • onShown

    Ereignis<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

    voidm

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

    Die Funktion show sieht so aus: 

    () => {...}

Methoden

createView()

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

Erstellt eine Ansicht, die die erneute Wiedergabe verarbeiten kann. Diese Ansicht wird in den Rekorder-Bereich 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 Erweiterungsverzeichnis.

Gibt Folgendes zurück:

registerRecorderExtensionPlugin()

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

Registriert das Plug-in der Rekorder-Erweiterung.

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.