Chrome開發(fā)工具 整合 DevTools 和 Chrome

整合 DevTools

Chrome DevTools 是可擴展的。因此，如果 DevTools 缺少你需要一個功能，你可以找到一個現(xiàn)有的插件，或者自己寫一個擴展程序?；蛘吣阋部梢詫㈤_發(fā)者工具功能集成到你的應(yīng)用程序中。

有兩種基本方式使用 DevTools 建立一個自定義的解決方案：

• DevTools Extension（開發(fā)者工具擴展程序）。一個 Chrome 插件，可插入 DevTools 來添加他的功能并擴展其 UI。
• 調(diào)試協(xié)議客戶端。一個第三方應(yīng)用，使用 Chrome 的遠程調(diào)試協(xié)議來插入到低版本調(diào)試支持的 Chrome 中.

以下各節(jié)討論這兩種方法。

DevTools Chrome 插件

DevTools UI 是一個嵌入在 Chrome 瀏覽器中的網(wǎng)絡(luò)應(yīng)用。DevTools 插件（擴展程序）使用 Chrome 擴展系統(tǒng)來添加功能到 DevTools 中。一個 DevTools 插件可以添加新的面板到 DevTools 中，可以添加新的窗格到 Elements 和 Sources 面板側(cè)邊欄，可以檢查資源和網(wǎng)絡(luò)事件，同樣也能在被檢查的瀏覽器選項卡中計算 JavaScript 表達式。

如果你想開發(fā)一個 DevTools 插件：

• 如果你之前沒有開發(fā)過 Chrome 插件，見 Chrome 插件（擴展程序）全覽
• 具體創(chuàng)建一個 Chrome DevTools 插件，見 擴展DevTools

一系列 DevTools 插件的示例，見 DevTools 插件實例，這些實例包含了許多可供參考的開源插件。

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

許多第三方應(yīng)用，例如 IDE（集成開發(fā)環(huán)境），編輯器，持續(xù)集成工具和測試框架，可以用 Chrome 調(diào)試器來整合，以此來調(diào)試代碼，實時預(yù)覽代碼，改變 CSS 樣式，以及控制瀏覽器?？蛻魴C使用 Chrome 調(diào)試協(xié)議來與另一個可以跑在同樣系統(tǒng)或者遠程系統(tǒng)的 Chrome 實例進行通信。

注意： 目前，Chrome 調(diào)試協(xié)議只支持每個網(wǎng)頁中只有一個客戶端。所以，你可以使用 DevTools 來檢查一個頁面，或者使用第三方客戶機，但不要同時使用。

有兩種方式整合調(diào)試協(xié)議：

• 運行在 Chrome 上的應(yīng)用程序（例如基于 web 的 IDE）可以利用調(diào)試器模塊 chrome.debugger 創(chuàng)建一個 Chrome 擴展程序。 這個模塊讓插件直接與調(diào)試器通信，避開 Devtools UI。更多信息見 使用調(diào)試器擴展程序API
• 其他應(yīng)用程序可以使用無線協(xié)議直接接入調(diào)試器。這個協(xié)議包括通過一個 WebSocket (網(wǎng)絡(luò)套接字）連接交換 JSON 數(shù)據(jù)格式的信息。