Mit dem neuen Befehlseditor effizient CDP-Befehle (Chrome Devtools Protocol) erstellen

Hadrien Jaubert
Hadrien Jaubert
GitHub Startseite

Das Chrome DevTools Protocol (CDP) ist ein Remote-Debugging-Protokoll (API), mit dem Entwickler mit einem laufenden Chrome-Browser kommunizieren können. Mithilfe von CDP können Sie in den Chrome-Entwicklertools den Status des Browsers prüfen, sein Verhalten steuern und Informationen zur Fehlerbehebung erfassen. Sie können auch Chrome-Erweiterungen erstellen, die CDP verwenden.

Dies ist beispielsweise ein CDP-Befehl, mit dem eine neue Regel mit der angegebenen ruleText in ein Stylesheet mit der angegebenen styleSheetId an der von location angegebenen Position eingefügt wird.

{ 
    command: 'CSS.addRule', 
    parameters: {
        styleSheetId: '2',
        ruleText:'Example', 
        location: {
            startLine: 1,
            startColumn: 1,
            endLine: 1,
            endColumn: 1
        }
    }
}

Auf dem Tab Protokollmonitor können Sie CDP-Anfragen senden und alle CDP-Anfragen und ‑Antworten ansehen, die von DevTools gesendet und empfangen werden.

Die Befehlszeilenleiste unten im Protokollmonitor.

Bisher war es schwierig, den Befehl manuell zu erstellen, insbesondere einen Befehl mit vielen Parametern. Sie mussten nicht nur auf die öffnenden und schließenden Klammern und Anführungszeichen achten, sondern sich auch die Parameter des Befehls merken. Das wiederum hat Sie dazu veranlasst, die CDP-Dokumentation aufzurufen.

Um dieses Problem zu lösen, wurde in DevTools ein neuer CDP-Editor eingeführt, dessen Hauptziele folgende sind:

  • Befehle zur automatischen Vervollständigung Die Eingabe von CDP-Befehlen wird vereinfacht, da eine automatische Vervollständigung die Liste der verfügbaren Befehle anzeigt.
  • Befehlsparameter automatisch ausfüllen Sie müssen nicht mehr in der CDP-Dokumentation nach der Liste der verfügbaren Befehlsparameter suchen.
  • Einfacheres Eingeben von Parametern Sie müssen nur die Werte der Parameter eingeben, die Sie senden möchten.
  • Bearbeiten und noch einmal senden Die Prototyping-Geschwindigkeit wird verbessert, da sich CDP-Befehle jetzt schneller ändern lassen.

Sehen wir uns nun an, was dieser neue Editor bietet und wie Sie ihn nutzen können.

Funktion zur automatischen Vervollständigung

Das Drop-down-Menü für die automatische Vervollständigung.

Die Eingabeleiste für Befehle unterstützt jetzt eine automatische Vervollständigung. Sie können damit die Namen der CDP-Befehle eingeben, auf die Sie Zugriff haben. Das kann sehr praktisch sein, wenn Befehle keine Parameter akzeptieren.

String- und Zahlenparameter

Mit diesem neuen Editor können Sie jetzt ganz einfach die Werte primitiver Parameter bearbeiten. Klicken Sie zum Öffnen des Editors auf das Symbol Öffnen Sie den linken Bereich. neben der Befehlseingabe.

Sobald Sie den Befehlsnamen eingegeben haben, werden im Editor automatisch die entsprechenden Parameter angezeigt. Sie müssen nicht in der Dokumentation nachsehen, welche Parameter zu welchen Befehlen gehören. Außerdem werden die Parameter im Editor in einer bestimmten Reihenfolge angezeigt: zuerst die obligatorischen (rot) und dann die optionalen (blau).

Wenn Sie einem optionalen Parameter einen Wert hinzufügen möchten, bewegen Sie den Mauszeiger auf seinen Namen und klicken Sie auf die Schaltfläche +. Wenn Sie den Parameter auf „undefiniert“ zurücksetzen möchten, klicken Sie auf die Schaltfläche Auf Standardwert zurücksetzen.

Die Schaltflächen „+“ und „Auf Standardwert zurücksetzen“.

Enum- und boolesche Parameter

Wenn Sie enum- oder boolesche Parameter bearbeiten, wird ein Drop-down-Menü mit einer Auswahl möglicher Werte (für enums) oder die Option „wahr“ oder „falsch“ für boolesche Parameter angezeigt. So wird das Risiko verringert, dass ein falscher Wert für enum-Parameter eingegeben wird, und gleichzeitig für Genauigkeit und Einfachheit gesorgt.

Die Drop-down-Menüs „Boolescher Wert“ und „Enum“

Arrayparameter

Bei Arrayparametern können Sie dem Array manuell Werte hinzufügen. Bewegen Sie den Mauszeiger auf die Zeile des Parameters und klicken Sie auf die Schaltfläche +.

Die Schaltfläche „+“, mit der ein Arrayelement hinzugefügt wird.

Wenn Sie Arrayelemente einzeln löschen möchten, klicken Sie neben den Elementen auf die Papierkorbschaltfläche. Sie können auch alle Parameter aus dem Array mit der Blockierungsschaltfläche löschen. In diesem Fall wird der Arrayparameter auf [] zurückgesetzt.

Die Schaltflächen „Parameter löschen“ und „Auf Standardeinstellungen zurücksetzen“.

Objektparameter

Wenn Sie einen Befehl eingeben, der Objektparameter akzeptiert, werden im Editor die Schlüssel dieses Objekts aufgelistet und Sie können die Werte direkt bearbeiten. Das funktioniert für alle Arten von verschachtelten Parametern.

Verschachtelte Parameter

Funktionsweise des Befehls und der Parameter im Editor

Waren Sie schon einmal unsicher, welchen Zweck ein Parameter oder Befehl hat? Wenn Sie den Mauszeiger auf einen Befehl oder Parameter bewegen, wird eine beschreibende Kurzinfo mit einem Link zur Onlinedokumentation angezeigt.

Die beschreibende Kurzinfo, die angezeigt wird, wenn Sie den Mauszeiger auf einen Befehl bewegen.

Vor dem Senden falscher Parameter warnen

Bisher mussten Sie warten, bis die Fehlerantwort angezeigt wurde, um zu erfahren, ob der Wert eines Parameters den richtigen Typ hat. Mit diesem neuen Editor ist das nicht mehr nötig. Sie sehen Echtzeitfehler, wenn der eingegebene Wert für den Parameter nicht zulässig ist.

Ein Fehlersymbol neben einem Parameter mit einem falschen Wert.

Befehl noch einmal senden

Wenn Sie einen Parameter des gerade gesendeten Befehls anpassen möchten, müssen Sie ihn nicht noch einmal eingeben. Wenn Sie den Befehl bearbeiten und noch einmal senden möchten, klicken Sie mit der rechten Maustaste auf ein Element in der Tabelle und wählen Sie im Drop-down-Menü Bearbeiten und noch einmal senden aus. Daraufhin wird der CDP-Editor automatisch wieder geöffnet und mit dem ausgewählten Befehl vorausgefüllt.

Das Drop-down-Menü eines Befehls in der Tabelle mit der Option „Bearbeiten und noch einmal senden“.

Befehl in JSON-Format kopieren

Wenn Sie den CDP-Befehl im JSON-Format in die Zwischenablage kopieren möchten, klicken Sie links in der Symbolleiste auf das Symbol zum Kopieren Kopieren.. Wenn Sie einen Befehl direkt in die Eingabeleiste eingeben, wird er nahtlos in den Editor übernommen. Das gilt auch umgekehrt.

Fazit

Das DevTools-Team wollte mit dem Design dieses neuen CDP-Editors das Eintippen von CDP-Befehlen vereinfachen. Mit dem neuen Editor können Sie auch Parameter neben der Dokumentation aufrufen und Ihre CDP-Befehle einfacher senden.

Vorschaukanäle herunterladen

Verwenden Sie als Standard-Entwicklungsbrowser Chrome Canary, Chrome Dev oder Chrome Beta. Diese Vorabversionen bieten Zugriff auf die neuesten DevTools-Funktionen, ermöglichen den Test moderner Webplattform-APIs und helfen Ihnen, Probleme auf Ihrer Website zu finden, bevor Ihre Nutzer sie bemerken.

Chrome-Entwicklertools-Team kontaktieren

Mit den folgenden Optionen können Sie über neue Funktionen, Updates oder andere Themen im Zusammenhang mit den DevTools sprechen.