你不知道的Chrome DevTools（4）：推薦幾款DevTools插件

Web前端開發過程當中必然會用到Chrome瀏覽器自帶的開發者工具Chrome DevTools，使用它做爲Web前端開發性能調試的必備工具。就連隔壁的產品小哥都知道打開F12改一下頁面元素的標籤代碼就能看到頁面效果，這年頭誰不會用Chrome開發者工具呀。

可是Chrome能作的遠不止你日常用的那麼簡單，這一個小小的開發工具集成了不少高級的功能你未必知道。我打算把一些Chrome DevTools上使用的高級技巧寫成《你不知道的Chrome DevTools》這一系列的博文，但願你們一塊兒學習學習。

---

關於DevTools插件

應用於Chrome開發者工具的插件不一樣於普通的Chrome應用或者插件，它是給你的Chrome DevTools擴展更多的功能，方便你查看和調試web程序。它的安裝方法跟Chrome應用的安裝方法是同樣的，能夠經過Chrome應用商店或者直接crx安裝文件來安裝。

下面推薦幾款DevTools插件，有些是博主親自試用過的，但願對你們的開發調試有幫助。

jQuery Audit

安裝地址：Chrome應用商店連接
jQuery Audit是讓你能夠在DevTools查看頁面節點的jQuery屬性和數據，方便你調試使用jQuery庫的web應用。你能夠在上面看到你選中的頁面元素的jQuery的events、data等屬性。例如，不少人都喜歡用$.data()來讓jQuery節點對象緩存一些數據，經過jQuery Audit你能夠很方便地看到你緩存的數據。

jQuery Audit會自動在Elements面板的最前面加上window和document對象，這對你調試全局的對象頗有幫助。例如，出於對性能的考慮，當你想查看綁定在window上綁定了哪些事件的時候，jQuery Audit能夠幫你找到。

其餘詳細的用法能夠查看官方文檔。

JS Runtime Inspector

安裝地址：Chrome應用商店連接
JS Runtime Inspector讓你能夠在DevTools上直接經過關鍵詞來搜索頁面上JavaScript對象。當你想知道此時你的程序中某個JavaScript對象的屬性和數據，然而你並不知道它所在哪一個做用域，只知道對象名稱，於是你不能在控制檯用window.xxxObj的方式來訪問這個對象，因此此時你能夠藉助JS Runtime Inspector來查找這個對象了。

如圖所示，能夠經過對象名稱和值來匹配查找，點擊搜索後會在控制檯輸出查找到的結果。

Devtools redirect

安裝地址：Chrome應用商店連接
Devtools redirect能夠幫你給頁面上的網絡鏈接重定位。事實上網絡請求重定位的功能，能夠用fiddler或者ngix輕鬆實現，但Devtools redirect可讓你直接在瀏覽器上配置這些重定位。

jQuery Debugger

安裝地址：Chrome應用商店連接
jQuery Debugger顧名思義就是幫你debug jQuery啦:-) 它主要有兩大功能：
1. 經過選擇器字符串來查找頁面上的某個元素，等同於你在代碼裏寫$('ul>li')這樣的方式。

2. 查看頁面某個元素的jQuery對象屬性。這有點相似前面說過的jQuery Audit插件。

Grunt DevTools

安裝地址：Chrome應用商店連接
一個能夠在DevTools快速運行和查看Grunt任務的插件。有了它，你就不用常常地在瀏覽器工具、terminal和編輯器上來回切換窗口了。

詳細描述能夠查看官方文檔。

CoffeeScript Console

安裝地址：Chrome應用商店連接
有了它，你能夠在DevTools上直接執行CoffeeScript和JavaScript之間的代碼轉換。

Angular Batarang

安裝地址：Chrome應用商店連接
這個不用解釋，開發和調試Angular.js應用的神器。

相似的針對不一樣js框架的調試工具還有：Backbone DevTools 、 KnockoutJS Context

DevTools Theme

最後介紹的不是DevTools的插件，而是主題。你們或許有疑問：這個由什麼用呢？嗯，沒錯，就是裝B用的。當別人看着你在調試網頁的時候，打開的Chrome開發工具居然是如此高大上。。。
ZeroDarkMatrix主題：Chrome應用商店連接

另外還有：
Dracula主題：Chrome應用商店連接
Flatland主題：Chrome應用商店連接
安裝這些主題的方法能夠查看ZeroDarkMatrix的說明。

總結

好的，此次的DevTools插件就推薦了這幾個。總的來講，Chrome瀏覽器真的很強大，DevTools工具爲咱們的開發調試工做帶來不少方便。若是你們對於如何開發DevTools插件有想法的話，能夠去Chrome DevTools的官方文檔看看「如何開發DevTools插件」https://developer.chrome.com/extensions/devtools。

參考

http://addyosmani.com/blog/devtools-extensions-for-webapp-developers/
https://developer.chrome.com/extensions/devtools