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

Hadrien Jaubert
Hadrien Jaubert
GitHub 首頁

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

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

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

Protocol monitor 抽屜分頁可讓您傳送 CDP 要求，並查看 DevTools 傳送及接收的所有 CDP 要求和回應。

Protocol 監控器底部的指令列列。

先前手動編寫指令相當困難，尤其是含有許多參數的指令。您不僅要留意開啟和關閉的括號和引號，還要記住指令的參數，這會讓您查看 CDP 說明文件。

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

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

接下來，我們來看看這個新編輯器提供的功能，以及如何使用這項功能！

自動完成功能

自動完成下拉式選單。

指令輸入列現在支援自動完成功能。這有助於您輸入可存取的 CDP 指令名稱。對於不接受參數的指令來說，這項功能非常實用。

字串和數字參數

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

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

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

+ 和「Reset to default value」(重設為預設值) 按鈕。

列舉和布林值參數

編輯列舉或布林參數時，您會看到下拉式選單，其中列出可選的可能值 (針對列舉)，或布林值的簡單 true 或 false 選項。這項功能可降低輸入錯誤列舉參數值的可能性，同時維持準確性和簡易性。

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

陣列參數

對於陣列參數，您可以手動將值新增至陣列。將滑鼠游標懸停在參數列上，然後點選 + 按鈕。

用來新增陣列項目的 + 按鈕。

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

「Delete parameter」和「Reset to default」按鈕。

物件參數

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

巢狀參數。

瞭解指令和參數在編輯器中的功能

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

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

在傳送錯誤參數前發出警告

過去，如果您不確定參數的值是否為正確類型，就必須等待錯誤回應，這時，這個新編輯器就會派上用場。如果參數無法接受您輸入的值，就會顯示即時錯誤。

值有誤的參數旁邊顯示錯誤圖示。

重新傳送指令

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

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

將指令複製為 JSON 格式

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

結論

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

下載預覽管道

建議您將 Chrome Canary、開發人員版或Beta 版設為預設開發人員版瀏覽器。這些預覽管道可讓您存取最新的 DevTools 功能，測試最新的網路平台 API，並在使用者發現問題前，協助您找出網站的問題！

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

請使用下列選項討論新功能、更新或任何與開發人員工具相關的內容。