Craft Chrome Devtools Protocol (CDP) commands with the new command editor

Summary

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 browser's state, control its behavior, and collect debugging information. You can also build Chrome extensions that use CDP. For example, this is a CDP command that inserts a new rule with the given ruleText in a stylesheet with given styleSheetId, at the position 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 the CDP requests and responses DevTools sends and receives. Previously it was difficult to craft the command by hand, especially a command with many parameters. Not only did you need to be mindful of opening and closing brackets and quotation marks, you also had to remember the command's parameters which, in turn, makes you look up the CDP documentation. To solve this problem, DevTools introduced a new CDP editor whose main goals are to: Auto-complete commands. Simplify your CDP command input by providing you with the list of available commands via an auto completion feature. Auto-populate command parameters. Reduce the need to check the CDP documentation for the list of available command parameters. Simplify the typing of parameter. You just have to fill in the values of the parameters you want to send. Edit and resend. Improve prototyping speed by making it quicker to modify a CDP command. Now, let's have a look at what this new editor offers, and how you can make use of it! Autocompletion feature An auto completion feature now powers the command input bar. It helps you write the names of the CDP commands you have access to. This can be very handy for commands that don't accept parameters. String and number parameters With this new editor, you can now easily edit the...