對于前端開發(fā)者來說，Chrome 瀏覽器絕對是開發(fā)過程中不可缺少的利器：不僅僅是因為 Chrome 自帶的功能強大的 devtool，更是因為 Chrome 有著各種好用的前端語言調(diào)試工具以及諸如 EnjoyCSS、LiveReload 等這類能夠提高你編碼效率的強大擴展。我們就整理了十款前端開發(fā)相關(guān)的 Chrome 插件，在這里推薦給你。

1. 掘金 Chrome 插件

對于開發(fā)者來說，比開發(fā)過程更重要的，應(yīng)該要算平時對于開發(fā)資源以及技術(shù)文章一點一滴的積累了吧。那么，開發(fā)者能夠在哪里獲取需要的技術(shù)內(nèi)容呢？
過去，你可能需要在 GitHub、Dribbble 等許多網(wǎng)站之間不停地跳轉(zhuǎn)來尋找自己需要的內(nèi)容，現(xiàn)在，有了掘金 Chrome 插件，只需要一個新標簽頁面，你所需要的內(nèi)容，它都能夠為你聚合呈現(xiàn)出來，絕對算得上是發(fā)現(xiàn)干貨的利器。

2. Vue.js devtools

Chrome 開發(fā)者工具擴展，用于調(diào)試 Vue.js 應(yīng)用。

3. React Developer Tools

React Developer Tools，可以在 Chrome 和 Firefox 開發(fā)者工具審查 React 組件的瀏覽器擴展。

4. AngularJS Batarang

AngularJS Batarang 是適用于 Chrome 的 AngularJS WebInspector 擴展。AngularJS Batarang 是開發(fā)者工具擴展，用來調(diào)試和分析 AngularJS 應(yīng)用。

5. ng-inspector for AngularJS

ng-inspector for AngularJS 是一個在「檢查元素」面板中顯示當(dāng)前頁面實時 AngularJS 范圍層次結(jié)構(gòu)、以及它的控制器或指令與范圍相關(guān)的瀏覽器擴展。

6. EnjoyCSS

EnjoyCSS 能夠通過圖形化的界面幫助你在線生成 CSS3 代碼，可謂前端開發(fā)者的一大利器。

7. LiveReload

LiveReload 會監(jiān)控你指定的目錄中文件，如果有文件被更改，它就自動觸發(fā)瀏覽器刷新頁面，這樣我們不用每次修改文件后，都要去按下 F5 刷新頁面。

8. jSonView

很方便地幫助你驗證和查看 jSON 文檔。

9. User-Agent Switcher for Chrome

有了 User-Agent Switcher for Chrome，只需要一個瀏覽器插件，你可以隨時更換 UA，測試網(wǎng)頁的自適應(yīng)情況，能夠幫你很好地提高開發(fā)效率。

10. Page Ruler

Page Ruler 能夠幫你快速查看網(wǎng)頁中某個具體控件或者整個網(wǎng)頁具體尺寸的情況，，測量網(wǎng)頁元素，再也不用打開占據(jù)大片空間的「檢查元素」窗口了。

不管怎么說，工具只是我們在開發(fā)過程中的輔助工具，探索好用的工具的同時，提升我們自己的開發(fā)實力才是最主要的。最后，也祝各位開發(fā)者們開發(fā)愉快！