Dale St. Marthe

Use theProtocol monitor to view all CDP requests and responses made by DevTools and send CDP commands directly.

Overview

Chrome DevTools uses theChrome DevTools Protocol (CDP) to instrument, inspect, debug and profile Chrome browsers. Developers can use theProtocol monitor to work with the CDP programmatically.

TheProtocol monitor lets you do the following:

• Record CDP requests and responses
• Inspect CDP messages
• Save CDP messages
• Send CDP commands

Open the Protocol monitor

To open theProtocol monitor, follow these steps:

1. Make sure the experiment is enabled. Check theProtocol Monitor checkbox underSettingssettings >Experiments.

2. Open theCommand menu by pressing:

   • macOS:Command+Shift+P
   • Windows, Linux, ChromeOS:Control+Shift+P

3. Start typingProtocol monitor, selectShow Protocol monitor, and pressEnter. DevTools displays theProtocol monitor panel at the bottom of your DevTools window.

Alternatively, in the top right corner, selectmore_vertMore options >More tools >Protocol monitor.

Record CDP requests and responses

When you open theProtocol monitor, it automatically starts recording CDP messages from the current page. TheProtocol monitor continues recording even if you refresh the page or close Devtools.

To stop or start recording, click the record button on the left of the action bar at the top of the panel.

Inspect CDP messages

As theProtocol monitor records, CDP messages are logged in a table on the left side of the panel.

Click aMethod,Request, orResponse cell to open a detailed view of itsRequest orResponse data on the right side of the panel.

Switch between theRequest orResponse data by clicking on the respective header tab.

Right-clicking a value in theMethod column gives you context based options.

Clear and download CDP messages

To clear all recorded CDP messages, click the clearblock button in the action bar.

To download the recorded messages as a JSON file, click downloaddownload.

Send raw CDP commands

There are two main ways to send a CDP command through theProtocol monitor:

• If the command does not require any parameters, type the command into the input field at the bottom of theProtocol Monitor, then pressEnter, for examplePage.captureScreenshot.

  If the command requires parameters, provide them in JSON format, for example{"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}.

  The drop-down to the right of the input field specifies the target.

• You can also use theCDP editor to edit and issue commands:

  1. Open the command editor by clicking theleft_panel_openShow CDP command editor button next to the command input field.
  2. Select a target from the drop-down list, and start typing a CDP command next to the command prompt. Autocomplete provides you with relevant options. Select the command you intend to use.
  3. After you enter a CDP command, the editor creates a structured form of parameters based on the protocol definitions. Fill out these parameters to send them with your command.
  4. Send the command by clicking thesendSend command button or pressingCtrl+Enter.

You can also edit and resend commands from the table. Right-click an item in the table and select Edit and resend from the drop-down menu. This will automatically reopen the CDP editor and prefill it with the command you selected.

For more information about the CDP editor, seeCraft your Chrome Devtools Protocol (CDP) commands efficiently with the new command editor.