通訊協定監控:查看及傳送 CDP 要求

Dale St. Marthe
Dale St. Marthe

使用通訊協定監控器查看 DevTools 發出的所有 CDP 要求和回應,並直接傳送 CDP 指令。

總覽

Chrome 開發人員工具使用 Chrome 開發人員工具通訊協定 (CDP),可用於檢測、檢查、偵錯及剖析 Chrome 瀏覽器。開發人員可以使用Protocol monitor,以程式輔助方式與 CDP 互動。

您可以透過通訊協定監測工具執行下列操作:

  • 記錄 CDP 要求和回應
  • 檢查 CDP 訊息
  • 儲存 CDP 訊息
  • 傳送 CDP 指令

開啟通訊協定監測工具

如要開啟通訊協定監控器,請按照下列步驟操作:

  1. 確認已啟用實驗。依序點選「設定」 >「實驗」,然後勾選「Protocol Monitor」核取方塊。

  2. 按下以下任一組合鍵,開啟指令選單

    • macOS:Command + Shift + P
    • Windows、Linux 和 ChromeOS:Control + Shift + P含有
  3. 開始輸入 Protocol monitor,選取「Show Protocol monitor」,然後按下 Enter 鍵。開發人員工具會在開發人員工具視窗底部顯示「Protocol monitor」面板。

或者,您也可以依序選取右上角的「更多選項」 >「更多工具」 >「通訊協定監控器」

記錄 CDP 要求和回應

開啟通訊協定監控器後,系統會自動開始記錄目前網頁的 CDP 訊息。即使您重新整理頁面或關閉 DevTools,Protocol monitor 仍會繼續錄製。

如要停止或開始錄影,請按一下面板頂端動作列左側的錄影按鈕。

「Protocol」監控面板中的錄製按鈕。

檢查 CDP 訊息

Protocol monitor 記錄時,CDP 訊息會記錄在資訊面板左側的表格中。

按一下「方法」、「要求」或「回應」儲存格,即可在面板右側開啟「要求」或「回應」資料的詳細檢視畫面。

在「Protocol monitor」面板中醒目顯示的方法。

按一下各自的標頭分頁標籤,切換「Request」或「Response」資料。

在「方法」欄中按一下滑鼠右鍵,即可查看相關選項。

清除及下載 CDP 訊息

如要清除所有已錄製的 CDP 訊息,請按一下動作列中的「清除」按鈕。

如要將錄音訊息下載為 JSON 檔案,請按一下「下載」

傳送原始 CDP 指令

您可以透過 通訊協定監控器傳送 CDP 指令,主要有兩種方式:

  • 如果指令不需要任何參數,請在 Protocol Monitor 底部的輸入欄位中輸入指令,然後按下 Enter 鍵 (例如 Page.captureScreenshot)。

    如果指令需要參數,請以 JSON 格式提供參數,例如 {"cmd":"Page.captureScreenshot","args":{"format": "jpeg"}}

    輸入欄位右側的下拉式選單可指定目標。

通訊協定監測工具中醒目顯示的目標下拉式選單。

  • 您也可以使用 CDP 編輯器編輯及下達指令:

    1. 按一下指令輸入欄旁的「 顯示 CDP 指令編輯器」按鈕,即可開啟指令編輯器。
    2. 從下拉式清單中選取目標,然後開始在指令提示字元旁邊輸入 CDP 指令。自動完成功能會提供相關選項。選取要使用的指令。 通訊協定監控工具中的指令輸入內容。
    3. 輸入 CDP 指令後,編輯器會根據通訊協定定義,建立參數的結構化表單。填寫這些參數,以便透過指令傳送。 參數輸入畫面,列出可填入的服務 worker 相關參數。
    4. 按一下「傳送」按鈕或按下 Ctrl + Enter 鍵,即可傳送指令。

您也可以在表格中編輯及重新傳送指令。在表格中的項目上按一下滑鼠右鍵,然後從下拉式選單中選取「編輯並重新傳送」。系統會自動重新開啟 CDP 編輯器,並使用您選取的指令預先填入。

如要進一步瞭解 CDP 編輯器,請參閱「使用新的指令編輯器,有效編寫 Chrome 開發人員工具通訊協定 (CDP) 指令」。