DevTools 插件實(shí)例

有許多可用的或正在開發(fā)的 DevTools 插件。本節(jié)展示一小部分。這里列出的所有插件都可以從 Chrome 網(wǎng)上應(yīng)用店安裝。而且他們都是開源的，所以你可以把它們當(dāng)作開發(fā)自己插件的靈感來源。

AngularJS Batarang

AngularJS Batarang 是 AngularJS 框架的一把瑞士軍刀，它提供面板模型檢測，分析依存關(guān)系，插裝和性能，以及其他功能。

更多信息：

• 從 Chrome Web Stroe 安裝
• Github 上的源代碼
• Github 里的 REDAME 文件提供了很好的總概

CoffeeScript Console

如果你使用 CoffeeScript，你可能對(duì) CoffeeScript Console 有興趣。正如其名稱所暗示的，這個(gè)擴(kuò)展提供了一個(gè)控制臺(tái)窗口，可讓你在當(dāng)前窗口的上下文中運(yùn)行的 CoffeeScript 代碼。 

更多信息：

• 從 Chrome Web Store 安裝
• Github 上的源代碼
• Jonathan Snook 的截圖

Ember Inspector

Ember Inspector 有助于調(diào)試 Ember.js 應(yīng)用，便于檢查控制器，見解模型及其屬性，層等。

更多信息：

• 從 Chrome Web Stroe 安裝
• Github 上的源代碼
• 更多信息，見截屏

Grunt DevTools

Grunt DevTools 提供了一個(gè)圖形用戶界面來觸發(fā) Grunt 任務(wù)：運(yùn)行測試，生成步驟，或啟動(dòng)了一個(gè)測試服務(wù)器，而無需離開 DevTools。 http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_grunt.jpg" alt="grunt.jpg" /> 更多信息：

• 從 Chrome Web Stroe 安裝
• Github 上的源代碼

KnockoutJS Context Debugger

這個(gè)擴(kuò)展可以幫助你調(diào)試KnockoutJS的應(yīng)用程序，通過剔除下文數(shù)據(jù)，所選 DOM 節(jié)點(diǎn)顯示在元素面板的側(cè)邊欄。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_knockout.jpg" alt="knockout.jpg" />

更多信息：

• 從 Chrome Web Stroe 安裝
• Github 上的源代碼

Rails Panel

Rails Panel 增加了一個(gè)新的選項(xiàng)卡,顯示有關(guān)請(qǐng)求到 Rails 的后端信息。該面板提供了深入了解視圖渲染，DB，總請(qǐng)求次數(shù)等。

http://wiki.jikexueyuan.com/project/chrome-devtools/images/ref_rails.jpg" alt="rails.jpg" />

更多信息：

• 從 Chrome Web Stroe 安裝
• Github 上的源代碼
• 關(guān)于 設(shè)置和使用 Rails Panel 的信息見 README 文件