天天看點

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

對于前端開發者來說,chrome浏覽器絕對是開發過程中不可缺少的利器:不僅僅是因為chrome自帶的功能強大的devtool,更是因為chrome有着各種好用的前端語言調試工具以及諸如enjoycss、livereload等這類能夠提高你編碼效率的強大擴充。我們就整理了十款前端開發相關的chrome插件,在這裡推薦給你。

1、掘金chrome插件

對于開發者來說,比開發過程更重要的,應該要算平時對于開發資源以及技術文章一點一滴的積累了吧。那麼,開發者能夠在哪裡擷取需要的技術内容呢?

過去,你可能需要在github、dribbble等許多網站之間不停地跳轉來尋找自己需要的内容,現在,有了掘金chrome插件,隻需要一個新标簽頁面,你所需要的内容,它都能夠為你聚合呈現出來,絕對算得上是發現幹貨的利器。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  2、vue.js devtools

chrome開發者工具擴充,用于調試vue.js應用。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  3、react developer tools

react developer tools,可以在chrome和firefox開發者工具審查react元件的浏覽器擴充。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  4、angularjs batarang

angularjs batarang是适用于chrome的angularjs webinspector擴充。angularjs batarang是開發者工具擴充,用來調試和分析angularjs應用。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  5、ng-inspector for angularjs

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

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  6、enjoycss

enjoycss能夠通過圖形化的界面幫助你線上生成css3代碼,可謂前端開發者的一大利器。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  7、livereload

livereload會監控你指定的目錄中檔案,如果有檔案被更改,它就自動觸發浏覽器重新整理頁面,這樣我們不用每次修改檔案後,都要去按下f5重新整理頁面。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  8、jsonview

很友善地幫助你驗證和檢視json文檔。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  9、user-agent switcher for chrome

有了user-agent switcher for chrome,隻需要一個浏覽器插件,你可以随時更換ua,測試網頁的自适應情況,能夠幫你很好地提高開發效率。

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

  10、page ruler

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

如何在前端開發中增加編碼效率?這裡有十款Chrome擴充可以幫你

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

====================================分割線================================

本文轉自d1net(轉載)

繼續閱讀