如何在前端開發中增加編碼效率，這裏有十款 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 能夠幫你快速查看網頁中某個具體控件或者整個網頁具體尺寸的情況，，測量網頁元素，再也不用打開佔據大片空間的「檢查元素」窗口了。





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


​


資料來源：TECH2IPO