Craft your Chrome Devtools Protocol (CDP) commands efficiently with the new command editor  |  Blog  |  Chrome for Developers

by

Hadrian Joubert

The Chrome DevTools Protocol (CDP) is a remote debugging protocol (API) that lets developers communicate with a running Chrome browser. Chrome DevTools uses CDP to help you inspect the state of the browser, control its behavior, and collect debugging information. You can also create Chrome extensions that use CDP.

For example, this is a cdp command that inserts a new rule with the given ruleText in the given stylesheet styleSheetIdon the post specified by location,

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

The Protocol Monitor drawer tab provides you with a way to send CDP requests and view all CDP requests and responses sent and received by DevTools.

Command line bar at the bottom of Protocol Monitor.

At first it was difficult to prepare commands by hand, especially commands with many parameters. Not only do you have to take care of opening and closing brackets and quotation marks, but you also have to remember the parameters of the command, which, in turn, will help you view the CDP document.

To solve this problem, DevTools introduced a new CDP editor whose main goals are:

  • autocomplete ordersSimplify your CDP command input by providing you with a list of commands available through the auto completion feature,
  • Auto-populate command parametersReduce the need to check the CDP documentation for a list of available command parameters,
  • Simplify parameter typingYou just need to fill in the values ​​of the parameters you want to send,
  • edit and resubmitImprove prototyping speed by rapidly modifying CDP commands,

Now, let’s see what this new editor offers, and how you can use it!

autocompletion feature

Autocomplete drop-down menu.

An autocompletion feature now powers the command input bar. This helps you write down the names of the CDP commands you have access to. This can be very useful for commands that do not accept parameters.

string and number parameters

With this new editor, you can now easily edit the values ​​of primitive parameters. To open the editor, click Open the left panel. Icon next to command input.

Once you enter the command name, the editor automatically shows you the corresponding parameters. You don’t need to look at the documentation to know which parameters go with which command. Furthermore, the editor displays the parameters in a given order: mandatory ones first (in red) followed by optional ones (in blue).

To add a value to an optional parameter, hover over its name and click + button. To reset the parameter to undefined, click reset to default value button.

+ and 'Reset to default values' button.

enum and boolean parameters

When editing enum or boolean parameters, you will see a drop-down menu that offers a selection of possible values ​​(for enums) or a straightforward true or false option for booleans. This feature reduces the possibility of typing wrong values ​​for enum parameters and maintains accuracy and simplicity.

Boolean and enum drop-down menus.

array parameters

For array parameters, you can manually add values ​​to the array. Hover over the row of parameters and click + button.

+ button that adds an array item.

To remove array items one by one, click the Bin button next to the item. You can also clear all parameters from the array with the Block button. In this case, the array parameters are reset [],

'Delete parameters' and 'Reset to default' buttons.

object parameter

When you enter a command that accepts object parameters, the editor lists the keys of this object and you can edit their values ​​directly. This works for all types of nested parameters.

Nested parameters.

Find out what commands and parameters do in the editor

Have you ever been unsure about the purpose of a parameter or command? Now, you can hover over a command or parameter, and a descriptive tooltip will pop up, complete with a link to the online documentation.

A descriptive tooltip appears when you hover over a command.

Be careful before sending wrong parameters

Previously, if you didn’t know whether a parameter’s value was of the correct type and you had to wait to read the error response, this new editor is for you. It shows you errors in real time if the parameter does not accept the value you entered.

An error icon next to a parameter with an incorrect value.

Resend an order

If you need to make changes to any parameter of the order you just sent, you don’t need to type it again. To edit and resend the command, right-click an item in the DataGrid and select edit and resubmit From the drop-down menu. This will automatically reopen the CDP editor and fill it with the commands you selected.

Drop-down menu of a command in a DataGrid with the option 'Edit and Resend'.

Copy the command in JSON format

To copy the CDP command in JSON format to your clipboard, click Copy. Copy icon on the leftmost side of the toolbar. Additionally, keep in mind that if you input a command directly into the input bar, it will seamlessly populate the editor, and vice versa.

conclusion

The DevTools team’s goal behind the design of this new CDP editor was to simplify the typing of CDP commands. The new editor can be used to view documentation as well as parameters and provide you with an easy way to send your CDP commands.

Download Preview Channel

Consider using Chrome Canary, Dev, or Beta as your default development browser. These preview channels give you access to the latest DevTools features, let you test cutting-edge web platform APIs, and help you find issues with your site before your users do!

Use the following options to discuss new features, updates, or anything related to DevTools.



Leave a Comment