如何在前端開發中增長編碼效率，這裏有十款 Chrome 擴展能夠幫你

對於前端開發者來講，Chrome 瀏覽器絕對是開發過程當中不可缺乏的利器：不單單是由於 Chrome 自帶的功能強大的 devtool，更是由於 Chrome 有着各類好用的前端語言調試工具以及諸如 EnjoyCSS、LiveReload 等這類可以提升你編碼效率的強大擴展。咱們就整理了十款前端開發相關的 Chrome 插件，在這裏推薦給你。

1. 掘金 Chrome 插件

對於開發者來講，比開發過程更重要的，應該要算平時對於開發資源以及技術文章一點一滴的積累了吧。那麼，開發者可以在哪裏獲取須要的技術內容呢？

過去，你可能須要在 GitHub、Dribbble 等許多網站之間不停地跳轉來尋找本身須要的內容，如今，有了掘金 Chrome 插件，只須要一個新標籤頁面，你所須要的內容，它都可以爲你聚合呈現出來，絕對算得上是發現乾貨的利器。

2. Vue.js devtools

Chrome 開發者工具擴展，用於調試 Vue.js 應用。

3. React Developer Tools

React Developer Tools，能夠在 Chrome 和 Firefox 開發者工具審查 React 組件的瀏覽器擴展。

4. AngularJS Batarang

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

5. ng-inspector for AngularJS

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

6. EnjoyCSS

EnjoyCSS 可以經過圖形化的界面幫助你在線生成 CSS3 代碼，可謂前端開發者的一大利器。

7. LiveReload

LiveReload 會監控你指定的目錄中文件，若是有文件被更改，它就自動觸發瀏覽器刷新頁面，這樣咱們不用每次修改文件後，都要去按下 F5 刷新頁面。

8. jSonView

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

9. User-Agent Switcher for Chrome

有了 User-Agent Switcher for Chrome，只須要一個瀏覽器插件，你能夠隨時更換 UA，測試網頁的自適應狀況，可以幫你很好地提升開發效率。

10. Page Ruler

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

無論怎麼說，工具只是咱們在開發過程當中的輔助工具，探索好用的工具的同時，提高咱們本身的開發實力纔是最主要的。最後，也祝各位開發者們開發愉快！