100+ 個 Web 開發工具和資源清單

網路不斷發展，但您的開發技能不必落後！深入探索這個為 2024 年精心策劃的 100 多種出色 Web 開發工具和資源的寶庫。

以下的許多 Web 開發工具都是我們在 Tenten 每天使用的工具。我們無法包含所有內容，但這裡有一些我們最喜歡的和其他廣泛使用的內容。希望您能找到可以幫助您完成開發工作流程的新工具或資源。下面列出的工具和資源沒有特定的順序。

JavaScript 函式庫

JavaScript 是網路上最受歡迎的程式語言之一。 JavaScript庫是預先編寫的 JavaScript 程式庫，可以在網站或應用程式的整個開發過程中更輕鬆地存取。例如，您可以使用下列程式碼片段包含 Google 託管 jQuery 程式庫的副本。

• jQuery：一個快速、小型且功能豐富的 JavaScript 函式庫。
• BackBoneJS：透過模型、視圖、集合和事件為您的 JS 應用程式提供一些骨幹。
• D3.js：一個用於基於資料操作文件的 JavaScript 函式庫。
• React：Facebook 的 JavaScript 函式庫，為建立使用者介面而開發。
• jQuery UI：一組精選的使用者介面互動、效果、小工具和主題。
• jQuery Mobile：基於 HTML5 的使用者介面系統，旨在製作響應式網站。
• Underscore.js：函數式程式設計助手，無需擴充任何內建物件。
• Moment.js：在 JavaScript 中解析、驗證、操作和顯示日期。
• Lodash：一個提供模組化、效能和附加功能的現代實用程式庫。
• Vue.js：用於建立使用者介面的開源 JavaScript 框架。

前端框架

前端框架通常由一個套件組成，該套件由其他檔案和資料夾組成，例如 HTML、CSS、JavasScript 等。我們是 Boostrap 的忠實粉絲，Tenten 的主要網站就是基於它構建的。可靠的框架可以成為前端開發人員必備的工具。

• Bootstrap：HTML、CSS 和 JS 框架，用於在網路上開發響應式、行動優先的專案。
• Foundation：響應式前端框架系列，可以輕鬆設計出漂亮的響應式網站、應用程式和電子郵件，在任何裝置上看起來都很棒。
• Semantic UI：開發框架，有助於使用人性化的 HTML 創建美觀、響應式的佈局。
• uikit：一個輕量級、模組化的前端框架，用於開發快速、強大的 Web 介面。

網路應用程式框架

Web 應用程式框架是一種軟體框架，旨在幫助和緩解 Web 應用程式和服務開發中涉及的一些問題。

• Ruby on Rails：Ruby on Rails 是一個 Web 應用程式框架，其中包含使用 MVC 模式建立資料庫支援的 Web 應用程式所需的一切。
• AngularJS：讓您可以擴充 Web 應用程式的 HTML 詞彙。 AngularJS 是一個框架，儘管它更加輕量級並且有時被稱為庫。
• Ember.js：一個用於創建雄心勃勃的 Web 應用程式的框架。
• Express：快速且簡約的 Node.js Web 框架。
• Meteor：全端 JavaScript 應用程式平台，使用單一 JavaScript 程式碼庫組裝建置現代 Web 和行動應用程式所需的所有元件。
• Django：進階 Python Web 框架，鼓勵快速開發和簡潔、務實的設計。
• ASP.net：免費、完全支援的 Web 應用程式框架，可協助您建立基於標準的 Web 解決方案。
• Laravel：一個免費、開源的 PHP Web 應用程式框架，用於基於 MVC 模式建立 Web 應用程式。
• Zend Framework 2：一個使用 PHP 開發 Web 應用程式和服務的開源框架。
• Phalcon：作為 C 擴充功能提供的全端 PHP 框架。
• Symfony：一組可重複使用的 PHP 元件和 Web 應用程式框架。
• CakePHP：一種流行的 PHP 框架，使建立 Web 應用程式更簡單、更快且需要更少的程式碼。
• Flask：基於 Werkzeug 和 Jinja 2 的 Python 微框架。
• CodeIgniter：功能強大且輕量級的 PHP 框架，專為需要簡單而優雅的工具包來創建功能齊全的 Web 應用程式的開發人員而構建。

任務運行器/套件管理器

任務運行器就是為了自動化您的工作流程。例如，您可以建立一個任務並自動縮小 JavaScript。然後建置並組合任務以加快開發時間。套件管理器會追蹤您使用的所有套件，並確保它們是最新的以及您需要的特定版本。

• Grunt：關於自動化的 JavaScript 任務執行器。
• Gulp：讓事情變得簡單，使複雜的任務易於管理，同時自動化和增強您的工作流程。
• npm：JavaScript 套件管理器。
• Bower：網路套件管理器。管理包含 HTML、CSS、JavaScript、字型甚至圖片檔案的元件。
• webpack：現代 JavaScript 應用程式的模組捆綁器。

語言/平台

所有 Web 開發工具的背後都是一種語言。程式語言是一種正式的構造語言，旨在與電腦進行通訊並創建可以控制行為的程式。是的，我們意識到其中一些可能並不總是被稱為語言。

• PHP：流行的通用腳本語言，特別適合 Web 開發。
• NodeJS：基於 V8 的事件驅動 I/O 伺服器端 JavaScript 環境。
• JavaScript：HTML 和網路的程式語言。
• HTML5：標記語言，HTML和XHTML的最新版本。
• Python：可讓您快速工作並更有效地整合系統的程式語言。
• Ruby：一種動態的開源程式語言，著重簡單性和生產力。
• Scala：Scala 是一種純種的物件導向語言，允許逐步、輕鬆地遷移到更具功能性的風格。
• SQL：代表關聯式資料庫所使用的結構化查詢語言。
• Golang：開源程式語言，可以輕鬆建立簡單、可靠、有效率的軟體。
• Rust：運行速度極快、防止段錯誤並確保線程安全的系統程式語言。
• Elixir：動態的函數式語言，旨在建立可擴展且可維護的應用程式。
• TypeScript：開源程式語言，是 JavaScript 的超集，可編譯為純 JavaScript。

資料庫

資料庫是儲存資訊的集合**，**以便可以檢索、管理和更新。

• MySQL：世界上最受歡迎的開源資料庫之一。
• MariaDB：由 MySQL 的原始開發人員製作。 MariaDB 作為開源資料庫伺服器也變得非常流行。
• MongoDB：下一代資料庫，可讓您建立前所未有的應用程式。
• Redis：一種開源記憶體資料結構存儲，用作資料庫、快取和訊息代理。
• PostgreSQL：一個強大的開源物件關聯式資料庫系統。

CSS 預處理器

CSS預處理器基本上是一種腳本語言，它會擴展 CSS，然後將其編譯為常規 CSS。

• Sass：一個非常成熟、穩定、強大的專業級 CSS 擴充。
• Less：作為 CSS 的擴展，同時向後相容於 CSS。這使得學習 Less 變得輕而易舉，如果有疑問，可以讓你回到普通 CSS。
• Stylus：一種新語言，提供高效、動態且富有表現力的 CSS 生成方式。支援縮排語法和常規 CSS 樣式。

如果您剛開始使用 CSS 預處理器，您可能會想要先使用第三方編譯器（例如下面的編譯器）來簡化轉換。

文字編輯器/程式碼編輯器

無論您是做筆記、編碼還是編寫 Markdown，優秀的文字編輯器都是我們日常生活的一部分！

• Atom：一款現代、平易近人但核心可破解的文字編輯器。我們的最愛之一！
• Sublime Text：一個複雜的文字編輯器，用於程式碼、標記和散文，具有出色的效能。
• Notepad++：一個免費的原始碼編輯器，支援在 MS Windows 環境下運行的多種程式語言。
• Visual Studio Code：重新定義和最佳化程式碼編輯，以建立和偵錯現代 Web 和雲端應用程式。
• TextMate：OS X 的程式碼和標記編輯器。
• Coda 2：適用於 OS X 的快速、簡潔且功能強大的文字編輯器。
• WebStorm：輕量級但功能強大的 IDE，非常適合使用 Node.js 進行複雜的客戶端開發和伺服器端開發。
• Vim：一個高度可配置的文字編輯器，旨在實現高效的文字編輯。
• Brackets：一個輕量級且功能強大的現代文字編輯器；用 JavaScript、HTML 和 CSS 寫。
• Emacs：一個可擴展、可自訂的文字編輯器，具有內建功能，可協助快速修改文字和程式碼。
• Dreamweaver：但是，Dreamweaver 不是典型的程式碼編輯器，它可用於透過視覺化介面編寫程式碼和建立網站。透過這個簡單的 Dreamweaver 教學了解更多。
• SpaceMacs：一種文字編輯器，設計可在 Emacs 和 Vim 編輯器模式下運作。

瀏覽器開發者工具

瀏覽器開發工具對於偵錯、分析和最佳化 Web 應用程式是不可或缺的。它們提供了一系列功能來即時檢查和操作網頁的 HTML、CSS 和 JavaScript。

• Chrome DevTools：一組直接內建於 Google Chrome 瀏覽器的 Web 開發人員工具。它允許開發人員調試 JavaScript、分析頁面效能、即時編輯 HTML 和 CSS 等等。
• Firefox 開發者工具：與 Chrome 開發者工具類似，Firefox 開發者工具為 Web 開發者提供了一套除錯和編輯工具，包括 JavaScript 偵錯器、網路監視器和頁面檢查器。
• Safari Web Inspector：Web Inspector 直接整合到 Safari 瀏覽器中，提供了一系列用於偵錯和優化 Web 內容的工具，包括 DOM 檢查器、JavaScript 偵錯器和時間軸分析器。
• Microsoft Edge 開發者工具：Microsoft Edge 的開發者工具提供與 Chrome 開發者工具和 Firefox 開發者工具類似的功能，包括偵錯、效能分析和 DOM 檢查。
• Opera 開發者工具：Opera 的開發者工具為 Web 開發提供了多種功能，包括 JavaScript 偵錯器、效能分析器和 CSS 檢查器。

版本控制系統

版本控制系統是管理原始碼隨時間變化的重要工具。它們支援開發人員之間的協作、追蹤變更並促進新功能的部署。

• Git：一種分散式版本控制系統，旨在追蹤軟體開發過程中原始程式碼的變更。 Git 因其速度、效率和對分散式工作流程的支援而被廣泛使用。
• GitHub：一個建立在 Git 之上的基於 Web 的平台，GitHub 提供軟體開發專案託管、協作工具以及程式碼審查、問題追蹤和專案管理功能。
• GitLab：與 GitHub 類似，GitLab 提供基於 Web 的 Git 儲存庫管理器，具有 CI/CD、問題追蹤和程式碼審查功能。 GitLab 提供自架和雲端託管版本。
• Bitbucket：Bitbucket 由 Atlassian 開發，是一個 Git 儲存庫管理解決方案，提供程式碼協作、持續整合和部署管道的功能。它支援 Git 和 Mercurial 版本控制系統。

整合開發環境 (IDE)

整合開發環境 (IDE) 提供了一套全面的軟體開發工具，包括程式碼編輯、偵錯和專案管理功能。

• Visual Studio：Visual Studio 由 Microsoft 開發，是一個用於建立 Web、行動和桌面應用程式的整合開發環境。它支援多種程式語言，包括 C#、JavaScript 和 Python。
• IntelliJ IDEA：JetBrains 的 IntelliJ IDEA 是一種流行的 Java 開發 IDE，支援其他語言，例如 Kotlin、JavaScript 和 TypeScript。它提供程式碼分析、重構和版本控制整合等功能。
• Eclipse：Eclipse 是一種廣泛使用的 Java 開發的開源 IDE，但它也透過外掛程式支援其他程式語言。它提供程式碼導航、調試和專案管理等功能。
• Visual Studio Code：儘管名稱與 Visual Studio 相似，但 Visual Studio Code (VS Code) 是 Microsoft 開發的輕量級開源程式碼編輯器。它支援多種程式語言和擴展，使其能夠針對不同的開發工作流程進行高度客製化。
• PyCharm：另一個 JetBrains 產品，PyCharm 是專為 Python 開發設計的 IDE。它提供程式碼補全、偵錯等功能，並支援 Django 和 Flask 等 Web 開發框架。

這些工具和資源可以極大地提高 Web 開發人員的生產力和效率，使他們能夠建立高品質的 Web 應用程式和網站。無論您是初學者還是經驗豐富的開發人員，保持最新工具和技術的更新對於在不斷發展的 Web 開發領域取得成功至關重要。

Markdown 編輯器

Markdown 是一種純文字標記語言，使用簡單的語法，然後可以即時轉換為 HTML。這與所見即所得編輯器不同。Markdown 編輯器有時被稱為介於 WYSIWYG 和簡單編寫程式碼之間的編輯器。

• StackEdit：免費的線上豐富 Markdown 編輯器。
• Dillinger：一個線上雲端支援、HTML5、充滿流行語的 Markdown 編輯器。
• Mou：Mac OS X 上開發人員的 Markdown 編輯器。

我們上面提到的一些文字編輯器也支援 Markdown。例如，有一個atom的markdown預覽包。

圖示

幾乎每個 Web 開發人員，尤其是前端開發人員都會在某個時候需要為他們的專案提供圖示。以下是一些免費和付費高品質圖示的優質資源。

• Font Awesome：可立即自訂的可縮放向量圖示 - 大小、顏色、陰影以及任何可以使用 CSS 功能完成的操作。
• IconMonster：一個免費、高品質、巨大且不斷增長的簡單圖標來源。我們的最愛之一！
• Icons8：由單一設計團隊創建的高度可自訂圖示的廣泛清單。
• IconFinder：Iconfinder 為數百萬設計師和開發人員提供精美的圖標。
• Fontello：使用圖示建立自訂字體的工具。
• 名詞項目：超過一百萬個精選圖示。提供免費和付費版本​​，以實現更大的可自訂性。

Git 用戶端/Git 服務

Git 是一個用於軟體和 Web 開發的原始碼管理系統，以分散式修訂控製而聞名。與團隊合作時，使用git 用戶端將程式碼變更從開發推送到生產是維持混亂並確保事物經過測試的一種方法，這樣它們就不會破壞您的即時 Web 應用程式或網站。

• SourceTree：適用於 Windows 或 Mac 的免費 Git 和 Mercurial 用戶端。 Atlassian 也製作了一個非常酷的團隊 Git 用戶端，名為 Bitbucket。
• GitKraken（測試版）：一個免費、直覺、快速且美觀的跨平台 Git 用戶端。
• Tower 2：使用 Git 進行版本控制 - 變得簡單。在一個美麗、高效、強大的應用程式中。
• GitHub 用戶端：為 GitHub 和 GitHub Enterprise 上的專案做出貢獻的無縫方式。
• Gogs：基於 Go 語言的輕鬆自架 Git 服務。
• GitLab：免費託管您的私人和公共軟體專案。

網路伺服器

您最終使用的 Web 伺服器通常取決於個人偏好、功能或預先存在的基礎架構的組合。 Nginx 和 Apache 是兩個最廣泛使用的 Web 伺服器，但是，還有其他選項。

• Nginx：一個開源且高效能的 Web 伺服器。可以很好地處理靜態內容並且是輕量級的。
• Apache：目前為幾乎 50% 的網站提供支援。周圍有更大的社區和大量的模組選擇。
• IIS：由 Microsoft 建立的可擴充 Web 伺服器。提供出色的安全性和企業支持，因此不是開源的。
• Caddy：一個相對較新的網頁伺服器。它是一個具有自動 HTTPS 功能的開源 HTTP/2 Web 伺服器。

要對當今最大的 Web 伺服器進行完整比較，請查看我們的Nginx 與 Apache文章。

API工具

Web 開發人員通常每天都會處理 API。它們在當今的 Web 開發環境中至關重要，但有時在監控、創建或組合方面可能難以處理。值得慶幸的是，有多種工具可以讓 API 的使用更有效率。

• Runscope：API 效能測試、監控和偵錯解決方案。
• Zapier：連接各種應用程式和服務的 API，以實現工作流程自動化並自動化。
• Postman：完整的API開發環境。從設計、測試、監控到發布的一切。
• SoapUI：進階 REST 和 SOAP 測試工具。能夠進行功能測試、安全測試、效能測試等。

本地開發環境

根據您正在運行的作業系統或您目前可以存取的計算機，可能有必要啟動一個快速的本機開發環境。有許多免費實用程式將 Apache、mySQL、phpmyAdmin 等捆綁在一起。這是在本機電腦上測試某些內容的快速方法。其中許多甚至還有便攜式版本。

• XAMPP：完全免費、易於安裝的 Apache 發行版，包含 MariaDB、PHP 和 Perl。
• MAMP：在 OS X 或 Windows 上只需幾秒鐘即可完成本機伺服器環境。
• WampServer：Windows Web 開發環境。它允許您使用 Apache2、PHP 和 MySQL 資料庫建立 Web 應用程式。
• Vagrant：建立和配置輕量級、可重複且可移植的開發環境。
• Laragon：一種在 Windows 上創建隔離開發環境的快速而簡單的方法。包括 Mysql、PHP Memcached、Redis、Apache，非常適合處理 Laravel 專案。

差異檢查器

差異檢查器可以幫助您比較文件之間的差異，然後合併變更。其中許多工作都可以透過 CLI 完成，但有時查看更直觀的表示會很有幫助。

• Diffchecker：線上比較工具，用於比較兩個文字檔案之間的文字差異。如果您在旅途中並且需要快速比較某些內容，那就太好了。
• Beyond Compare：一個使用簡單、強大的命令來比較文件和資料夾的程序，這些命令專注於您感興趣的差異，並忽略您不感興趣的差異。

我們上面提到的許多免費文字編輯器也有插件或擴展，可讓您比較或比較您的檔案。

程式碼共享/程式碼實驗

總是有這樣的時候，當您與其他開發人員一起使用 Skype 或 Google Hangout 時，您希望他或她快速查看您的程式碼。有一些很棒的團隊工具可以共享程式碼，例如 Slack，但如果他們不是您團隊的成員，還有一些很棒的快速替代品。請記住不要共享任何安全的內容。

• JS Bin：用於實驗網路語言的工具。特別是 HTML、CSS 和 JavaScript、Markdown、Jade 和 Sass。
• JSfiddle：自訂環境，用於在瀏覽器內測試 JavaScript、HTML 和 CSS 程式碼。
• codeshare：與其他開發人員即時分享程式碼。
• Dabblet：用於快速測試 CSS 和 HTML 程式碼片段的互動式遊樂場。

協作工具

每個優秀的開發團隊都需要一種保持聯繫、協作和高效的方式。現在很多團隊都遠距工作。 Tenten的團隊實際上分佈在許多不同的大陸。以下這些工具可以幫助員工簡化他們的開發工作流程。

• Slack：團隊導向的訊息應用程序，其使命是讓您的工作生活更簡單、更愉快、更有效率。
• Trello：靈活且直觀的方式與任何人一起組織任何事情。我們最喜歡的之一，我們在 Tenten 使用它！
• Glip：具有整合任務管理、視訊會議、共享行事曆等功能的即時訊息傳遞。
• Asana：團隊協作工具，供團隊追蹤他們的工作和結果。
• Jira：專為軟體團隊的每個成員而設計，用於規劃、追蹤和發佈出色的軟體或 Web 應用程式。

靈感

我們都在某個時刻需要靈感。特別是對於前端開發人員來說，時不時地看看其他人在做什麼可能是有益的。這可以成為靈感、新想法的重要來源，並確保您的 Web 應用程式或網站不會落後於時代。

• CodePen：展示您的最新創作並獲得回饋。為那個討厭的錯誤建立一個測試案例。為您的專案尋找範例設計模式和靈感。
• Dribble：設計師社區，分享他們的工作、流程和專案的螢幕截圖。
• Behance：另一個社群驅動的資源，使用者可以在其中展示和發現創意作品。

網站速度測試工具

網站的速度可能是其成功的關鍵因素。載入速度更快的網站可以受益於更高的 SEO 排名、更高的轉換率、更低的跳出率以及更好的整體用戶體驗和參與度。利用許多可用於測試網站速度的免費工具非常重要。

• 網站速度測試：由騰訊開發的頁面速度測試，包括瀑布細分和網站預覽。
• Google PageSpeed Insights：PageSpeed Insights 分析網頁內容，然後產生建議以提高該頁面的速度。
• Google Chrome DevTools：Google Chrome 內建的一組 Web 創作和除錯工具。
• Dotcom-Tools 速度測試：在全球 25 個地點的真實瀏覽器中測試您網站的速度。
• WebPageTest：使用真實的瀏覽器（IE 和 Chrome）以真實的消費者連線速度從全球多個位置運行免費的網站速度測試。
• Pingdom：測試該頁面的載入時間，分析它並找到瓶頸。
• GTmetrix：讓您深入了解網站的載入情況，並提供如何優化網站的可行建議。

您可以在我們關於網站速度服務的貼文中看到更深入的清單。

網路開發社群

每個 Web 開發人員都曾經歷過。他們遇到了問題，他們會怎麼做？好吧，他們去谷歌尋找快速答案。網路提供瞭如此多的內容，讓我們可以輕鬆地在出現問題時進行診斷和故障排除。請參閱下面一些優秀的Web 開發社群。

• Stack Overflow：由 470 萬程式設計師組成的社區，就像您一樣，互相幫助。
• 前端：前端開發人員可以提出問題、分享有趣的連結並向社群其他成員展示他們的工作的地方。
• Hashnode：軟體開發人員相互聯繫和學習程式設計的全球社群。
• Refind：由創辦人、駭客和設計師組成的社區，他們收集和分享網路上的最佳連結。
• Facebook WordPress 前端開發人員小組：WordPress 前端開發人員小組是開發人員提出問題、分享他們的工作、討論新興趨勢和協作的小組。
• LinkedIn 網頁設計與開發專業小組：為專業網頁設計師、網頁開發人員和網頁大師提供網頁和資訊分享資源。
• LinkedIn 網站開發小組：網站設計與程式設計。
• LinkedIn PHP 開發人員小組：PHP、Mysql、Drupal、Joomla、Zend、Cake、MVC。
• **Webdeveloper.com：Web**開發人員和設計人員學習如何建立網站、如何使用 HTML、Java 和 JavaScript 進行程式設計。
• Sitepoint 論壇：Web 開發討論。
• /r/perfmatters：有關 Web 效能和 Web 開發的 #1 Reddit 子版塊。
• /r/webdev：Web 開發人員的新功能。

網頁開發通訊

• wdrl.info：手工製作、精心挑選的 Web 開發相關資源清單。_通常每週_策劃並發布。
• webopsweekly.com：_針對 Web 開發人員的每週_通訊，重點在於從瀏覽器到硬體的 Web 操作、基礎設施、應用程式部署、效能和工具。
• webtoolsweekly.com：專注於工具的前端開發和網頁設計電子報。每期都有一個簡短的提示或教程，然後是_每週_對各種應用程式、腳本、插件和其他資源的匯總。
• smashingmagazine.com：Smashing Magazine 是一本專業網頁設計師和開發人員的線上雜誌。_每個第二個星期二_發送有用的提示和寶貴的資源。
• fridayfrontend.com：前端開發連結每天在推特上發布，_每週_透過電子郵件發送。
• /dev Tips _：每週_在您的收件匣中收到 gif 形式的開發人員提示。

正如您所看到的，有數百種 Web 開發工具和資源可協助您簡化開發工作流程，並有望協助您提高工作效率。同樣，我們無法列出所有工具或資源，但如果我們忘記了一些重要的內容，請告訴我們。

原文: 100+ Awesome Web Dev Tools & Resources for 2024: Stay Productive & Informed