Chrome DevTools Protocol (CDP) is een Remote Debugging Protocol (API) waarmee ontwikkelaars kunnen communiceren met een actieve Chrome-browser. Chrome DevTools gebruikt CDP om u te helpen de status van de browser te inspecteren, het gedrag ervan te controleren en foutopsporingsinformatie te verzamelen. U kunt ook Chrome-extensies bouwen die CDP gebruiken.
Dit is bijvoorbeeld een CDP-opdracht die een nieuwe regel met de gegeven ruleText invoegt in een stylesheet met de opgegeven styleSheetId , op de positie die is opgegeven door location .
{
command: 'CSS.addRule',
parameters: {
styleSheetId: '2',
ruleText:'Example',
location: {
startLine: 1,
startColumn: 1,
endLine: 1,
endColumn: 1
}
}
}
Het tabblad Protocolmonitor biedt u een manier om CDP-verzoeken te verzenden en alle CDP-verzoeken en antwoorden te bekijken die DevTools verzendt en ontvangt.
Voorheen was het moeilijk om de opdracht met de hand te maken, vooral een opdracht met veel parameters. U moest niet alleen rekening houden met het openen en sluiten van haakjes en aanhalingstekens, u moest ook de parameters van de opdracht onthouden, waardoor u op zijn beurt de CDP-documentatie moet opzoeken.
Om dit probleem op te lossen heeft DevTools een nieuwe CDP-editor geïntroduceerd met als belangrijkste doelstellingen:
- Opdrachten voor automatisch aanvullen . Vereenvoudig uw CDP-opdrachtinvoer door u een lijst met beschikbare opdrachten te bieden via een functie voor automatisch aanvullen.
- Opdrachtparameters automatisch invullen . Verminder de noodzaak om de CDP-documentatie te raadplegen voor de lijst met beschikbare opdrachtparameters.
- Vereenvoudig het typen van parameter . U hoeft alleen maar de waarden in te vullen van de parameters die u wilt verzenden.
- Bewerken en opnieuw verzenden . Verbeter de snelheid van het maken van prototypes door het sneller te maken om een CDP-opdracht te wijzigen.
Laten we nu eens kijken naar wat deze nieuwe editor te bieden heeft, en hoe u er gebruik van kunt maken!
Functie voor automatisch aanvullen
Een automatische aanvullingsfunctie drijft nu de opdrachtinvoerbalk aan. Het helpt u bij het schrijven van de namen van de CDP-opdrachten waartoe u toegang hebt. Dit kan erg handig zijn voor opdrachten die geen parameters accepteren.
Tekenreeks- en nummerparameters
Met deze nieuwe editor kunt u nu eenvoudig de waarden van primitieve parameters bewerken. Om de editor te openen, klikt u op de 
pictogram naast de opdrachtinvoer.
Nadat u de opdrachtnaam hebt ingevoerd, toont de editor u automatisch de bijbehorende parameters. U hoeft geen documentatie op te zoeken om te weten welke parameters bij welke opdrachten horen. Bovendien geeft de editor de parameters in een bepaalde volgorde weer: de verplichte eerst (in rood) en daarna de optionele (in blauw).
Om een waarde aan een optionele parameter toe te voegen, beweegt u de muis over de naam ervan en klikt u op de knop + . Om de parameter terug te zetten naar ongedefinieerd, klikt u op de knop Reset naar standaardwaarde .
Enum- en Booleaanse parameters
Wanneer u enum- of booleaanse parameters bewerkt, ziet u een vervolgkeuzemenu met een selectie van potentiële waarden (voor enums) of de eenvoudige optie waar of onwaar voor booleaanse waarden. Deze functie verkleint de mogelijkheid dat u de verkeerde waarde voor enum-parameters typt en behoudt de nauwkeurigheid en eenvoud.
Arrayparameters
Voor arrayparameters kunt u handmatig waarden aan de array toevoegen. Beweeg de muis over de rij van de parameter en klik op de knop + .
Om array-items één voor één te verwijderen, klikt u op de prullenbakknop naast de items. U kunt ook alle parameters uit de array wissen met de blokkeerknop. In dit geval wordt de arrayparameter opnieuw ingesteld op [] .
Objectparameters
Wanneer u een opdracht invoert die objectparameters accepteert, geeft de editor een overzicht van de sleutels van dit object en kunt u hun waarden rechtstreeks bewerken. Dit werkt voor alle soorten geneste parameters.
Ontdek wat de opdracht en parameters doen in de editor
Bent u ooit onzeker geweest over het doel van een parameter of commando? Nu kunt u de muisaanwijzer op een opdracht of parameter plaatsen en er verschijnt een beschrijvende tooltip, compleet met een link naar de online documentatie.
Wees gewaarschuwd voordat u onjuiste parameters verzendt
Als u voorheen niet wist of de waarde van een parameter van het juiste type was en moest wachten om de foutreactie te lezen, dan is deze nieuwe editor iets voor u. Het toont u realtime fouten als de parameter de door u ingevoerde waarde niet kan accepteren.
Een opdracht opnieuw verzenden
Als u een parameter van de opdracht die u zojuist hebt verzonden, moet aanpassen, hoeft u deze niet opnieuw te typen. Om de opdracht te bewerken en opnieuw te verzenden, klikt u met de rechtermuisknop op een item in de datagrid en selecteert u Bewerken en opnieuw verzenden in het vervolgkeuzemenu. Hierdoor wordt de CDP-editor automatisch opnieuw geopend en vooraf ingevuld met de opdracht die u hebt geselecteerd.
Kopieer een opdracht naar JSON-indeling
Om de CDP-opdracht in JSON-indeling naar uw klembord te kopiëren, klikt u op de 
kopieerpictogram helemaal links op de werkbalk. Houd er bovendien rekening mee dat als u een opdracht rechtstreeks in de invoerbalk invoert, deze de editor naadloos zal vullen, en andersom.
Conclusie
Het doel van het DevTools-team achter het ontwerp van deze nieuwe CDP-editor was het vereenvoudigen van het typen van CDP-opdrachten. De nieuwe editor kan ook worden gebruikt om parameters naast de documentatie te bekijken en om u een eenvoudigere manier te bieden om uw CDP-opdrachten te verzenden.
Download de voorbeeldkanalen
Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!
Neem contact op met het Chrome DevTools-team
Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.
- Stuur ons een suggestie of feedback via crbug.com .
- Rapporteer een DevTools-probleem met behulp van de opties Meer
> Help > Rapporteer een DevTools-probleem in DevTools. - Tweet op @ChromeDevTools .
- Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .