在線正則表達式可視化

Regulex是一個正則表達式的可視化開源工具，直接輸入正則表達式就能用可視化顯示出來。并且能夠導出svg 格式圖片以及獲取固定鏈接，比如下圖這樣。這樣無論自己用還是給別人講解，都是非常方便的。

在線Postman

這個需要注冊才能使用，不過如果自己有安裝類似應用就可以不用。

Postman是一款功能超級強大的用于發送HTTP請求的 Chrome插件 。做web頁面開發和測試的人員應該是無人不曉無人不用!

測試后端API 接口時非常好用。GET、POST、DELETE、OPTIONS、PUT這些方法都支持。

CSS3剪貼路徑(Clip-path)在線生成器工具

這是一款可在線調整并生成CSS3剪貼路徑的工具，如果你想玩些花里胡哨的樣式的時候必備，該工具免費提供使用。

CSS UI 動畫庫

CSSUILib是由騰訊AlloyTeam前端開發團隊建立，主要收集國內外友好體驗和創意的界面組件Demo。它除了使用CSS3技術外，還使用了HTML5，JS，JX，jQuery等技術，來達到完美的外觀表現以及交互體驗。選中一個Demo，點擊“可視化工具”即進入所見即所得模式

Canvas背景動畫在線編輯

JSRUN.NET一個極具活力的代碼在線運行平臺，你可以把代碼粘貼出來，放到你的項目中，實現很多炫酷的背景效果了!缺點就是，一般加了這個，運行負荷就很大，一般建議，如果僅僅需要炫酷還是值得擁有。

在線代碼主題配色工具

codemirror 調色配色工具，跟上面是同一個網站，你如果覺得自己編輯器的代碼主題顏色不好看，那你可以用它來慢慢調。

Colorsinspo在線配色

Colorsinspo 是一個色彩靈感在線調色板，收集超過上千款優秀的色彩搭配方案，只有單擊需要的顏色復制色碼即可使用，一個設計師和前端工程師值得擁有的在線配色工具，比以往Boss設計分享的調色工具都強大，一款最佳的設計調色工具。

兼容性查詢Can I Use

Caniuse用于查看瀏覽器對各種新特性的兼容情況。可以查詢一個jsapi 或者css屬性的在各個瀏覽器的各個版本下的兼容性。

EventLoop可視化

JavaScript Visualizer 9000對于前端小白理解EventLoop是非常好用的。

CSS代碼生成

有時候UI里面會有一些漸變的效果,無法復制CSS出來,這個時候可以用一個在線的工具-cssmatic,生成漸變的CSS，可以生成四種類型的CSS 代碼，漸變，陰影等。