Chrome開發(fā)工具 DevTools 插件實例

DevTools 插件實例

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

AngularJS Batarang

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

更多信息：

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

CoffeeScript Console

如果你使用 CoffeeScript，你可能對 CoffeeScript Console 有興趣。正如其名稱所暗示的，這個擴展提供了一個控制臺窗口，可讓你在當前窗口的上下文中運行的 CoffeeScript 代碼。

更多信息：

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

Ember Inspector

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

更多信息：

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

Grunt DevTools

Grunt DevTools 提供了一個圖形用戶界面來觸發(fā) Grunt 任務：運行測試，生成步驟，或啟動了一個測試服務器，而無需離開 DevTools。更多信息：

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

KnockoutJS Context Debugger

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

更多信息：

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

Rails Panel

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

更多信息：

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