開啟TextEdit或記事本並鍵入“<HTML>”來啟動一個新專案是一件既浪漫又令人興奮的事情。這就是我們中的許多人開始痴迷於網路編碼的原因。在2023年，Web 開發工具不僅可以記錄我們的文字，還可以幫助我們建立專案並增強整個過程。除此之外，還有更多元素需要考慮，而不僅僅是HTML和CSS 。
例如，規劃階段至關重要。您需要考慮線框圖、設計選擇和協作工作流程。然後是選擇理想的JavaScript框架，是否使用整合開發環境 (IDE)等等。
在這篇文章中，我們將介紹2023年您將考慮使用的59種Web開發工具。但在我們開始討論之前，讓我們先談談我們認為Web開發工具是什麼。
我們對Web開發工具的看法
從表面上看，對Web開發工具進行分類似乎很簡單。然而，即使潛入淺水區，也會出現一些模糊界限的考慮。
例如，考慮視訊流服務是否算作開發工具。在泡沫中，可能不會。但是，如果您使用它來記錄特定設計應用程式的螢幕，它會突然轉變為獨特的協作工具。
在我們看來，Web開發工具可以幫助您以專注的方式實現專案目標。雖然這不包括單獨的程式語言，但有 子集、超集和框架（例如TypeScript） 跨越了界限。如果你想賺大錢，密切關注這些方面是至關重要的。
再舉一個例子，考慮Git。您可能會爭辯說，這個版本控制系統 (VCS) 涵蓋了很多領域。有一種特定的語言用於執行命令，核心功能在Web開發方面提供了很多幫助。但是，您也可以將其用作學習工具，特別是通過搜尋問題跟蹤日誌和提交。
總體而言，Web開發工具幾乎可以是使您的專案高效執行的任何工具。您會在工具列表中注意到這種多樣性。
Web開發工具如何簡化您的工作流程
我們將在接下來的幾個詞之前給你一個觸發警告：“壓縮時間”。
是的，這個可怕的短語尖叫著需要節省時間的Web開發工具來拯救世界。統計資料顯示，越來越多的專案將crunch作為標準，許多開發行業至今仍在使用它。
無論您的公司是否使用或需要加班和加班，Web開發工具仍然可以提供幫助。這些工具可以完成繁重的工作並使日常工作自動化，這些工作會消耗您的一天。因此，它們可以有機地提高您的生產力。
但是，如果您在Scrum等敏捷專案框架下執行，它們也可以提供獎勵。例如，考慮JSFiddle之類的工具如何 幫助您在一個sprint結束時與其他團隊共享程式碼片段，為下一個sprint做好準備。
更重要的是，雖然每天的站立會議不會有任何進展，但Discord伺服器或Slack頻道可以提供更好的方式來集中和調整即將到來的一組任務，從而擺脫當前sprint目標的壓力。
總體而言，Web開發工具既關乎執行，也關乎計劃。
如何為您的專案選擇合適的開發堆疊
我們很可能會向皈依者宣講，但一款出色的Web開發工具在玫瑰金M1驅動的MacBook中是物有所值的。因此，為您的特定專案獲得正確的工具組合對於為工作奠定堅實的基礎至關重要。
如果這是您以前沒有考慮過的事情，那麼初始計劃階段將證明是無價的。花一些時間來確定您將使用的工具確實會延遲專案的編碼階段。但是，您稍後會得到這個時間，因為與軟體相關的潛在麻煩會更少。您還將看到更一致的輸出級別（假設每個人都在同一頁面上）。
選擇開發堆疊的注意事項，為專案選擇正確的堆疊歸結為以下幾點：
- 複雜性：考慮您的可交付成果需要有多複雜，因為這將決定堆疊的複雜性。
- 可擴充套件性：如果您的專案是針對本地企業的，那麼這將需要針對全球企業的不同解決方案。因此，您將需要一個更具可擴充套件性的堆疊來實現您的目標。
- 安全性：幾乎不用說，無論您選擇什麼都不應該危及使用者和站點的安全性。
- 成本：當然，沒有人喜歡超支，如果預算緊張，這將比空白支票簿更重要。
您可以將技術分為兩個領域：
- 伺服器端：在這裡，您需要檢視您使用的後端技術。例如，您需要檢視您選擇的託管和Web伺服器、鍵值和SQL儲存、您將使用的任何應用程式和自動化框架，當然還有程式語言。
- 客戶端：可以說您的前端工具選擇會更加直接，尤其是在您使用的語言方面。雖然HTML、CSS和JavaScript將成為特色，但您對JavaScript框架（和自動化框架）的選擇需要一些考慮。
當談到一些現實世界的開發堆疊時，您會注意到許多大型網站使用JavaScript和React.js的某種組合，以及Nginx。您還將在開發堆疊中看到Memcached、Redis和Ruby on Rails。
2023年使用的59個很棒的Web開發工具
事不宜遲，讓我們看看我們推薦在2023年使用的Web開發工具列表。我們已將它們分類，但除此之外，這些工具沒有特定的順序。如果您趕時間，請隨時跳到下面列出的特定部分。
- 本地開發環境
- 文字和程式碼編輯器
- 網頁設計和原型製作工具
- Git客戶端
- 瀏覽器開發者工具
- 前端框架
- Web應用程式框架
- 包管理器
- API和測試工具
- 協作工具
- 任務執行
- 容器化工具
- 影象優化工具
- 網站測試工具
- Web開發參考
本地開發環境
本地開發環境是任何開發堆疊的重要組成部分。但是，它對於Web開發尤其重要。以下是一些最著名的本地開發工具。
1. MAMP
MAMP標誌
考慮到更快的沙盒工具的到來，您可能會認為用於建立和部署網頁的經典工具已經過時並被埋沒了。但是，傳統的Web服務堆疊，例如LAMP、MAMP和XAMPP，仍然很強大。
通常，它們將作業系統 (OS)（Linux、macOS或Windows）與Apache網路伺服器、MySQL資料庫以及Python、PHP和Perl程式語言結合到一個堆疊中。因此，像這樣的Web服務堆疊仍將在2023年使用。
MAMP是該工具的macOS特定版本。這種方法讓您安裝一個堆疊並進行設計和部署。雖然這個過程可能比更現代的設定更冗長，但在引擎蓋下仍然有類似水平的靈活性——或者至少，潛力是存在的。
與其他本地開發環境工具一樣，MAMP是完全免費的。但是，還有一個適用於Windows和Mac的高階版本的MAMP，它增強了功能並提供了一個全面、強大的Web開發工具。
MAMP Pro儀表板
由於靈活性和價格，經典的 Web 服務堆疊仍然在許多開發人員計算機上。命令列愛好者自然會被此解決方案所吸引，尤其是如果您喜歡使用Homebrew、Flatpak或Ninite等包管理器。
當然，Apache開發人員也會使用這些堆疊，MySQL和Python或PHP開發人員也是如此。通過擴充套件，WordPress開發人員在這裡也會有賓至如歸的感覺。
2. XAMPP
XAMPP應用程式
XAMPP是另一個深受PHP開發人員喜愛的Web服務堆疊，包括那些建立WordPress產品的開發人員。名稱中的“X”代表該工具的跨平臺特性。它為Windows、macOS和Linux機器提供安裝程式：
XAMPP下載頁面
雖然過去各種Web服務堆疊之間存在差異，但不斷的更新和改進已經使該領域趨於平衡。儘管如此，XAMPP還是有一些獨特的技巧。
例如，MySQL不再是預設的關聯式資料庫管理系統 (RDMS)。相反，XAMPP使用MariaDB。考慮到甲骨文收購後轉向其他解決方案，它可能更準確地表示生產伺服器。
此外，XAMPP包中還有一個Web應用安裝程式。Bitnami類似於Softaculous等解決方案，但Bitnami是特定於XAMPP的：
Bitnami主頁
雖然有許多可用的應用程式，但您可能對WordPress安裝程式最感興趣。儘管如此，仍有許多附加元件可供選擇，使XAMPP成為本地開發的靈活解決方案。
文字和程式碼編輯器
大多數開發人員喜歡爭論應該使用哪個程式碼編輯器。好吧，我們是誇張的，但是關於這個主題有 很多意見，每個編輯都有狂熱的粉絲群。
但是，如果調查結果正確，您可能正在使用Sublime Text、Visual Studio Code (VSCode)或IntelliJ IDEA。這是有道理的，因為這三個工具從簡單的文字編輯擴充套件到成熟的整合開發環境 (IDE)。但是，還有其他值得一提的。讓我們來看看其中的幾個。
3.Visual Studio程式碼
自2015年推出以來，Visual Studio Code的使用在各種開發桌面中呈爆炸式增長。
Visual Studio程式碼編輯器
它是由Microsoft開發的開原始碼編輯器，提供的足夠多的內容可以被視為IDE。毫無疑問，它提供了足夠的功能來佔領超過一半的市場——55%的Web 開發人員每天都使用Visual Studio Code。
在其預設設定中，Visual Studio Code首先是一個文字編輯器。然而，當與它的擴充套件庫結合使用時，它變得模組化和靈活，足以滿足您的任何開發需求：
Visual Studio Code擴充套件庫
這意味著您可以為您選擇的語言安裝linter和fixer（是的，ESLint和PHP CS Fixer都在那裡），以及Docker和Vagrant擴充套件等等。
說到語言，Visual Studio Code開箱即用地支援JavaScript、Node.js和TypeScript。但是，擴充套件生態系統非常豐富，您將能夠找到支援您正在使用的語言的東西。
更重要的是，您還會發現與其他Microsoft產品的一流整合，尤其是GitHub：
Visual Studio Code具有與GitHub的專用VCS整合
Visual Studio是完全免費的，並且鑑於功能集，它是許多人的理想選擇。我們認為VSCode是介於IDEA和Sublime Text之間的絕佳中間地帶。說到這裡，我們接下來看看後者。
4.Sublime Text
Sublime Text應用程式
Sublime Text是文字編輯器領域的中流砥柱。它比大多數其他解決方案更精簡，儘管它的外觀掩蓋了引擎蓋下的力量。
例如，您會在其他競爭對手中看到很多Sublime Text提供的東西。命令面板是您將在許多解決方案中看到的東西，因為它使用起來很簡單。
Sublime Text的命令面板
此外，還有強大的編輯鍵盤快捷鍵，例如進行多選以一次編輯多列。此外，Goto Anything功能提供了類似於Vim的鍵盤快捷鍵組合來遍歷您的檔案：
Sublime Text可以結合擊鍵來幫助您導航
Sublime Text是一款高階工具，試用期非常寬鬆。它可以被認為是免費的，但要回饋開發人員，您應該購買許可證以延長使用時間。
在我們看來，對於許多小型或業餘編碼人員來說，Sublime Text提供了出色的使用者體驗 (UX)，提供了最基本的功能。它以其令人愉悅的視覺效果、簡潔的佈局和可擴充套件性繼續受到許多開發人員的青睞。
5. Atom
在某一時刻，Atom在開發人員中得到了廣泛的使用。然而，自從Visual Studio Code出現以來，它的採用率就降低了。很遺憾，因為它是一個很棒的程式碼編輯器，適用於許多不同的應用程式。
Atom應用程式
這是一個GitHub開發的應用程式，這或許可以解釋為什麼它在微軟被推到了低階。但是，它會定期更新，可以視為Visual Studio Code的替代版本。
文字編輯是功能性的，就像它的大兄弟一樣，它具有內建的GitHub整合。還有許多稱為“包”的附加元件：
Atom的包安裝程式
有很多可用於幫助定製Atom以適應您的工作流程和專案。Atom包含多個主題可供選擇，其中一些主題（例如One Dark）非常受歡迎，以至於它們也進入了其他編輯器：
Atom的One Dark主題
Atom是一個值得一試的功能程式碼編輯器。然而，由於Atom是基於Electron構建的（不是雙關語），一些使用者抱怨大檔案和專案執行緩慢。因此，我們建議它適用於較小的專案和快速指令碼（尤其是內建終端包），但它可能不適合複雜的工作。
6.Notepad++
Notepad++ 主頁
值得一提的是，Notepad++可能不會取代您已經使用的任何“大男孩”程式碼編輯器，例如IntelliJ IDEA或Visual Studio Code。但是，它會在後臺為您提供更強大的簡單指令碼和一般文字編輯應用程式。
根據您的專案，它可能會誘使您切換。儘管它很簡單，但Notepad++被廣泛用於各種專案。
它是一個僅限Windows的程式碼編輯器，它解釋了其名稱中的“加號”元素。當然，記事本是在Windows安裝中預設找到的嚴肅文字編輯器。Notepad++看起來像它的兄弟，但它還包括特定於開發的功能，例如：
更重要的是，Notepad++在專案管理方面非常靈活。它支援三種不同的方法：會話、工作區和專案。一旦您開始深入研究Notepad++，您會發現您可以將它用於比單頁尾本更廣泛的專案。
我們認為Notepad++將適合需要強大功能的開發人員，這些功能也是可定製的。在使用中，它具有開源Vim氛圍，這將比其他專案更適合某些型別的專案。
7. JetBrains套件
在開發IDE方面，JetBrains解決方案套件將位於（或非常接近）您列表的首位。商業模式很聰明，因為儘管JetBrains提供了許多編輯器，但它們實際上都是其字幕編輯器IntelliJ IDEA的“子集” 。
IntelliJ IDEA是領先的Java IDE
IDEA自稱是Java IDE。它幾乎支援其範圍內其他IDE工具的所有功能。因此，它也支援許多程式語言。
例如，PyCharm從IDEA中提取了大部分Python功能，並將其打包為自己的工具。您還會發現phpStorm和WebStorm做同樣的事情。
PyCharm是一個在語言領域很流行的特定於Python的IDE
使用IDEA輕而易舉 — JetBrains在讓您編碼而不是涉足配置和設定方面做得很好。這可能會讓人感到意外，但使用Vim等命令列編輯器和使用IDEA之間的界限通常很窄。
兩種工具都對工作流程和效率有類似的關注，儘管如果您也喜歡以這種方式工作，IDEA還允許您匯入Vim鍵盤繫結。
IDEA擴充套件讓你使用Vim鍵盤繫結讓你感覺自己像個巫師
如果您作為大型專案或公司的一部分工作，並且有軟體交易，我們假設您可能會使用IntelliJ IDEA。可能是共享專案或在一致的環境中工作。許多WordPress開發人員正在使用JetBrains產品，因為它們在管理專案方面非常強大。
價格也是一個因素，IntelliJ建立在訂閱模式之上，每年通常會達到三到四位數。
IntelliJ IDEA定價
即便如此，JetBrains產品也有 一些“社羣”版本。但是，它們是父軟體的精簡版；本質上，它們是去掉了專有元素的開源解決方案。
更重要的是，JetBrains為開源專案、初創公司、教育機構、Docker Captains和更多利基群體提供有競爭力的價格。
網頁設計和原型製作工具
當然，如果沒有良好的使用者體驗 (UX)，Web應用程式將一事無成。因此，對佈局和視覺效果進行原型設計通常需要專用工具。設計工具在開發的伺服器端和客戶端都將是至關重要的。這裡有一些流行的選擇。
8. Figma
Figma是一個經常被提及的Web開發工具，可讓您在設計上進行協作。
Figma編輯器
您可以使用拖放編輯器來構建介面和其他面向使用者的元素。對於開發人員，您還可以獲取程式碼片段以植入您的專案中。Figma使從構思到實施的過程變得順暢，並在整個專案鏈中保持修訂。
您還可以從一組同質化的工具中受益，以幫助您選擇字型和顏色。此過程與使用單獨的工具（例如Type Scale）形成對比：
型別規模網站
…以及Web開發工具的一個子集，例如Adobe Color、Coolors、各種顏色選擇器等等。
Coolors顏色選擇器
雖然Figma對於單個開發人員專案具有價值，但隨著規模的擴大，它對團隊的好處更大。團隊會喜歡Figma的協作方面，例如中央資產儲存庫和可重用元件。團隊領導者還將欣賞全面的報告選項，以瞭解團隊成員如何使用各種設計系統。
至於定價，標準的Figma每位“編輯”收費12美元，對於基於企業的團隊，每位“編輯”上漲至45美元（對於“編輯”，閱讀“席位”——這是相同的概念）。因此，價格可能會根據您希望加入的編輯人數而上漲。
9. Sketch
Sketch是一款僅適用於macOS的應用程式，在開發人員中也得到了廣泛的認可：
Sketch標誌
它很受歡迎，因為Sketch在底層包含了很多功能，而且使用起來也很容易，考慮到它是一個原生的macOS應用程式，這是有道理的。它看起來有點像Apple的Xcode IDE，這不是壞事，而且導航起來感覺很棒。
當然，您可以執行向量編輯和約束調整大小等基本功能。但是，該應用程式中還有更多功能可以幫助您快速生成設計並將其匯出給其他人。
例如，以Sketch的智慧佈局功能為例，它使用自適應調整大小來匹配您的尺寸和當前佈局。還有許多協作工具可以讓每個人都可以深入瞭解設計並幫助完善它。
Sketch for Teams概述
Sketch與Figma等工具的不同之處在於，自由職業者或單獨的開發人員可以免費加入，然後在需要時購買訂閱。在這方面，Sketch的定價是一次性支付99美元或每位使用者每月9美元。
注：Sketch派是一個專門提供Sketch素材的站點。
10. InVision Studio
InVision Studio以“螢幕設計”應用程式的形式獨特地推銷自己。這是有道理的，而且理解起來也更清楚。InVision Studio提供您期望的所有標準特性和功能，例如直觀的基於圖層的編輯器和向量支援。
InVision Studio應用程式
不過，盒子裡還有更多與原型製作和建立動畫有關的內容。例如，您可以指向、單擊和拖動以將畫板和螢幕連結在一起。此功能使您可以將動畫構建為設計過程的一部分，而不是您稍後交付的東西。
InVision Studio應用程式中的動畫
說到交接，整個團隊都可以在InVision Studio中工作，因為共享元件庫、全域性同步選項、強大的檢查模式等等。
定價結構也具有競爭力。InVision Studio的免費版本為您提供了付費版本的幾乎所有功能，僅對您可以儲存的文件數量有所限制。Pro對於應用程式的功能很有價值（大約95美元/使用者/年）。
11. Affinity Designer
如果您是Adobe Illustrator使用者，您過去會遇到過Affinity Designer 。Serif的圖形設計方法看起來可以讓Adobe的解決方案物有所值：
Affinity Designer應用程式
自推出以來，由於其與社羣的良好關係、出色的設計原則和有吸引力的定價模式，它獲得了迅速增長的使用者群。您會找到適用於Mac、Windows和iPad的版本，每個版本都可以同時使用向量、柵格或兩者：
Affinity Designer的編輯器
您在Illustrator中使用的工具全都存在，以及一整套顏色配置檔案和匯出選項：
Affinity Designer中的匯出選項
簡而言之，這些特性和功能可以為您的專案建立專業圖形。更重要的是，價格極具競爭力。全價約50美元，這是一次性付款。它沒有像Illustrator這樣的合適的基於雲的選項。即便如此，只需支付一次性費用，您就可以以一種主觀上更好的方式展示Adobe的範圍。
12. CodePen或JSFiddle
在前面討論IntelliJ IDEA時，我們沒有提到它的一個小而方便的特性——暫存檔案。它使您可以快速編寫和測試程式碼片段，而不必影響您當前的工作專案。
對於其他程式碼編輯器的使用者，CodePen或JSFiddle等解決方案是一個很好的替代品。它們的工作方式相似：有三個用於HTML、CSS和JavaScript的文字編輯器，以及一個用於檢視結果的輸出螢幕：
CodePen控制檯
您可以根據您的平臺命名您的“Pen”或“Fiddle”，儲存並與他人分享。這是一個如此簡單的想法——它可以幫助您將半生不熟的想法帶到專案的某個方面，並在幾秒鐘內實現它們。
對於想要了解檔案中的特定元素並顯示可以更改的地方的開發人員來說，“線上IDE”是無價的。此外，還可以通過聊天或“現場麥克風”進行協作：
JSFiddle協作螢幕
總的來說，線上 IDE 可以被認為是一種“休眠”的Web開發工具，因為它很少被提及，但被許多開發人員用來建立更好的程式碼。
Git客戶端
擁有一種集中的方式來儲存程式碼、記錄更改並與團隊一起工作而不重複是版本控制系統 (VCS)的任務。以下是一些處理一個VCS的客戶端：git。
讓我們先討論VCS本身。
13. Git
Git對於現代開發人員來說是必不可少的，因此，它是可用的最重要的Web開發工具之一。簡而言之，這是一種記錄您對專案程式碼所做的更改並將它們儲存在“儲存庫”中的方法：
WordPress GitHub提交列表
Git是由Linux創造者Linus Torvalds發明的。並使用一系列命令將檔案更改新增到“暫存區”，然後您將在其中將它們“提交”到儲存庫。從那裡，您將它們“推送”到線上託管的遠端儲存庫。
雖然它不是唯一可用的VCS——WordPress開發團隊仍然在許多專案中使用Trac——但它是最突出的。諸如Git或Trac之類的VCS通過在中央位置託管程式碼來幫助團隊協作。
基本命令是以git開頭的單字函式，通常在命令列中使用。例如：
git add file.php
此表示式將file.php新增到您的暫存區。換句話說，它將更改記錄為您想要儲存的內容，而無需對其進行最後潤色。如果您願意，可以對一個檔案或整個專案執行此操作。
要提交檔案，請執行git commit. 從這裡，您可以新增評論以告訴其他人您的提交。在此之後，您的更改將被儲存並推送到主“branch”。當然，這取決於您是否正在處理遠端“repo”。
如果你是Git和VCS的新手，GitLab有一個很好的初學者指南 ，可以在命令列上使用Git。稍後我們還將討論GitLab本身。
14. GitHub
GitHub頁面
對於絕大多數開發者來說，GitHub是存放專案Git倉庫的地方：
WordPress GitHub儲存庫
它是Microsoft擁有的解決方案，涵蓋的範圍遠不止Git託管。還有一堆自動化測試工具，並嘗試提供額外的協作功能。
GitHub的協作功能
對於開源專案，GitHub等平臺幾乎是事實上的選擇。鑑於此，GitHub作為Web開發工具對於許多開源使用者、學習者和一般開發人員來說是無價的。在深入研究GitHub的問題跟蹤器以解決已安裝包的問題時尤其如此。
GitHub的問題跟蹤器
GitHub不僅僅用於儲存程式儲存庫。它也適用於其他編碼專案，例如Web開發，甚至書籍。
總的來說，GitHub是一個很棒的工具，可以幫助從許多不同的分支建立一個健康的社羣。但是，它並不是唯一的平臺。
15. GitLab
GitLab Logo
我們之前提到過，但GitLab是GitHub的競爭對手，也有類似的目標。它本質上是Git儲存庫的主機，但也提供了一些其他附加功能。
雖然GitHub稱自己為“開發平臺”，但GitLab專注於“DevOps”。在其免費層上，GitLab提供DevOps生命週期的每個階段、靜態應用程式安全測試，以及每月約400分鐘的持續開發 (CD) 和持續整合 (CI)。
GitLab屬於社羣意識，這是GitHub的最大區別。它更多的是關於部署和專案的整個週期。這不是負面的，但這確實意味著GitLab更像是一個“孤立”的平臺，可以說不像 GitHub 那樣適合開源專案。
對於大多數團隊來說，GitLab的免費套餐已經足夠了。每位使用者每年大約230美元，您就可以訪問程式碼和生產力分析，大約10,000分鐘的 CD/CI 分鐘，等等。
16. Sourcetree
Sourcetree不是Git儲存庫主機，而是用於管理它們的圖形使用者介面 (GUI)。它是眾多解決方案之一，例如GitKraken、Sublime Merge、GitHub Desktop等等。
Sourcetree主頁
它是一個Atlassian產品（我們喜歡Atlassian！），它與Bitbucket等其他產品連線，以提供Git儲存庫的視覺化表示。
Sourcetree是作為一個簡單的Git客戶端銷售的——而且確實如此——但它也適合有經驗的使用者。它有很多內容可以支援使用Git（以及Mercurial ）的團隊 。
例如，Sourcetree可以做一些簡單的事情，例如突出顯示上次提交的更改，但如果您需要，它還可以處理更多事情。團隊領導者可以檢視變更集，根據需要在分支之間工作，並使用圖表和資訊選項卡視覺化程式碼：
Sourcetree的圖表檢視
Git客戶端是否適合您取決於您的情況。如果您仍在學習，我們建議您在瞭解流程和流程的同時繼續使用終端。對於廣泛使用Git的專業人士或團隊，Sourcetree等客戶端將節省您每天工作的時間。
瀏覽器開發者工具
沒有網路瀏覽器，就沒有網路開發。但是，雖然您選擇的瀏覽器對於瀏覽網路至關重要，但您也可以使用它來了解它的執行方式。
大多數現代瀏覽器都包含特定的開發工具來幫助您分析後端程式碼，然後您可以將其帶回您的專案中。以下是一些最受歡迎的。
17. Chrome開發者工具
Chrome的“DevTools” 因其出色的功能集和診斷功能而在整個社羣中備受推崇。
鑑於基於Chromium的瀏覽器的興起，許多瀏覽器擁有相同的DevTools集和類似的快捷方式。您可以檢視Microsoft Edge、Brave、Chromium本身以及更多克隆，並在瀏覽器中處理您的專案。
Brave瀏覽器的DevTools
Elements選項卡將是一個經常出沒的地方，因為您將在這裡檢視頁面原始碼。在我們看來，Performance選項卡提供了其他瀏覽器DevTools無法比擬的頁面載入洞察力：
Brave的效能選項卡
安全選項卡也提供了一些有用的資訊，這對於監控（或研究）客戶的網站是必要的：
Brave的安全選項卡
更好的是，您可以 直接從基於Chromium的瀏覽器生成Google Lighthouse報告：
來自Brave的DevTools的Google Lighthouse報告
這裡的DevTools在主觀上是最好的，所以你會發現基於Chrome和Chromium的使用者會依賴它們。雖然其他瀏覽器也有DevTools，但它們也值得考慮。
18. 火狐開發者工具
火狐主頁
Firefox的月活躍使用者群約為2.2億，儘管谷歌佔據主導地位，但它仍然是一種流行的瀏覽器。過去，開發人員對Firebug讚不絕口，它通常在瀏覽器內除錯方面處於領先地位。
今天，我們有Firefox的開發者工具：
Firefox的開發者工具
有一組核心功能可用於檢視站點原始碼（檢查器）、偵錯程式、記憶體、儲存等。
對於初學者來說，控制檯通常是通向編碼的門戶，因為您可以直接在瀏覽器中執行 JavaScript，而且它是一種測試程式碼段並在第一次開始時找到您的腳的簡單方法：
瀏覽器控制檯的示例
儘管如此，我們認為Firefox（和其他瀏覽器）在其開發人員工具中的包裝不如基於Chromium的瀏覽器。儘管如此，對於跨瀏覽器除錯和故障排除，您通常會使用Firefox服務。因此，它們非常適合幾乎所有任務，這是一件好事。
前端框架
說到前端，你需要一些適合建立令人驚歎的網站的東西。您在這裡選擇的框架至關重要。您應該始終為工作選擇最佳工具。
考慮到這一點，讓我們看一些流行的選擇。
19. Bootstrap
移動響應是現代網頁設計中的標準功能。鑑於移動瀏覽現在已經超過了桌面，這是一個受歡迎的步驟。鑑於此，您需要一種快速啟動移動優先網站的方法。
Bootstrap是一個很棒的Web開發工具，它被廣泛使用：
Bootstrap標誌
它是一個工具包，結合了JavaScript外掛、Sass變數、一些預構建的元件、高質量的響應式網格系統等等。甚至還有一個可以與Bootstrap配合使用的官方主題市場，並且許多WordPress網站也使用基於設計框架構建的主題。
當然，是否使用Bootstrap將取決於您的專案需要什麼。但是，可以合理地假設預算緊張且週轉速度快的Web開發專案將轉向“自舉”解決方案並使其適應WordPress。鑑於框架和WordPress是免費的，您的時間成為唯一的成本因素。
20.Tailwind CSS
在紙面上，Tailwind CSS沒有意義。它是一種語言的前端框架，是Web開發核心三位一體的一部分。因此，認為目標使用者已經具備適當的知識而不需要框架是合乎邏輯的。
實際上，Tailwind CSS非常合理 。這是一種無需離開HTML即可設計網站前端的方法。
Tailwind CSS示例
您可以使用各種標籤中的實用程式類從核心樣式表中新增CSS。當然，CSS仍然是主要的樣式來源。當您使用HTML構建佈局時，它就在您的視野之外。因此，它可以讓您同時發展結構和風格。
這種方法讓我們想起了960網格系統，並且可以很好地與該框架相吻合。也就是說，將元素與如此多的類打包在一起是有危險的，最終可能會導致一堆義大利麵條式的程式碼。使用Tailwind CSS需要耐心和紀律，但如果它適合您的專案，它是一個快速而強大的框架。
21.Bulma
我們在設計網站結構和佈局方面取得了所有進展，建立靈活、響應迅速和動態的列是許多人的障礙。雖然處理這不是Bulma唯一 可以做的事情，但這種型別的應用程式對框架來說是肉和土豆：
Bulma網站
與Tailwind CSS非常相似，Bulma隱藏了CSS併為您的HTML提供了實用程式類。它採用Flexbox、移動優先和模組化構建。如果您只需要幾個元件，那就太好了。如果您願意，您還可以混合和匹配框架。
更重要的是，你不需要任何JavaScript來啟動和執行Bulma，因為它只是CSS。您可以使用最少的程式碼新增介面元素，例如按鈕。這是一個簡單的開源框架，可以適應您自己專案的需求。在我們的書中，這是一個很有價值的特質，你可以很好地加以利用。
22. Foundation
ZURB團隊對Foundation中的CSS框架有其獨特的看法。它是一種移動優先的語義工具，具有兩種適用於網站和電子郵件的風格：
Foundation主頁
Foundation的構建以可訪問性為優先事項。Foundation中的每個片段都帶有專用的ARIA屬性。然而，在你進入這個階段之前，Foundation在快速原型設計方面令人印象深刻，因為你將它新增到HTML中的方式。您可以在頁面上建立幾乎任何結構元素——甚至是各種型別的選單和導航：
在Foundation中建立導航選單
ZURB還提供了豐富的優秀文件和教程 供您學習框架的來龍去脈。Foundation易於使用，但我們懷疑您可以深入構建站點並提供複雜的佈局和功能。
您還可以在Foundation網站上找到一堆模板 。它們是簡單的線框，可幫助您起步 – 一個受歡迎的包含：
Foundation的模板庫
總體而言，Foundation框架完全按照它所說的去做。它將成為您網站開發的核心，而不是讓您使用更多功能。因此，您可能不會在每個專案中都使用它。雖然，在受僱的地方，它將在各種網站上開展業務。
23. Material-UI
稍後我們將更詳細地討論 React，但現在，我們知道Material-UI是基於這個 JavaScript 框架的元件庫的。對於不知情的人，Material Design是Google關於如何設計網站前端的“哲學”。這意味著很多Roboto字型和色塊：
Material-UI看起來符合Google的設計標準
您將把庫匯入React，然後使用專用的HTML標籤來構建您的網站：
在Material-UI中建立一個按鈕
要進一步自定義元素，您可以將類新增到HTML標記中。整個程式碼塊包裝在一個函式中，您將在React中呈現詳細資訊（以及擴充套件的頁面）。
還有許多免費和高階主題可用，涵蓋許多用例和價格：
Material-UI主題庫
由於Material-UI有一個特定的用例——圍繞Material Design建立網站——如果這是你的目標，它將是一個首選框架。特別是，無論您的預算如何，主題庫都是入門的寶貴資源。
24. HTML5 Boilerplate
HTML5 Boilerplate主頁
如果您是WordPress開發人員，您可能會遇到過Underscores。這是一個簡單的WordPress入門主題，可以為您節省無數時間來整合您網站的功能和核心元素。HTML5 Boilerplate在一般設計級別上做同樣的事情。
因此，它包括七個跨越HTML、CSS和JavaScript的檔案。它們都只包含渲染頁面最必要的檔案和程式碼。除此之外，您的頁面結果如何取決於您。
HTML5 Boilerplate有很多粉絲，因為它更像是一個節省時間的實用程式，而不是一個成熟的框架。因此，沒有開箱即用的視覺效果來“passing trade”，但是如果您將HTML5 Boilerplate投入使用，您可能會發現它加快了您的開發速度，就像Underscores為WordPress開發人員所做的那樣。
25.Materialise
雖然我們不會將Materialize稱為Material -UI 的競爭對手，但它是另一個使用Material Design原則來建立佈局的框架：
Materialise主頁
然而，Materialize不是使用React，而是一個CSS框架。這使得Materialise更容易在前端實現。與其他基於CSS的框架非常相似，您使用HTML中的類在前端拉入元素。
也就是說，還有一堆JavaScript元件，用於模態框和下拉選單等元素：
使用Materialize建立的下拉選單
像許多這些框架一樣，有一些高階主題可以幫助您以特定樣式構建佈局。但是，它們都是靜態HTML主題，如果您想實現JavaScript，這可能會成為問題。在這些情況下，您可能需要考慮使用Material-UI。
Web應用程式框架
簡而言之，JavaScript框架或庫可以讓您以不同的方式使用所謂的“vanilla”程式碼。在這種情況下，它是建立特定的Web應用程式和站點。也有很多“風味”——讓我們介紹一些。
26. React.js
React沙盒程式碼示例
React.js是一個流行的Facebook設計的JavaScript庫，它為許多更現代的WordPress元素提供支援。WordPress.com後端和塊編輯器都使用React，我們認為它是使用JavaScript的介面優先方式。
WordPress.com的Calypso後端基於React構建
因此，WordPress開發人員應該——套用Matt Mullenweg的話說——深入學習React.js。不過，它不僅是WordPress開發人員的框架。
任何需要現代且動態的使用者介面 (UI) 的地方，React都是首選考慮因素。它使用JavaScript的語法副檔名為JSX來建立元素，然後將其呈現給文件物件模組 (DOM)：
const name = "Ken Starr';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render
Element,
document.getElementById('root')
);
JSX中的JavaScript變數可以是任何有效的表示式，它可以讓您構建複雜的引數。當涉及到框架時，這使得React成為一個強有力的選擇。由於它的流行，我們認為React應該在你的“必須學習”列表中，無論你在哪裡花費你的開發時間。
27.Vue.js
Vue.js是另一個用於構建使用者介面的JavaScript框架。它基於“檢視層”，非常適合與其他庫和框架整合。
Vue.js沙箱
在HTML方面，Vue再好不過了。你給你的標籤一個ID並從JavaScript端的字典中呼叫一個鍵。資料現在是反應式的，並且資料和DOM是連結的。
這樣一來，Vue.js很像我們在文章前面看到的一些CSS框架。這個框架很有說服力，我們鼓勵您檢視文件以瞭解可能的情況。
雖然Vue.js支援JSX宣告，但它更適合使用基於“經典”Web技術的模板。因此，對於不想只在JavaScript中工作的開發人員來說，這將是理想的選擇。
28.Express.js
我們在這裡進入了元框架領域，因為Express.js連線到Node.js併為其他框架提供了基礎。
Express.js主頁
它是一個極簡框架（因此得名），主要好處是幫助您將伺服器端元件組織成熟悉的模型-檢視-控制器 (MVC) 格式。因此，程式碼看起來比其他框架更復雜——甚至是原生JavaScript：
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send("Hello world!");
});
app.listen(3000);
我們認為Express.js將適用於大量從資料庫中拉取和推送的應用程式。這使其適用於許多希望以最小壓力處理前端任務的現代Web應用程式和後端開發人員。
29.Svelte.js
為Web開發時，一個可靠的經驗法則是確保您的網站在儘可能多的瀏覽器上執行。也就是說，在某些情況下，您可能希望在不支援舊版瀏覽器的情況下構建應用程式或網站。在這些情況下，Svelte.js應該在您的列表頂部附近。
Svelte.js主頁
該框架因其檔案大小而得名——縮小後僅為5kb。它具有類似jQuery的格式，對於熟悉的使用者來說很容易：
$('.hello').text("Hello svelte");
Svelte API中有不到40個函式，因此入門非常簡單。更重要的是，您可以使用$.fn.
您會發現支援Internet Explorer 9的“polyfills”，但這幾乎是唯一的讓步。對於使用超精益框架的超現代瀏覽器支援，Svelte.js可能適合您。
30. Laravel
到目前為止，我們已經瞭解了JavaScript或CSS框架。鑑於PHP的流行，也有必要為這種語言提供一個框架。Laravel是這裡的理想選擇，因為它的語法和生態系統在許多開發人員中很受歡迎：
Laravel主頁
說Laravel是一個生態系統更貼切，因為它包含許多工具來幫助您構建專案。即使你不使用框架本身，你也可以使用Laravel的Homestead，一個基於Vagrant的本地開發環境。
Laravel本身是一個基於Docker的PHP框架，並使用CLI（稱為Sail）與之互動。就像Vagrant一樣，您將使用sails up來構建容器並執行它們。
不過，Laravel的strings要多得多。例如，您可以將其用作全棧框架、Next.js應用程式的API後端，以及介於兩者之間的幾乎所有東西。
如果你是一名PHP開發人員，Laravel將成為你工作流程的中心（如果不熟悉的話）工具。
31. Gatsby
Gatsby是一個開源前端框架，最近引起了很多關注。這是因為Gatsby快速、可擴充套件、高效能且安全。
Gatsby主頁
有一個 涉及節點包管理器 (npm)的超快速安裝過程。稍後我們將對此進行更多介紹。雖然它是一個JavaScript框架，但Gatsby在執行時會生成靜態HTML檔案，因此無法攻擊站點。此外，Gatsby可以自動執行效能，以使您的站點以最佳配置執行。
在自動化效能、動態縮放和靜態HTML構建之間，Gatsby感覺就像一個活生生的有機體。有一個複雜的編碼“組成”，涉及JSX、Markdown、CSS等等，根據您的需要。 您的工作流程和堆疊的每一步都可以根據您的要求進行定製。
WordPress開發人員也會喜歡Gatsby與平臺的整合方式。不過，它並不適用於所有情況。例如，如果您需要完全管理基於雲的CMS，那麼這不適合您。即便如此，Gatsby在大多數情況下都能適應您的專案，並且與WordPress配合得很好。
32.Django
儘管Python 是一種“初學者”或“學習”程式語言，但它是許多知名網站的支柱。一些最大的網站——Instagram、Uber、Reddit、Pinterest等——使用Django。通常，您會發現沒有提及Python本身，而只有Django。
Django是一個使用Python建立伺服器端Web應用程式的框架。它與Python本身一樣簡單易用，具有超級可讀的格式。
Django的預設格式
對於基於邏輯的專案， Python是一種出色的指令碼語言，因此將其用於Web應用程式非常合適。更重要的是，Python的處理速度快，基礎檔案結構輕。因為它速度很快，與PHP相比，Django是一個優秀的伺服器端框架，並且與更流行的語言一樣多的咕嚕聲。
也就是說，吸收率較低，這可能是由於Python作為學習語言的聲譽。儘管如此，Django可以很好地與其他語言（例如JavaScript）配合使用，成為現代Web應用程式的基礎。
當然，如果您打算使用CMS，例如WordPress，或者您正在為基於 React 的專案建立解決方案，那麼您的選擇就更少了。即便如此，我們認為2022年在Django上執行的網站數量將會增加。
33. Ruby on Rails
幾年前，Ruby程式語言是初學者語言和指令碼替代PHP的“寵兒”。它經常被比作Python。
和Django一樣，Ruby on Rails也是許多開發人員的最愛。
新Ruby on Rails專案的佔位符頁面
您會發現Ruby用於許多伺服器端和底層Web應用程式。此外，Ruby on Rails被無數網站用作伺服器端框架。它使用MVC方法併為Web服務、頁面和資料庫提供結構。因此，您有一個開箱即用的準系統網站等著您。
如果需要安排許多工作並使用第三方解決方案，Ruby on Rails將適合您的專案。例如，與Google Cloud等檔案儲存以及用於傳送電子郵件的包裝器的原生整合。
總體而言，如果您想要一組健壯的預設值（例如資料夾結構），可以根據需要進行自定義，這是一個不錯的選擇。另一方面，如果您喜歡在開發過程中使用API，這不是一個很好的選擇。
對於大型專案，Ruby on Rails的程式碼結構可能會變得複雜且難以理解。執行時間也會受到影響，因此它可能不是速度關鍵型專案的最佳框架。
儘管如此，Ruby on Rails仍然是領先的Web伺服器端框架之一，並且對於合適的專案，它的使用並沒有放緩。
34.TypeScript
TypeScript程式碼示例
簡而言之，TypeScript為JavaScript提供了可選的靜態“型別檢查”。它是該語言的“超集”，它還支援許多其他JavaScript庫。總的來說，TypeScript是帶有一些額外功能的JavaScript，您可以同時編譯這兩種語言。
許多開發人員已經轉向TypeScript以減少他們遇到的執行時錯誤的數量。型別錯誤是最常見的錯誤之一，減少它們可以為您節省大量額外時間。
對於一個非常簡單的TypeScript示例，考慮一個字串：
let helloWorld = “Hello World”; // ^ = let helloWorld: string
在這裡，TypeScript使用let而不是通常的var作為helloWorld變數。從那裡，TypeScript知道helloWorld是一個字串，並在此基礎上對其進行檢查。
歸根結底，TypeScript並不是必不可少的Web開發工具，儘管由於其核心選框功能而變得越來越流行。如果您最終節省了一些急需的時間，它可能對您的工作流程至關重要。
35.GraphQL
這是一個獨特的工具，可能會受到在API中處理資料的開發人員的青睞。GraphQL是一種在API中使用的查詢語言，它還充當執行時，為您所做的查詢提供服務。
GraphQL網站
使用標準REST API，您通常必須從多個URL載入。使用GraphQL，您可以從單個請求中獲取資料。更重要的是，GraphQL API是按型別而非端點排列的。這種分類有助於提高查詢效率，並在出現問題時提供更明確的錯誤。
考慮到GraphQL如何實現它們，型別也可以用於跳過覆蓋手動解析程式碼。您還可以向API新增新欄位和型別，而不會影響您迄今為止所做的工作。
該工具在許多領域都具有靈活性和可擴充套件性。因為GraphQL為您的專案建立了統一的API，所以您可以引入與您選擇的專案語言相匹配的引擎。這使得它非常適合廣泛的應用程式，而不是解決普遍問題的利基解決方案。
您會發現GraphQL在GitHub、Spotify、Facebook等網站上使用。它應該讓您瞭解如何在各種查詢繁重的網站上使用GraphQL。因此，在接下來的12個月及以後，您可能需要多次使用此解決方案。
包管理器
程式語言、框架等有許多活動部分。這些依賴項必須以正確的方式下載和安裝才能工作。輸入包管理器。這些幫助您從命令列下載和安裝特定的依賴項。讓我們來看看你會遇到的一些工具。
36.Node Package Manager（npm）
是的，下載安裝程式有它的位置。但是，在大多數情況下，從命令列使用包管理器非常簡單。它還提供了一種從Web獲取和安裝檔案的zippy方式。
Node Package Manager (npm)是Microsoft擁有的特定於JavaScript的Web開發工具，可讓您按需安裝特定於語言的包：
npm主頁
例如，搜尋React package會產生超過155,000個結果：
在npm中執行的搜尋
與線上IDE一樣，npm是一個沒有太多“通話時間”的Web開發工具，主要是因為它無處不在。因此，幾乎每個Web開發人員都會使用這個工具。
然而，令人難以置信的是，現在它在GitHub的支援下，2022年使用npm的開發人員將比以往任何時候都多。
37. Yarn
與Python的npm和pip非常相似，Yarn可幫助您安裝與專案及其工具相關的包。這裡的不同之處在於Yarn也是一個專案管理工具。
Yarn主頁
安裝很簡單，為一個新專案初始化Yarn也需要最少的努力。它已成為一個強大的開源解決方案，用於安裝包和管理您的專案。
您將使用工作空間來建立“monorepos”，並且您的專案的多個版本都存在於同一個repo中並且可以交叉引用。您可以為Yarn無法做的任何事情安裝外掛（您想為其新增新的fetcher和resolver）。更準確地說，您可以安裝外掛，但沒有太多，至少在官方列表中。相反，如果您迫切需要該功能，您將自己編寫程式碼。儘管如此，您仍然可以選擇根據專案需求定製Yarn。
Yarn是一個獨特的案例，可以成為您的主要包管理器。對於現實世界的專案，你可能更依賴npm，但Yarn會潛入你的工作流程，只會讓你受益。
API和測試工具
確保事情順利進行是一個經常被跳過的過程，但當出現問題時，它也會帶來遺憾。因此，您的專案的測試階段應該是紮實、穩健和徹底的。
鑑於此，這裡有一些API和測試工具，您可以為您的專案準備好。
38. HoppScotch
HoppScotch由Netlify提供支援，是一個開源API開發工具。開發人員稱其為“生態系統”，這掩蓋了引擎蓋下的功能。
HoppScotch主頁
這是一個嚴肅而強大的解決方案，不適合膽小的人。如果您從未使用過這樣的工具，學習曲線會很陡峭。在任何應用程式的頁面上使用HoppScotch幾乎沒有方向，儘管這通常不是問題，因為該工具無論如何都是為有經驗的開發人員設計的。
有許多實時連線（WebSocket、SSE等）和GraphQL實現。我們也喜歡文件建立者：
HoppScotch文件建立者螢幕
它與您的HoppScotch “收藏”一起使用，可以即時建立文件，這是一個受歡迎的節省時間。
總的來說，HoppScotch是一個功能性工具，可以在您的瀏覽器中開啟很多。它是您總是在不知不覺中使用的解決方案之一——我們不能給它比這更高的讚譽！
39. Postman
Postman標誌
警告——我們要提到可怕的“C”字：合作。Postman是一個Web開發工具，可幫助您通過Postman平臺作為團隊建立應用程式程式設計介面 (API) ：
Postman儀表盤
將Postman整合到您的工作流程中有很多用例。例如，您可以將其以標準方式用於應用程式開發，這將直接轉化為基於Web的專案。您可以使用模擬伺服器模擬端點，這將特別吸引WordPress開發人員。
您甚至可以建立入職培訓來幫助您的API使用者學習。那些有大量使用者流動或大量流量的專案將在這裡看到好處。
至於定價，Postman提供免費套餐，但您將從其中一個高階套餐中獲得最大價值。您需要支付大約12-30美元，具體取決於您的計費週期和使用者數量。
40. Testing Library
執行的程式碼是理想的，但最終目標是執行的應用程式。Testing Library顧名思義：它提供了一組實用程式來幫助您測試專案並鼓勵您使用良好的編碼實踐。
Testing Library主頁
這個想法是您建立代表您的應用程式使用情況的測試。如果它們執行順利，那麼您的應用程式很有可能也會執行。它是一個關於框架的不可知論工具，它不是一個測試執行器。測試庫的核心目的是幫助您編寫與實現細節分離的可維護測試。
Testing Library工具中的所有內容都圍繞其指導原則。因此，您不僅在建立測試，而且還在學習如何讓它們變得更好、更有價值。
因此，Testing Library可能會成為您工作流程的重要組成部分。我們認為幾乎所有專案鏈都可以從測試庫中受益，而React使用者幾乎肯定會希望將此工具作為標準。
協作工具
儘管開發人員反社會的比喻，但事實是技術和協作齊頭並進。
因此，讓我們總結一些出色的協作工具，這些工具將融入您的下一個專案。
41. Jira
在軟體方面， Atlassian是一家廣受歡迎的公司。我們是該公司一些產品的忠實擁護者：Confluence、Trello、Sourcetree、Bitbucket，以及我們在此關注的Jira。
Jira主頁
它是使用敏捷框架的團隊的開發工具——尤其是Scrum，因為它非常流行。因此，您可以在包中獲得豐富的功能。例如，您可以使用看板來幫助組織任務和衝刺。您還可以根據您的方法和專案實施您的估算技術。
Jira專注於可重複的工作流程：計劃、跟蹤、釋出和報告。它是幾個敏捷框架的核心，儘管您也可以根據您的專案前計劃建立自己的框架。如果您必須在sprint之間進行調整，您可以發展您的專案並擴大或縮小規模。
關於Jira的好訊息是有一個免費層可以幫助您入門，其他層的價格也很合理。也就是說，您會發現10人團隊將是有效使用Jira的最低要求。對於任何較小的群體來說，這可能是矯枉過正。
42. Taskade
談到協作工具，Taskade很少見。它對應用程式不利，因為它是讓團隊專注於主題的絕佳工具。
Taskade儀表盤
如果您是其他協作工具的使用者，例如Asana或Basecamp（稍後會詳細介紹），那麼您在這裡就可以輕鬆自在了。您最需要的資訊（例如待辦事項和提醒）集中在後臺。因此，您可以根據您的專案以多種方式呈現它。
Taskade中的簡報型別
“思維導圖”和“組織結構圖”檢視型別非常出色，每一種都為您提供了有關您新增的資訊的不同視角。
Taskade中的思維導圖
該應用程式的簡單性具有欺騙性。除了呈現和管理任務的靈活方式外，幾乎沒有其他選擇。
與您的團隊合作需要按幾下按鈕。例如，每個螢幕都有一個可擴充套件的聊天視窗：
Taskade聊天視窗
對某些人來說，尤其是與其他解決方案相比，Taskade可能被視為準系統，甚至裝備不足。然而，事實並非如此。Taskade是與團隊協作的絕佳方式，並且由於其簡單性，它可以直接插入您正在處理的任何專案中。
43.Asana
Asana主頁
Asana是協作工具領域中較為知名的名稱之一。當涉及到一個專案並在團隊的幫助下將其成形時，這是一個怪物。Asana也很擅長適應不同的工作流程。例如，您可以在列表和日曆之間切換，也可以訪問時間線。
Asana的工作流程型別
還有一些很棒的基於團隊的特性和功能。報告是全面的，並且在更高的計劃中，您可以訪問顯示與團隊績效相關的各種分析的儀表板。甚至還有一種方法可以監控每個團隊成員的工作量。因此，體式可以幫助您將緊縮減少到最低限度，並防止團隊成員精疲力竭。
更重要的是，免費層並不是功能齊全的應用程式的殘缺演示。您可以在擴充套件團隊時擴充套件Asana，這裡有很好的功能可以幫助您。例如，您可以將工作分配給團隊成員並管理每個工作流程。您還可以基於每個工作區向整個團隊傳送一般訊息。
在Asana中傳送訊息
它是協作專案管理的老手，但Asana幾乎每次都能提供。你會發現你的大部分客戶和隊友也有一個Asana帳戶，這意味著在應用程式中進行組裝的頻率比你想象的要高。
44. Basecamp
Basecamp是基於團隊的專案管理的另一個重要參與者。它是老衛士之一，幾乎與WordPress本身一樣長。核心軟體的存在時間要長得多，因此它的血統和記錄值得注意。
Basecamp主頁
在紙面上，與競爭相比，Basecamp沒有什麼令人興奮的。老實說，許多其他協作應用程式已經趕上了Basecamp提供的功能。不過，這並不是故事的全部。
是的，您可以建立任務和待辦事項列表，將它們分配給團隊成員，並在專案範圍內處理所有內容。不過，Basecamp的殺手鐗是基礎設施和設計。
使用Basecamp有一個簡單的方法：建立一個專案，制定您的待辦事項列表或時間表，並將任務分配給隊友。每個專案都有許多獨立的方面，可以幫助您完成專案：
構成Basecamp專案的元素
正如我們所說，這裡沒有什麼開創性的，但這就是重點。Basecamp是一個可靠的專案管理系統，沒有很多花裡胡哨。因此，您將繼續使用它，因為它可靠且可根據您的需要進行擴充套件。
任務執行
在Web開發專案中處理微小的任務會帶來問題。它們是使您更有效率和生產力所必需的。另一方面，您必須花費時間和精力來完成這些微任務。
為了提供幫助，您需要一個任務執行器。這裡有一些我們的最愛。
45. Grunt
Grunt主頁
Grunt是一個特定於JavaScript的任務執行程式，它看起來可以自動執行您每天會遇到的一些平凡和重複的任務。考慮一下您通常認為是普通的任務：linting、minification、編譯等等。
Grunt通過基於JSON的配置檔案 （稱為“Gruntfile”）為您處理這些。這是一個例子：
module.exports = function(grunt) {
grunt.initConfig({
jshint: {
files: ['Gruntfile.js', "src/**/*.js', "test/**/*.js'],
options: {
globals: {
jQuery: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
};
如果您經常發現您的專案因日常任務而浪費時間，那麼Grunt很可能會成為您的Web開發工具箱的一部分，就像WordPress、Bootstrap和許多其他工具一樣。
46. Gulp
Gulp標誌
當您比較任務執行器時，通常是Gulp和Grunt之間的槍戰。Gulp是一個基於JavaScript的工具包，用於自動化您的工作流程並提高您的效率。
您將使用專用檔案和“流”在將資產和程式碼寫入磁碟之前對其進行操作。您建立的每個任務都是一個“非同步”函式，您可以將其設定為私有或公共。不同之處在於許可權之一：私有任務不能由終端使用者執行，並且旨在與其他功能一起使用。
說到這，您可以使用series()和parallel()函式來建立任務。這意味著您可以執行小任務，將它們變成更廣泛系統中的一個齒輪，然後將它們巢狀起來。
此外，您還可以通過社羣建立的外掛擴充套件Gulp的功能：
Gulp外掛的展示
這可能是一個概括，但Gulp和Grunt都擅長不同的事情。在處理可能是更廣泛的指令集的一部分的資產時，Gulp是可靠的。因此，您需要在每個專案的基礎上選擇合適的任務執行器。
容器化工具
我們將在這裡冒昧地說，如果您不使用某種形式的容器化或虛擬機器工具，那麼您作為Web開發人員的進步將會受到影響。
當然，這並不一定適用於所有人，但使用基於容器的開發環境有很多好處。這裡有一些選擇解決方案。
47. Docker
對於許多人來說，Docker是首選的 基於容器的開發環境。開源平臺不僅僅與容器有關，但這是使用它的一個經常提到的原因。
Docker標誌
在前端，這是一個簡單的過程：單擊一個按鈕並獲得一個虛擬沙盒開發環境。當然，任何看起來很簡單的東西都在下面。Docker將使用者介面 (UI)、CLI和API與安全條款相結合，讓您可以快速部署。
對於許多開發人員來說，Docker將成為建立新應用程式的核心。Web開發人員——尤其是WordPress開發人員——可以選擇適合這項工作的工具。Flywheel是領先的平臺。
Docker應用程式支援
Docker還整合了許多工具——其中一些工具已經在您的工作流程中。GitHub、VS Code等應用程式可以與Docker連線並提供流暢的整合。
總的來說，Docker可以佔據一整套關於它所包含內容的文章。儘管如此，這些都不是必需的。很可能你每天都在使用Docker，而且你已經知道它有多棒了！
48. LXD
簡單來說，LXD是Linux發行版的容器管理器。它是基於影象的，並帶有幾個用於Linux的預構建影象。使用LXD可以讓您高枕無憂，因為您將在相同的預設終端使用者作業系統上進行開發。
LXD標誌
它是由Ubuntu開發者Canonical建立的，當然，它維護著一個開源結構。您可以使用非特權容器建立安全環境，使用許多資源控制資源使用，甚至管理網路。
LXD也是可擴充套件的，這意味著您可以執行數千個計算節點或保持簡單。對於基於雲的應用程式，LXD與OpenNebula整合 ——後者具有管理LXD例項的官方驅動程式。
預設情況下，許多容器化工具使用Ubuntu作為標準虛擬環境。即便如此，LXD還是針對執行發行版進行了優化。如果您以前沒有嘗試過，那麼值得花時間在測試工作區中執行。您會發現它比競爭對手更適合特定的工作流程或客戶專案。
影象優化工具
網路上的資產（或媒體，或任何您喜歡的名稱）非常豐富。有完整的線上文化專門基於影象。因此，儘管使用了許多影象，但讓您的 Web 開發專案表現良好是至關重要的。
以下是一些可用的最流行和優秀的影象優化工具。
49. ShortPixel
ShortPixel網站
有許多影象優化應用程式可用，但ShortPixel具有主觀上穩健的演算法。它能夠在不影響質量的情況下粉碎影象檔案大小。如果我們很挑剔，我們建議因為預設設定是可用的最高壓縮率，如果您的影象沒有被壓縮到足夠的程度，就沒有其他地方可去。不過，這並不是一個重大的批評。
ShortPixel在引擎蓋下有大量的功能。有三個級別的壓縮，一個很棒的PDF優化器，甚至一個GIF壓縮器。後者是您在許多其他工具中找不到的東西，因此它是產品線的一個受歡迎的補充。
整個介面也可以訪問：您將影象拖放到上傳器上，然後等待ShortPixel發揮它的魔力。處理完影象後，您可以批量下載它們或選擇單個影象進行下載：
從ShortPixel下載影象
ShortPixel API工具也很強大。您會發現用於減少線上和離線影象的單獨API、全面的PHP和.NET客戶端庫、基於JavaScript的自適應引擎等等。
我們建議ShortPixel是一款開發者工具，因為它非常適合連線您的網站或應用程式。我們還說它會很快讓您對TinyPNG上癮，特別是如果您想將它用作更大工作流程的一部分。
50. TinyPNG
是時候使用每個人最喜歡的影象優化工具 – TinyPNG。您也可以將TinyJPG捆綁到此條目中，儘管這兩種工具都使用相同的影象格式。
TinyPNG網站
您會發現TinyPNG這些年來並沒有太大變化。它仍然是用於優化影象的簡單拖放工具。沒有任何花裡胡哨，也沒有廣泛的檔案格式集。儘管如此，TinyPNG確實提供了最高的可用性以及與其他工具的大量整合。
例如，有一個Photoshop外掛 和 – 對於更細粒度的應用程式 – 一個功能開發人員API。甚至Python使用者也可以參與其中，因為API也支援這種語言。 許多第三方工具也使用API建立了幾個外掛。
我們並不是說TinyPNG壟斷了影象優化市場，但它通常是許多使用者的首選。拍攝一張圖片並將其放入上傳器需要幾秒鐘的時間，當您獲得 99.9% 完美的圖片表示時，它很容易被信任。
網站測試工具
我們之前討論過測試您的API和核心站點程式碼，儘管這會影響您網站的效能。這裡有一些我們喜歡的工具，它們也可以幫助您分析網站的表現。
51. Responsively
Responsively應用程式
如果您曾經被需要在應用程式中執行和完善的媒體查詢的數量所淹沒，請檢視Responsively。它是一個開源前端工具，可幫助您根據所選裝置的各種視口開發網站。
以響應方式檢視不同的裝置
這樣做的好處是您可以並排比較佈局。它為您提供了提高裝置之間一致性的可靠機會。每個裝置都是精確的，並且有很多可供選擇，如果您的網站針對特定裝置，這非常好。
您還可以為Mozilla Firefox、Microsoft Edge和Google Chrome新增專用瀏覽器擴充套件， 以將頁面傳送到響應式瀏覽器。從這裡，您可以開啟內建的開發工具並開始工作。
Responsively檢查器
還有許多其他功能可以幫助您開發，例如螢幕截圖功能、熱載入支援等。很難與“Responsively”是“Web開發人員的瀏覽器”的標語爭論。它可能最終成為您工作流程的核心組成部分。
52.PageSpeed Insights
對於許多人來說，Google的PageSpeed Insights是一個有價值的工具，可以幫助您瞭解網站的執行情況以及可以在哪些方面提高載入速度。
Google的PageSpeed Insights
也就是說，深入研究一些底層軟體更有趣。它也可能更適合您的需求。Google Lighthouse可以針對任何網頁執行，併為頁面效能、SEO、漸進式Web應用程式 (PWA) 等提供審計和報告。
執行Google Lighthouse的主要方式是從命令列、使用Chrome的DevTools或作為Node模組。如果您使用PageSpeed Insights介面，Lighthouse會生成一些分數並提供進一步的見解。
值得注意的是，從表面上看，Google Lighthouse和PageSpeed Insights看起來很相似。但PageSpeed Insights使用基於實驗室的資料與真實世界的使用者資料相結合。Lighthouse’suse的分析忽略了使用者資料並測量了您網站的更多元素。
在我們看來，值得同時執行PageSpeed Insights和Lighthouse，特別是如果您的客戶的目標是登上搜尋引擎結果頁面 (SERP) 的頂部。在任何情況下，它都是一個可靠的工具，它甚至可以取代PageSpeed Insights作為您選擇的效能工具。
53. Cypress
對於許多開發人員來說，端到端測試並不是一種愉快的體驗。Cypress選擇在這座山上消亡——它是一種簡單的解決方案，它逆向端到端測試的趨勢，併產生了一些出色的東西。
Cypress主頁
雖然大多數端到端測試工具都基於Selenium，但賽普拉斯卻朝著不同的方向發展。這意味著使用者使用基於Selenium的測試人員發現的問題不存在於此。事實上，開發人員希望讓設定、編寫和執行測試變得輕而易舉。
為此，他們從頭開始構建架構，並專注於端到端測試，排除其他形式。為了提高效能，賽普拉斯與您的程式在同一執行迴圈中執行，而不是通過網路執行遠端命令。
由於測試程式碼在瀏覽器中執行，因此無需考慮驅動程式或語言繫結。即便如此，您也可以在執行測試之前編譯成JavaScript。
如果您是質量保證 (QA) 工程師或希望您的端到端測試能夠本地訪問您的工作的開發人員，賽普拉斯應該引起您的注意。最好的部分是還有一個功能齊全的免費套餐 ！
54. Stack Overflow和搜尋引擎
請允許我們擴充套件一下被認為是Web開發工具的界限。Stack Overflow是眾所周知的任何人，甚至對Web開發有過一些瞭解：
Stack Overflow網站
這是一個專注於程式設計的問答網站，它是Stack Exchange網路的一部分，涵蓋了所有其他主題：
Stack Exchange網路中的眾多利基站點之一
它被稱為數千名開發人員的首選資源，儘管對其社羣存在一些爭議，但流量仍然很大。我們敢說，Stack與您選擇的搜尋引擎一起，代表了一種靈活的Web開發工具，用於學習和提高您的技能。
例如，當遇到與程式碼相關的開發障礙時，您可能會前往Stack Overflow。同樣，當出現您不確定如何解決的錯誤時，將其貼上到搜尋引擎中是找到所需答案的最快方法。
鑑於90%的受訪使用者使用Stack Overflow解決問題，很可能每個人都會使用該工具。然而，對於初學者——或者即使你不能清楚地表達你的問題——搜尋引擎可以說會更友好一些。
Web開發參考
如果您是一名訂閱“RTFM”精神的開發人員，那麼您不需要對以下幾個條目有任何說服力。相反，如果您想深入研究一個問題並找出答案，請知道在您之前有無數的開發人員可能已經找到了答案。
鑑於此，請檢視以下幾個Web開發工具，均基於 Web 參考資料。
55. MDN網路文件
在網路的早期，有一個名為Webmonkey的網站，由Lycos運營，旨在向新使用者教授Web開發和程式設計。該網站的精神存在於Mozilla的MDN Web Docs中。Webmoney於2004年關閉，而MDN Web Docs於2005年問世，因此兩者之間有著天然的契合。
MDN Web文件主頁
它是一個資源集合，可幫助您在某些情況下教您為Web程式設計，在其他情況下教您特定於Mozilla的產品。內容分為兩大類：技術和參考指南。根據您現有的能力和經驗，您將看到幾個教程、專門的參考指南以及前者的一些進一步資源。
這些指南都與開發行業中的特定利基和行業相關。例如，Web開發參考充當附加HTML、CSS和JavaScript指南的“基石”頁面。
MDN Web文件JavaScript頁面
還對各個行業進行了廣泛的研究，例如遊戲開發以及在該領域起步所需的條件：
MDN Web Doc的遊戲開發指南
MDN Web Docs是初學者Web開發人員的必備讀物，它也為專家提供了足夠的價值。如果有任何網站值得瀏覽器書籤，那就是它！
56. DevDocs — API文件瀏覽器
過去，您會將購買的產品的所有手冊儲存在滿是灰塵的抽屜或櫥櫃中。隨著生活變得更加數字化，這些紙質手冊已經讓位於每個製造商網站上的PDF下載。
通過這一點，我們現在有了網站，可以在精選圖書館中收集手冊的數字版本。它使您可以從一個儲存庫中找到所需的內容。因此，有理由認為Web開發主題也會存在。
簡而言之，DevDocs是一個API文件庫，我們認為它對幾乎所有開發人員都很有價值：
DevDocs主頁
在瀏覽庫之前，您需要啟用所需的API文件。您可以從“首選項” 螢幕執行此操作：
DevDocs首選項螢幕
完成後，您將能夠從專用樹形選單訪問相關文件：
WordPress API螢幕
這是一個低效問題的簡單解決方案，因為您在一個地方有多個API引用。DevDocs是另一個值得新增書籤的站點，遺憾的是沒有可用於更快參考的桌面應用程式。
57. CSS-Tricks
Chris Coyier是許多Web開發人員都知道的名字。我們敢打賭，您已經熟悉他建立的網站——CSS-Tricks。顧名思義，它是一個致力於前端編碼，特別是CSS以及如何變得更好的網站。
CSS-Tricks主頁
正如關於頁面所指出的，在最初的幾年裡，CSS是主要的話題。不過，從那時起，HTML、JavaScript、WordPress等變得同樣重要且經常被討論。結果是一個專注於前端開發的網站，其中包含大量文章、視訊和指南來激發您的靈感。
CSS-Tricks的部落格
一個簡單但有價值的元素是CSS Almanac，它概述了CSS中的選擇器和屬性。如果您需要了解該語言的某些方面，這是一個很好的參考來源。
CSS技巧年鑑
雖然CSS-Tricks有類似參考的方面，但它本身並不是參考資源。儘管如此，它應該是您經常出沒的地方，無論是通過 RSS 提要還是其他解決方案。內容質量很高，可以以您以前沒有想到的方式挑戰您。至少，訂閱內容並等待CSS-Tricks進入您的收件箱。
58. DEV Community
想象一下，您可以從社交媒體、Web開發和Stack Overflow中獲取優秀的部分，然後建立一個將它們合併的站點。DEV Community可能就是結果。
DEV Community主頁
它是一個部落格平臺，也是尋找開發問題答案的一種方式。您選擇要關注的標籤和人員，您的新聞源將成為帖子和見解的自動化和策劃時間表：
JavaScript標記的DEV Community時間線
公平地說，這是您可以在任何地方找到的資訊——如果您願意的話。DEV Community的優點是它就在這裡，而且它是對開發主題的定向整理。將其視為開發人員會議軌道，而不是在公共汽車站無意中聽到並插入相關對話。
這是另一個在您的RSS Feed中表現良好的網站，或者作為收件箱中的摘要。因此，它也是一個“睡眠”資源，因為你會經常到這裡而沒有意識到它。
59. Can I use…
你可以說Jeeves開始了通過網際網路提問來查詢資訊的趨勢。他很快被各種搜尋演算法取代，儘管基於問題的搜尋仍然是找到所需內容的可靠方法。
Can I use…是前端開發人員對“是否有針對CSS的Ask Jeeves的回答”
Can I use…主頁
前提很簡單：您在搜尋欄位中輸入CSS選擇器或屬性，資料庫會返回您是否可以使用它來建立網站。您也不限於CSS。還支援JavaScript和HTML：
在Can I use… 中搜尋HTML元素
它是一個前端語言資料庫，因此它不會返回PHP、Python或其他伺服器端語言的結果。即便如此，我可以使用…是一個巨大而有價值的工具，可以幫助您在可訪問性和多裝置設計方面提供幫助。
拉出一個特定元素並一目瞭然地檢視您的目標瀏覽器是否支援它是一個簡單的提議：
Can I use…中的瀏覽器支援表
如果仔細觀察，您還可以找到元素的釋出日期和使用百分比等統計資訊：
Can I use… 中特定元素的資訊
總的來說，Can I use…可能不會經常使用。但是，在專案的某些階段，它幾乎會一直開啟。一旦你弄清楚你的目標瀏覽器將支援什麼，Can I use….重新進入你的書籤並等待下一次需要它的時候。當涉及到您的前端程式碼時，這是一項有用的服務，可以成為“water carrier”。
小結
時間和金錢都很短，選擇您一直使用的舊Web開發工具是有一定道理的。然而，對專案需求做出深思熟慮的選擇將在時間、成本和生產力方面得到回報。
在這篇文章中，我們介紹了59種令人驚歎的Web開發工具，您可以在2023年使用這些工具來為您和您的團隊提供動力。你可能已經這樣做了。如果各種調查都是正確的，那麼更多的開發人員會轉向GitHub、TypeScript、不同的Web服務堆疊以及眾多JavaScript框架之一來完成專案。
評論留言