Das Chrome DevTools Protocol (CDP) ist ein Remote-Debugging-Protokoll (API), über das Entwickler mit einem laufenden Chrome-Browser kommunizieren können. In den Chrome-Entwicklertools können Sie mithilfe der CDP den Status des Browsers prüfen, sein Verhalten steuern und Debugging-Informationen erfassen. Sie können auch Chrome-Erweiterungen erstellen, die CDP verwenden.
Dies ist beispielsweise ein CDP-Befehl, der eine neue Regel mit dem angegebenen ruleText in ein Stylesheet mit dem gegebenen styleSheetId an der durch location angegebenen Position einfügt.
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Auf dem Tab Protokollmonitor-Leiste können Sie CDP-Anfragen senden und alle CDP-Anfragen und -Antworten ansehen, die von den Entwicklertools gesendet und empfangen werden.
Bisher war es schwierig, den Befehl von Hand zu erstellen, insbesondere einen Befehl mit vielen Parametern. Sie mussten nicht nur auf öffnende und schließende Klammern und Anführungszeichen achten, sondern auch die Parameter des Befehls kennen, wodurch Sie wiederum die CDP-Dokumentation nachschlagen mussten.
Um dieses Problem zu lösen, haben die Entwicklertools einen neuen CDP-Editor eingeführt, der folgende Hauptziele hat:
- Befehle für die automatische Vervollständigung Vereinfachen Sie die Eingabe von CDP-Befehlen, indem Sie über eine Funktion zur automatischen Vervollständigung eine Liste der verfügbaren Befehle erhalten.
- Befehlsparameter automatisch ausfüllen: In der CDP-Dokumentation finden Sie eine Liste der verfügbaren Befehlsparameter.
- Vereinfachen Sie die Eingabe des Parameters. Sie müssen nur die Werte der Parameter eingeben, die Sie senden möchten.
- Bearbeiten und noch einmal senden. Sie können die Prototyping-Geschwindigkeit verbessern, indem Sie einen CDP-Befehl schneller ändern.
Sehen wir uns nun an, was dieser neue Editor zu bieten hat und wie Sie ihn nutzen können!
Funktion für die automatische Vervollständigung
Die Befehlseingabeleiste unterstützt jetzt eine Funktion zur automatischen Vervollständigung. Es hilft Ihnen, die Namen der CDP-Befehle zu schreiben, auf die Sie Zugriff haben. Dies kann sehr praktisch bei Befehlen sein, die keine Parameter akzeptieren.
String- und Zahlenparameter
Mit diesem neuen Editor können Sie jetzt ganz einfach die Werte primitiver Parameter bearbeiten. Klicken Sie neben der Befehlseingabe auf das Symbol 
, um den Editor zu öffnen.
Nachdem Sie den Befehlsnamen eingegeben haben, werden die entsprechenden Parameter im Editor automatisch angezeigt. Sie müssen nicht nach der Dokumentation suchen, um zu wissen, welche Parameter zu welchen Befehlen gehören. Außerdem zeigt der Editor die Parameter in einer bestimmten Reihenfolge an: die obligatorischen Parameter zuerst (in Rot) und die optionalen Parameter danach (in Blau).
Wenn Sie einem optionalen Parameter einen Wert hinzufügen möchten, bewegen Sie den Mauszeiger auf den Namen und klicken Sie auf die Schaltfläche +. Wenn Sie den Parameter auf nicht definiert zurücksetzen möchten, klicken Sie auf die Schaltfläche Auf Standardwert zurücksetzen.
Enum- und boolesche Parameter
Beim Bearbeiten von enum- oder booleschen Parametern sehen Sie ein Drop-down-Menü mit einer Auswahl potenzieller Werte (für Enums) oder die direkte Option „true“ oder „false“ für boolesche Werte. Durch diese Funktion wird die Wahrscheinlichkeit verringert, dass für enum-Parameter falsche Werte eingegeben werden, und die Genauigkeit und Einfachheit bleibt erhalten.
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 +.
Um Array-Elemente einzeln zu löschen, klicken Sie auf die bin-Schaltfläche neben den Elementen. Mit der Block-Schaltfläche können Sie auch alle Parameter aus dem Array löschen. In diesem Fall wird der Arrayparameter auf [] zurückgesetzt.
Objektparameter
Wenn Sie einen Befehl eingeben, der Objektparameter akzeptiert, werden die Schlüssel dieses Objekts im Editor aufgelistet. Sie können dann ihre Werte direkt bearbeiten. Das funktioniert für alle Arten von verschachtelten Parametern.
Informationen zum Befehl und zu den Parametern im Editor
Waren Sie sich jemals über den Zweck eines Parameters oder Befehls unsicher? Wenn Sie jetzt den Mauszeiger auf einen Befehl oder Parameter bewegen, wird eine beschreibende Kurzinfo mit einem Link zur Online-Dokumentation eingeblendet.
Warnung vor dem Senden falscher Parameter
Wenn Sie bisher nicht gewusst haben, ob der Wert eines Parameters vom richtigen Typ ist, und mit dem Lesen der Fehlerantwort warten mussten, ist dieser neue Editor genau das Richtige für Sie. Wenn der von Ihnen eingegebene Wert nicht vom Parameter übernommen werden kann, werden Fehler in Echtzeit angezeigt.
Befehl noch einmal senden
Wenn Sie einen Parameter des gerade gesendeten Befehls anpassen müssen, 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 im Datenraster und wählen Sie im Drop-down-Menü Bearbeiten und noch einmal senden aus. Dadurch wird der CDP-Editor automatisch wieder geöffnet und mit dem von Ihnen ausgewählten Befehl vorausgefüllt.
Befehl in das JSON-Format kopieren
Wenn Sie den CDP-Befehl im JSON-Format in die Zwischenablage kopieren möchten, klicken Sie ganz links in der Symbolleiste auf das 
-Symbol zum Kopieren. Wenn Sie einen Befehl direkt in die Eingabeleiste eingeben, wird dieser nahtlos im Editor ausgefüllt und umgekehrt.
Fazit
Das Ziel des DevTools-Teams bei der Entwicklung dieses neuen CDP-Editors war es, die Eingabe von CDP-Befehlen zu vereinfachen. Der neue Editor kann auch verwendet werden, um Parameter zusammen mit der Dokumentation anzuzeigen und Ihnen eine einfachere Möglichkeit zu bieten, Ihre CDP-Befehle zu senden.
Vorschaukanäle herunterladen
Sie können Chrome Canary, Dev oder Beta als Standardbrowser für die Entwicklung verwenden. Über diese Vorschaukanäle erhältst du Zugriff auf die neuesten Entwicklertools-Funktionen, kannst neue Webplattform-APIs testen und Probleme auf deiner Website erkennen, bevor deine Nutzer es tun.
Chrome-Entwicklertools-Team kontaktieren
Verwende die folgenden Optionen, um die neuen Funktionen und Änderungen im Beitrag oder andere Themen im Zusammenhang mit den Entwicklertools zu besprechen.
- Sende uns über crbug.com Vorschläge oder Feedback.
- Wenn du ein Problem mit den Entwicklertools melden möchtest, klicke in den Entwicklertools auf Weitere Optionen
> Hilfe > Probleme mit den Entwicklertools melden. - Senden Sie einen Tweet an @ChromeDevTools.
- Hinterlasse Kommentare zu den Neuheiten in den Entwicklertools YouTube-Videos oder YouTube-Videos in den Entwicklertools-Tipps.