在線正則表達式可視化

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

在線Postman

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

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

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

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

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

CSS UI 動畫庫

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

Canvas背景動畫在線編輯

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

在線代碼主題配色工具

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

Colorsinspo在線配色

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

兼容性查詢Can I Use

Caniuse用于查看瀏覽器對各種新特性的兼容情況?？梢圆樵円粋€jsapi 或者css屬性的在各個瀏覽器的各個版本下的兼容性。

EventLoop可視化

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

CSS代碼生成

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