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

整合 DevTools

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

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

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

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

DevTools Chrome 插件

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

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

• 如果你之前沒(méi)有開(kāi)發(fā)過(guò) Chrome 插件，見(jiàn) Chrome 插件（擴(kuò)展程序）全覽
• 具體創(chuàng)建一個(gè) Chrome DevTools 插件，見(jiàn) 擴(kuò)展DevTools

一系列 DevTools 插件的示例，見(jiàn) DevTools 插件實(shí)例，這些實(shí)例包含了許多可供參考的開(kāi)源插件。

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

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

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

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

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