如何在前端開發(fā)中增加編碼效率，這里有十款 Chrome 擴展可以幫你

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

1. 掘金 Chrome 插件

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

2. Vue.js devtools

Chrome 開發(fā)者工具擴展，用于調試 Vue.js 應用。

3. React Developer Tools

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

4. AngularJS Batarang

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

5. ng-inspector for AngularJS

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

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，測試網頁的自適應情況，能夠幫你很好地提高開發(fā)效率。

10. Page Ruler

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

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