在底層，Chrome 開發(fā)者工具是用 HTML，JavaScript 和 CSS 寫的 Web 應(yīng)用程序。在 Javascript 運(yùn)行時(shí)，它提供一個(gè)特殊的綁定，這允許它與 chrome 網(wǎng)頁(yè)進(jìn)行交互并且容許裝載它們。交互協(xié)議包括被發(fā)送到頁(yè)面的命令，和該頁(yè)面生成的事件。盡管 Chrome 開發(fā)者工具是該協(xié)議的主要客戶，其中包括遠(yuǎn)程調(diào)試（remote debugging，但有很多辦法可以讓第三方能夠使用它，并進(jìn)行瀏覽器頁(yè)面準(zhǔn)確裝載。我們將它描述在下面：

定義協(xié)議（Protocol）

交互協(xié)議包括發(fā)送到頁(yè)面到 JSON 數(shù)據(jù)格式的命令和頁(yè)面生成的事件。我們?cè)?Bink("upstream") 中定義這個(gè)協(xié)議，這樣，基于 Blink 的瀏覽器都能支持它。

穩(wěn)定版本（Stable）

調(diào)試協(xié)議1.1版（Debugger protocol version 1.1）是目前協(xié)議發(fā)布版本中最穩(wěn)定的版本

對(duì)于谷歌 Chrome 31，我們致力于支持 V1.1 版本。該協(xié)議的所有后續(xù)1.* 版本將是 1.1 向后兼容。我們的協(xié)議向后兼容性的規(guī)范是：

• 沒有命令或事件從協(xié)議中刪除。
• 無(wú)需參數(shù)被添加到命令。
• 無(wú)需參數(shù)從命令響應(yīng)或事件中刪除。

以前的版本：Protocol v1.0 針對(duì) Chrome 18 發(fā)布和支持的。Protocol v0.1 Chrome 16 發(fā)布和支持的。

Alpha

tip-of-tree protocol 是易變的的，可能在任何時(shí)候都會(huì)中斷。然而，它有著協(xié)議的全部功能，穩(wěn)定的發(fā)布版本是他的一個(gè)子集。它沒有支持保證它引入的功能的向后兼容性。你可以自己使用它與 Google Canary 建立連接。

tip-of-tree 協(xié)議是在調(diào)試協(xié)議視圖中 debugger protocol viewer 更具有可讀性。

監(jiān)測(cè)協(xié)議通信（Sniffing the protocol）

你可以檢查 Chrome DevTools 如何使用該協(xié)議。探索新功能時(shí)，這是特別方便。首先，在調(diào)試端口開啟狀態(tài)運(yùn)行 Chrome 瀏覽器：

/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --remote-debugging-port=9222 http://localhost:9222 http://chromium.org

然后，選擇在視察頁(yè)面( Inspectable Pages )列表中的選取 Chromium Projects 子項(xiàng)目。既然 DevTools 開啟，處于全屏狀態(tài)，打開 DevTools 來(lái)對(duì)其進(jìn)行監(jiān)測(cè)。 CMD-R 在新的檢測(cè)器中，作第一次重啟?，F(xiàn)在前往 Network 面板，通過(guò) WebSocket 的過(guò)濾器，選擇連接，然后單擊框架選項(xiàng)卡?，F(xiàn)在你可以很容易地看到 WebSocket 活動(dòng)的框架，是你使用的 DevTools 的第一個(gè)實(shí)例。

調(diào)試過(guò)線（Debugging over the wire）

開發(fā)者工具前段可以連接到遠(yuǎn)程運(yùn)行的 Chrome 實(shí)例進(jìn)行調(diào)試。為了讓此方案起作用，你應(yīng)該使用遠(yuǎn)程調(diào)試端口命令行切換來(lái)啟動(dòng)你主機(jī)的 Chrome 實(shí)例：

chrome.exe --remote-debugging-port=9222

然后，你就可以開始一個(gè)客戶端 Chrome 實(shí)例，使用單獨(dú)的用戶配置文件：

chrome.exe --user-data-dir=<some directory>

現(xiàn)在，你可以從客戶端導(dǎo)向指定的端口，獲取任何調(diào)試的選項(xiàng)卡：http://localhost:9222

你會(huì)發(fā)現(xiàn)開發(fā)者工具交互界面與內(nèi)嵌式的是相同的，這是為什么：

• 當(dāng)你從客戶端瀏覽器導(dǎo)向到遠(yuǎn)程的 Chrome 端口，開發(fā)者工具前端都是被主機(jī) Chrome 服務(wù)著的，就如同 Web 服務(wù)器服務(wù) Web 應(yīng)用程序。
• 它通過(guò) HTTP 通信獲取 HTML，JavaScript 和 CSS 文件
• 一旦加載，開發(fā)者工具建立一個(gè) Web Socket 連接至主機(jī)，并開始交換 JSON 數(shù)據(jù)。

在這種情況下，你可以用你自己的實(shí)現(xiàn)替代開發(fā)者工具前端。與導(dǎo)向在 http://localhost:9222 端口的 HTML 頁(yè)面不同，你的應(yīng)用程序可以發(fā)現(xiàn)可用的頁(yè)面通過(guò)請(qǐng)求：

http://localhost:9222/json

并得到一個(gè) JSON 對(duì)象和關(guān)于有著 WebSocket 地址的可檢測(cè)網(wǎng)頁(yè)的信息，你可以把他們裝載到頁(yè)面中。

調(diào)試瀏覽器遠(yuǎn)程實(shí)例或附著到嵌入式設(shè)備時(shí)，遠(yuǎn)程調(diào)試是特別有用的。Blink 端口業(yè)主負(fù)責(zé)暴露調(diào)試連接給外部用戶。

調(diào)試協(xié)議客戶端

許多應(yīng)用程序和庫(kù)已經(jīng)使用該協(xié)議。一些用來(lái)收集性能數(shù)據(jù)，其他一些用來(lái)在另一個(gè)編輯器中進(jìn)行斷點(diǎn)調(diào)試。Node.js 和 Python 中有包含著原始協(xié)議的庫(kù)。

許多客戶端展示在這里：Showcased Debugging Protocol Clients。

使用調(diào)試器擴(kuò)展 API

為了允許第三方用此協(xié)議進(jìn)行交互，我們介紹了 chrome.debugger 擴(kuò)展 API，來(lái)暴露這個(gè) JSON 消息傳輸接口。其結(jié)果是，你不僅可以獲取遠(yuǎn)程運(yùn)行的 Chrome 實(shí)例，而且可以用自己的插件它裝載它。

Chrome 調(diào)試器擴(kuò)展 API 在命令域提供了一個(gè)高等級(jí)的 API，name 和 body 在 SendCommand 調(diào)用中顯式設(shè)置。這個(gè)API 隱藏了請(qǐng)求 ID ，應(yīng)答處理其響應(yīng)，因此它允許 SendCommand 在回調(diào)函數(shù)中提交結(jié)果報(bào)告。也可以和其他擴(kuò)展 API 結(jié)合著使用。

如果你正在開發(fā)一個(gè)基于 Web 的 IDE ，你應(yīng)該實(shí)現(xiàn)一個(gè)擴(kuò)展功能，暴露你的網(wǎng)頁(yè)調(diào)試功能，你的 IDE 就能夠打開目標(biāo)應(yīng)用的頁(yè)面，設(shè)置斷點(diǎn)，在控制臺(tái)計(jì)算表達(dá)式，實(shí)時(shí)編輯 JavaScript 和 CSS ，顯示活動(dòng) DOM ，網(wǎng)絡(luò)交互和任何其他任何開發(fā)者工具正在提交的方面。

開放嵌入式開發(fā)工具將終止 (terminate) 遠(yuǎn)程連接，從而分離擴(kuò)展。

并發(fā)協(xié)議客戶

我們目前不支持多個(gè)客戶端同時(shí)連接到協(xié)議。這包括打開工具時(shí)而另一個(gè)客戶端處于連接狀態(tài)。在 bug 跟蹤系統(tǒng)中，crbug.com/129539 有如下條件；你可以為電子郵件更新標(biāo)記。

當(dāng)處于 disconnnection 狀態(tài)下，即將下線的客戶將獲得一個(gè) detached 事件。例如： {"method":"Inspector.detached","params": {"reason":"replaced_with_devtools"}} 斷開連接后，一些應(yīng)用程序選擇暫停他們的狀態(tài)，并提供一個(gè)重新連接按鈕。