Creëer uw Chrome Devtools Protocol (CDP)-opdrachten efficiënt met de nieuwe opdrachteditor

Hadrien Jaubert

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.

De opdrachtregelbalk onder aan Protocolmonitor.

Voorheen was het moeilijk om de opdracht met de hand te maken, vooral een opdracht met veel parameters. U moest niet alleen letten op 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

Het vervolgkeuzemenu 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 Linkerpaneel openen. 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 .

De + en 'Reset naar standaardwaarde' knoppen.

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.

De vervolgkeuzemenu's Boolean en Enum.

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 + .

De + knop die een array-item toevoegt.

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 [] .

De knoppen 'Parameter verwijderen' en 'Resetten naar standaard'.

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 typen geneste parameters.

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.

De beschrijvende tooltip die verschijnt als u de muisaanwijzer op een opdracht plaatst.

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 foutpictogram naast een parameter met een onjuiste waarde.

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.

Het vervolgkeuzemenu van een opdracht in de datagrid met de optie 'Bewerken en opnieuw verzenden'.

Kopieer een opdracht naar JSON-indeling

Om de CDP-opdracht in JSON-indeling naar uw klembord te kopiëren, klikt u op de Kopiëren. 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 om Chrome Canary , Dev of Beta te gebruiken als uw standaard ontwikkelingsbrowser. Met deze voorbeeldkanalen krijgt u toegang tot de nieuwste DevTools-functies, kunt u geavanceerde webplatform-API's testen en kunt u problemen op uw site opsporen voordat uw gebruikers dat doen!

Neem contact op met het Chrome DevTools-team

Gebruik de volgende opties om de nieuwe functies, updates of iets anders gerelateerd aan DevTools te bespreken.