作為前端，需要知道這些工具，解放我的重複勞動力

作者：knaagar
譯者：前端小智
來源：dev

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

大家好，我是小智，作為前端開發者，我們必須知道一些好的工具來我們自動生成程式碼，提高我們的開發效率(摸魚)，今天，介紹12個常用的工具，希望對你所有幫助。

1.Coolers

地址：https://coolors.co/

Coolers 為我們提供一個配色方案生成器連同許多受歡迎的配色方案。

2. ColorBox

地址：https://colorbox.io/

ColorBox 允許我們使用各種選項引數來建立自己的配色方案。

3. Adobe Color

地址：https://color.adobe.com/

圍繞著色輪旋轉，通過與它們一起玩耍，瞭解更多關於顏色的知識，同時還有許多令人難以置信的漂亮的顏色方案可供搜尋!

4. Wordmark

地址：https://wordmark.it/

輸入句子/單詞，然後滾動檢視它在網路安全字型中的效果!

5. PNGtoSVG

將 png 轉成 svg

地址：https://pngtosvg.com/

6. CSS3 Generator

地址：http://css3generator.com/

提供完美的CSS3程式碼，在每個瀏覽器上都可以使用。

7. CSS Filters

對圖片進行濾鏡的處理。

地址：https://www.cssfilters.co/

8. Fancy Border Generator

地址：https://9elements.github.io/f...

厭倦了那些基本的邊框半徑的東西，在這裡為你的Divs或按鈕或任何你喜歡的元素建立花哨的邊框!

9. Blob Maker

地址：https://passionhacks.com/blob...|ffc371&o=0

給你的網站增加一些滴狀斑點，讓網站看起來更可愛些。

10. Blob Maker 2

地址：https://www.blobmaker.app/

11. Get Waves

地址：https://getwaves.io/

建立波浪形工具。

12. Clippy

地址：https://bennettfeely.com/clippy/

我最常使用的最佳剪貼工具。有助於建立非常漂亮的剪貼路徑!

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dev.to/knaagar/become...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。