在本文中，我為前端Web開發(fā)人員匯總了30種優(yōu)秀工具，從代碼編輯器和代碼游樂場到CSS生成器，JS庫等等。

目錄

CSS代碼生成器

你是否曾經(jīng)嘗試記住如何聲明漸變，文本陰影，F(xiàn)lexbox或Grid的CSS屬性，僅舉幾例?不容易。除非你一再使用某些CSS功能及其屬性，否則很難記住所有這些功能。但是，即使是精通CSS的人有時也需要對某些屬性進行復習，尤其是如果他們有一段時間沒有使用它們了。

如果你需要一些最新和最偉大的CSS的快速幫助，這里有CSS生成器來拯救。輸入數(shù)值，預覽結(jié)果，抓取生成的代碼并運行。

1. CSS3 Generator

https://css3generator.com/

CSS3 Generator是一款免費的在線應用，它可以讓你快速編寫一些現(xiàn)代CSS功能的代碼，如Flexbox、漸變、過渡和變換等。

輸入所需的CSS值，實時預覽結(jié)果，復制并粘貼生成的代碼。此外，此應用程序還會顯示支持CSS代碼的瀏覽器及其版本的列表。

2. 終極CSS Generator

https://webcode.tools/css-generator

CSS Generator是一個免費的在線應用程序，可讓您生成CSS動畫，背景，漸變，邊框，濾鏡等的代碼。

界面友好，你感興趣的CSS功能的瀏覽器支持信息清晰易發(fā)現(xiàn)，生成的代碼干凈準確。

3. CSS Grid布局生成器

https://css-grid-layout-generator.pw/

CSS Grid非常棒，用代碼創(chuàng)建網(wǎng)格可以讓你完全控制最終的結(jié)果。然而，在你編碼的時候，有一個可視化的網(wǎng)格表示是很有幫助的。雖然一些主要的瀏覽器已經(jīng)實現(xiàn)了很好的工具來讓你可視化你的網(wǎng)格，但一些開發(fā)人員可以做一些額外的幫助。這是CSS Grid生成器可能派上用場的地方。

Dmitrii Bykov編寫的CSS Grid Layout Generator是免費的，可以在線訪問，并且非常靈活。我試了一下，發(fā)現(xiàn)它在網(wǎng)格容器級別和網(wǎng)格項目級別上為我提供了很多控制，同時為我提供了不錯的預覽功能和簡潔的代碼。

如果你需要幫助，請單擊“如何使用(How to Use)”按鈕，然后觀看應用作者提供的演示視頻。

靜態(tài)站點生成器

靜態(tài)網(wǎng)站生成器代表：

…在使用手動編碼的靜態(tài)網(wǎng)站和完整的CMS之間進行折衷， 同時保留兩者的好處。本質(zhì)上，會生成一個 靜態(tài)的純hTML網(wǎng)站，使用類似CMS的概念(例如模板)。 可以從數(shù)據(jù)庫中提取內(nèi)容，但是更典型地， 使用Markdown文件。

這是StaticGen網(wǎng)站上列出的前兩個靜態(tài)網(wǎng)站生成器。

4. Next.js

https://nextjs.org/

Next.js是一個免費的開源框架，用于靜態(tài)導出的React應用。其特點包括：

預渲染(Next支持服務器端渲染)

• 零配置
• 可擴展性
• CSS-in-JS
• 很棒的文檔
• 和更多。

5. Gatsby

https://www.gatsbyjs.org/

Gatsby 是基于React的免費開源框架，可幫助 開發(fā)人員建立快速的網(wǎng)站和應用程序。

Gatsby 提供了大量功能，例如：

• React，webpack，現(xiàn)代JavaScript和CSS的強大功能
• 豐富的數(shù)據(jù)插件生態(tài)系統(tǒng)
• 漸進式Web應用程序生成
• 超級簡單的部署
• 為不同的用例定制的預先打包的Gatsby站點
• 和更多。

SVG 優(yōu)化器

網(wǎng)絡上的性能至關(guān)重要：訪問者在等待內(nèi)容加載時會不耐煩，搜索引擎往往會懲罰速度緩慢的網(wǎng)站。

優(yōu)化圖形是構(gòu)建快速網(wǎng)站和應用程序的必要步驟，SVG圖形也不例外。為確保SVG代碼干凈整潔，使用SVG優(yōu)化器已成為前端開發(fā)人員工作流程中必不可少的步驟。

以下是兩個出色的SVG優(yōu)化器，它們被專業(yè)開發(fā)人員廣泛使用。

6. SVGOMG

https://jakearchibald.github.io/svgomg/

SVGOMG是一個免費的在線應用程序，可讓你將許多優(yōu)化選項應用于SVG代碼并預覽最終結(jié)果。易于使用，也可以離線使用。

7. SVG Optimizers

https://petercollingridge.appspot.com/svg-optimiser

這是另一個很棒的免費在線SVG優(yōu)化工具，可用于修剪SVG代碼，它直觀易用。

動畫庫

動畫在網(wǎng)絡上隨處可見，無論是微妙的微效果，還是大塊內(nèi)容在屏幕上逐漸展開的故事性運動，都是動畫的存在。

雖然現(xiàn)代的CSS和JavaScript包含了你創(chuàng)建一些酷炫的網(wǎng)頁動畫所需的功能，但下面列出的庫肯定能讓你更快地完成工作，并獲得一些驚人的效果。

8. Animate.css

https://animate.style/

Animate.css是一個可在你的Web項目中使用的即用型跨瀏覽器動畫庫。非常適合強調(diào)，首頁，滑塊和引導注意的提示。

顧名思義，這個庫是純CSS的。在預包裝的效果中，你會發(fā)現(xiàn)：像彈跳和閃爍效果、后方入口和出口、淡入和淡出等引人注意的效果，以及其他大量的效果。

功能包括：

• 使用npm，Yarn或CDN快速安裝
• 使用方便簡單
• 使用CSS自定義屬性(CSS變量)自定義動畫持續(xù)時間，延遲和交互的選項
• 用于延遲、速度變化和重復的實用類。

9. GreenSock (GSAP)

https://greensock.com/

GSAP(GreenSock動畫平臺)提供“針對現(xiàn)代網(wǎng)絡的超高性能，專業(yè)級動畫”。

其高度直觀的JavaScript驅(qū)動的語法使你可以立即構(gòu)建出色的動畫。從DOM元素和JavaScript對象到SVG，Canvas和WebGL身臨其境的體驗，可以使用GSAP進行動畫制作的對象沒有任何限制。此外，GSAP是跨瀏覽器的，并且向后兼容，并提供了出色的文檔和支持社區(qū)。

10. Anime.js

https://animejs.com/

Anime.js 是一個輕量級的JavaScript動畫庫，具有簡單而強大的API。它與CSS屬性，SVG，DOM屬性和JavaScript對象一起使用。

完全開源，憑借其直觀的語法和出色的文檔，你可以立即使用Anime.js并開始運行。

跨瀏覽器測試

開發(fā)人員無法控制要從哪種設(shè)備訪問其網(wǎng)站或應用程序。在2019年，超過一半的網(wǎng)絡流量來自移動設(shè)備。從整體上看，屏幕尺寸從臺式機、平板電腦到智能手機和可穿戴技術(shù)都有所不同。

作為前端開發(fā)人員，確保網(wǎng)頁在任何屏幕尺寸下都可以使用是我們工作的核心組成部分。雖然沒有什么比得上直接在不同的瀏覽器和平臺上測試網(wǎng)站和應用程序，但以這種方式覆蓋所有基礎(chǔ)不是我們大多數(shù)人的選擇。下面列出的服務和應用程序可以提供幫助。

11. Caniuse

https://caniuse.com/

我不知道你是怎么想的，但當我需要了解瀏覽器對任何HTML、CSS、SVG和JavaScript功能支持的最新信息時--無論這些功能是多么新奇或晦澀難懂——caniuse是我的首選網(wǎng)站。

你將獲得全球和特定國家/地區(qū)級別的最新統(tǒng)計結(jié)果，以及有關(guān)特定問題，資源等的信息。

12. Am I Responsive?

[[329421]]

http://ami.responsivedesign.is/

這是一個免費的在線應用程序，可讓您快速檢查網(wǎng)站在不同屏幕尺寸下的外觀。

以下是功能列表：

• 你可以通過在文本框中輸入要測試的站點的URL，或從任何地方使用瀏覽器上的“Am I RWD”書簽來從該應用程序的網(wǎng)站中使用該應用程序。
• http://localhost/ works。
• 可以在顯示你網(wǎng)站的每個設(shè)備上單擊并滾動以進行測試。

13. Responsive Web Design Checker

https://responsivedesignchecker.com/

Responsive Web Design Checker，即響應式網(wǎng)頁設(shè)計檢查器，是另一個免費的在線應用，可以測試你的網(wǎng)站不僅在不同的屏幕尺寸上，而且在各種設(shè)備上的外觀。其中包括各種臺式機和筆記本電腦，Apple iPad Retina和Amazon Kindle Fire等平板電腦，以及Apple iPhone 6/7 Plus，三星Galaxy等智能手機。

14. BrowserStack

https://www.browserstack.com/

BrowserStack是一項受歡迎的付費服務，可讓你在2000多種真實設(shè)備和瀏覽器上測試你的網(wǎng)站或應用程序。它開箱即用，完全安全。

代碼協(xié)作和游樂場

以下是一些很棒的工具，可讓您快速共享代碼，原型和測試項目構(gòu)想。

15. GitHub

這個無需多言

16. CodePen

https://codepen.io/

CodePen已經(jīng)存在了很多年，并且受到前端開發(fā)人員社區(qū)的喜愛和廣泛使用，它非常適合嘗試概念，原型設(shè)計，學習編碼和代碼共享。由其團隊定義如下：

CodePen是一個社交化的開發(fā)環(huán)境。從本質(zhì)上講，它允許你在瀏覽器中編寫代碼，并在構(gòu)建時查看其結(jié)果。對于任何技能的開發(fā)人員來說，這是一個有用的和自由的在線代碼編輯器，特別是對于學習代碼的人來說，這是一個賦能。我們主要專注于前端語言，例如HTML，CSS，JavaScript和可轉(zhuǎn)化為這些內(nèi)容的預處理語法。

17. JSFiddle

https://jsfiddle.net/

JSFiddle 是一個在線IDE服務和在線社區(qū)，用于測試和展示用戶創(chuàng)建和協(xié)作的HTML、CSS和JavaScript代碼片段，即 "fiddles"。 它允許模擬AJAX調(diào)用。2019年，JSFiddle根據(jù)編程語言(PYPL)人氣指數(shù)的搜索次數(shù)，在全球和美國排名第二，直接排在Cloud9 IDE之后，成為最受歡迎的在線IDE。

18. SoloLearn

https://www.sololearn.com/

SoloLearn是一個很棒的在線游樂場，可讓你測試HTML，CSS和JavaScript代碼。它還免費提供基本的編碼課程，以及供開發(fā)人員和學習者使用的論壇。

19. jsrun.net

https://jsrun.net/

這是一個國內(nèi)版的CodePen，強力推薦!Codepen、JSFiddle雖好，但是由于服務器在國外，四度非常慢。而jsrun.net速度非常快。

結(jié)束

有成千上萬的Web開發(fā)工具可供前端開發(fā)人員使用。重要的是，你要完全了解每個工具的功能，這樣你才能根據(jù)你的項目需求做出最佳選擇。前端Web開發(fā)不斷發(fā)展，因此保持最新狀態(tài)至關(guān)重要，因為有些工具可以節(jié)省你的開發(fā)時間，更重要的是，可以改善用戶體驗。