使用新的指令編輯器有效率地建立 Chrome 開發人員工具通訊協定 (CDP) 指令

Hadrien Jaubert
Hadrien Jaubert
GitHub 首頁

Chrome 開發人員工具通訊協定 (CDP) 是一種遠端偵錯通訊協定 (API)，可讓開發人員與正在執行的 Chrome 瀏覽器通訊。Chrome 開發人員工具會使用 CDP，協助您檢查瀏覽器的狀態、控管瀏覽器的行為，以及收集偵錯資訊。您也可以建構使用 CDP 的 Chrome 擴充功能。

舉例來說，這是 CDP 指令，可在指定 styleSheetId 的樣式表，於 location 指定的位置插入含有指定 ruleText 的新規則。

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

「通訊協定監控器」抽屜分頁標籤可讓您傳送 CDP 要求，並查看開發人員工具傳送及接收的所有 CDP 要求和回應。

通訊協定監控器底部的指令列。

先前手動編寫指令並不容易，尤其是含有許多參數的指令。您不僅要留意開頭和結尾的方括號和引號，還必須記住指令的參數，這會導致您查詢 CDP 說明文件。

為解決這個問題，開發人員工具推出了新的 CDP 編輯器，主要目標如下：

  • 自動完成指令：透過自動完成功能提供可用指令清單，簡化 CDP 指令輸入程序。
  • 自動填入指令參數。減少查看 CDP 說明文件，瞭解可用指令參數清單的需求。
  • 簡化參數的輸入作業。您只需要填寫要傳送的參數值。
  • 編輯並重新傳送。加快修改 CDP 指令的速度，提升原型設計效率。

現在，我們來看看這個新編輯器提供哪些功能，以及如何善用這些功能！

自動完成功能

自動完成下拉式選單。

指令輸入列現在提供自動完成功能。有助於編寫您有權存取的 CDP 指令名稱。對於不接受參數的指令，這項功能非常實用。

字串和數字參數

有了這個新編輯器，您現在可以輕鬆編輯基本參數的值。如要開啟編輯器，請按一下指令輸入內容旁的 開啟左側面板。 圖示。

輸入指令名稱後，編輯器會自動顯示對應的參數。您不必查閱說明文件，就能知道哪些參數適用於哪些指令。此外，編輯器會依特定順序顯示參數：先顯示必要參數 (紅色)，再顯示選用參數 (藍色)。

如要為選用參數新增值，請將滑鼠游標懸停在參數名稱上，然後按一下 + 按鈕。如要將參數重設為未定義，請按一下「重設為預設值」按鈕。

「+」和「重設為預設值」按鈕。

列舉和布林參數

編輯列舉或布林參數時，系統會顯示下拉式選單，提供一系列可能的值 (適用於列舉) 或簡單的 true 或 false 選項 (適用於布林值)。這項功能可減少輸入列舉參數錯誤值的可能性，並維持準確度和簡潔性。

布林值和列舉下拉式選單。

陣列參數

如果是陣列參數，您可以手動在陣列中新增值。將滑鼠游標懸停在參數列上，然後按一下 + 按鈕。

新增陣列項目的「+」按鈕。

如要逐一刪除陣列項目，請按一下項目旁邊的垃圾桶按鈕。您也可以使用區塊按鈕，清除陣列中的所有參數。在此情況下，陣列參數會重設為 []。

「刪除參數」和「重設為預設值」按鈕。

物件參數

輸入接受物件參數的指令時，編輯器會列出這個物件的鍵，您可以直接編輯這些鍵的值。這項做法適用於所有類型的巢狀參數。

巢狀參數。

在編輯器中瞭解指令和參數的用途

您是否曾不確定參數或指令的用途？現在只要將游標懸停在指令或參數上，就會彈出說明工具提示，並附上線上說明文件的連結。

將滑鼠游標懸停在指令上時顯示的說明工具提示。

傳送錯誤參數前收到警告

過去，如果您不確定參數值是否為正確類型，必須等待讀取錯誤回應，那麼這個新版編輯器就非常適合您。如果參數無法接受您輸入的值，系統會即時顯示錯誤。

參數值不正確，旁邊會顯示錯誤圖示。

重新傳送指令

如果需要調整剛傳送的指令參數，不必重新輸入，如要編輯並重新傳送指令，請在資料格中按一下滑鼠右鍵，然後從下拉式選單中選取「編輯並重新傳送」。系統會自動重新開啟 CDP 編輯器，並預先填入您選取的指令。

資料格中指令的下拉式選單，其中包含「編輯並重新傳送」選項。

將指令複製為 JSON 格式

如要將 JSON 格式的 CDP 指令複製到剪貼簿，請按一下工具列最左端的 。 複製圖示。此外，請注意，如果您直接在輸入列中輸入指令，系統會自動填入編輯器，反之亦然。

結論

開發人員工具團隊設計這個新版 CDP 編輯器的目標，是簡化 CDP 指令的輸入作業。您也可以使用新版編輯器查看參數和說明文件，更輕鬆地傳送 CDP 指令。

下載預覽版頻道

建議使用 Chrome Canary、開發人員版或 Beta 版做為預設開發瀏覽器。透過這些搶先體驗管道，您可以存取最新的開發人員工具功能、測試最先進的網頁平台 API，並在使用者發現問題前找出網站上的問題！

與 Chrome 開發人員工具團隊聯絡

如要討論開發人員工具的新功能、更新或其他相關事項，請使用下列選項。