本身的前端工具集

找到好的工具和插件會在這裏持續更新,方便收藏的童鞋回溯。但願更多的童鞋可以把你工做上的用到的工具分享給你們!php

切圖類插件

做爲頁面仔,本身的ps沒有一個好的插件怎麼能行呢。前端

預處理器和後處理器

處理器webpack

編譯工具web

編譯工具中我經常使用到的gulp,因此都是依賴gulp插件的。若是你是使用別的自動化工具的話,能夠去npm package官網上尋找你要的插件。

CSS 在線生成工具

在線的css3工具,做爲學習和編寫css特效項目有很大的幫助。尤爲是css3動畫的製做。

自動化工具

自動化工具用來安裝依賴和構建項目,可以很方便的處理那些繁瑣的事情如:壓縮、打包、編譯等。

調試工具

  • Browsersync

  • 微信調試工具

  • BrowserStack Local 一款要收費的chrome插件,提供許多許多版本的瀏覽器能夠測試(遠程開虛擬機,而後咱們在瀏覽器裏面能夠看到)。還支持一些安卓和ios模擬器的查看(也有免費的能夠用,不過可用的瀏覽器就不多了)。

  • WEB前端助手(FeHelper) 也是一款chrome的插件,功能的話能夠點開連接看看。

  • Visual Event 一款用來查看頁面上使用了jQuery綁定事件的元素,可以很詳細的看到在哪一個文件的哪一行。

  • Rosin Alloyteam 出款的一個移動端調試利器!

調試工具能夠解放咱們的f5鍵和可以更加方便的在手機上調試。大大提升生產力!

Sublime 插件

建議你們把本身的package都上傳到github或者coding之類的代碼託管平臺,之後換電腦的時候就不再用從新的去安裝那些插件了。

其餘

最後

做爲一個頁面仔,很須要有工具去輔助本身開發。例如:處理器、自動化工具、調試工具等。隨着本身的負責的項目愈來愈大,更須要這些工具去處理那些繁瑣的事情,讓咱們可以更加專一的去寫代碼。

若是你有更好的工具,可以有效的提升的本身的開發效率。請在評論中告知我!

相關文章
相關標籤/搜索