1630 字
8 分鐘
Web 開發工具回顧

🛠️ Web 開發工具#

作為一名 Web 應用工程師,我不斷尋找能夠提高我的技能和生產力的工具。 以下是基本工具的更新列表,其中包含 2024 年和 2025 年的最新進展。


現有工具#

🛠️ Wappalyzer#

IMPORTANT

[Purpose] 識別網站上使用的技術。 :::為什麼使用它:幫助識別 Web 服務器、CMS、框架等。 它非常適合從其他網站學習並發現可能適合您自己的項目的技術。


🎨 手寫筆#

IMPORTANT

[Purpose] 自定義網站外觀。 :::為什麼使用它:在任何網站上自定義 CSS 樣式。 對於試驗設計和修復字體大小或配色方案等佈局問題很有用。


🧑‍💻 JSON 視圖#

IMPORTANT

[Purpose] 格式化並驗證 JSON 數據。 :::為什麼使用它:幫助讀取和理解來自 API 的 JSON 數據。 整齊地格式化數據並幫助調試語法或邏輯錯誤。


📜 HTML 驗證器#

IMPORTANT

[Purpose] 檢查 HTML 代碼是否有錯誤。 :::為什麼使用它:確保 HTML 代碼有效並遵循標準。 有助於提高代碼質量和網站性能。


📏 測量一下#

IMPORTANT

[Purpose] 測量網頁上的元素。 :::為什麼使用它:允許精確測量網站上的圖像、文本、按鈕和其他元素。 對於優化佈局和設計很有用。


🌐 REST 客戶端#

IMPORTANT

[Purpose] 測試和調試 API。 :::為什麼使用它:允許您向任何 API 發送 HTTP 請求、查看響應並分析狀態代碼和數據,從而幫助進行 API 測試和調試。


🎨 ColorZilla#

IMPORTANT

[Purpose] 選擇並分析顏色。 :::為什麼使用它:幫助為您的網站選擇顏色並分析其他網站的配色方案。 非常適合創建一致、有吸引力的設計。


🧪 硒 IDE#

IMPORTANT

[Purpose] 自動化網絡測試。 :::為什麼使用它:在瀏覽器中記錄和回放自動化測試。 幫助確保您的網站正常運行並節省手動測試時間。


🛠️ 網頁開發人員#

IMPORTANT

[Purpose] 操縱和檢查網站。 :::為什麼使用它:提供禁用 JavaScript、檢查 cookie、查看源代碼、驗證鏈接等功能,這些功能對於調試和增強網站都至關重要。


🔤WhatFont#

IMPORTANT

[Purpose] 識別網頁上的字體。 :::為什麼使用它:快速識別網站上使用的字體並顯示字體屬性。 對於為您自己的項目選擇和應用正確的字體很有用。


🌍WhatRuns#

IMPORTANT

[Purpose] 發現網站使用的技術。 :::為什麼使用它:識別任何網站上使用的插件、小部件、分析和框架。 幫助跟踪趨勢並發現改進您自己的項目的工具。


適用於前端、後端和全棧開發人員的其他工具#


📱 React 開發者工具#

IMPORTANT

[Purpose] 調試 React 應用程序。 :::為什麼使用它:對於調試 React 應用程序至關重要,允許您檢查組件層次結構、狀態和屬性,幫助優化用戶界面。


🖥️ Redux 開發工具#

IMPORTANT

[Purpose] 調試 Redux 狀態更改。 :::為什麼使用它:跟踪 Redux 支持的應用程序中的操作和狀態變化。 非常適合使用 React 和 Redux 的全棧開發人員。


🧑‍💻 Vue.js 開發工具#

IMPORTANT

[Purpose] 調試 Vue.js 應用程序。 :::為什麼使用它:提供用於檢查 Vue 組件、Vuex 狀態等的工具,使其成為使用 Vue.js 的前端開發人員不可或缺的工具。


🐍 郵遞員#

IMPORTANT

[Purpose] API開發和測試。 :::為什麼使用它:可以輕鬆地向 API 發送請求、查看響應和測試 API 端點。 對於後端開發人員或使用 REST API 的任何人來說都是必不可少的。


🖧 實時服務器#

IMPORTANT

[Purpose] 啟動本地開發服務器。 :::為什麼使用它:立即啟動本地服務器並進行實時重新加載,非常適合在前端開發期間需要快速反饋的全棧開發人員。


🌐 GitHub#

IMPORTANT

[Purpose] 增強 GitHub 工作流程。 :::為什麼使用它:直接從瀏覽器提供通知、拉取請求和問題等功能,使協作和管理存儲庫變得更加容易。


⚙️ Gitpod#

IMPORTANT

[Purpose] 在雲中啟動開發環境。 :::為什麼使用它:為全棧開發人員提供基於雲的 IDE,讓您可以輕鬆地從任何設備進行編碼並與 GitHub 存儲庫同步。


📑 JSON 格式化程序#

IMPORTANT

[Purpose] 格式化和美化JSON數據。 :::為什麼使用它:自動格式化 JSON 數據,使其更具可讀性且更易於調試。 對於使用 API 的後端開發人員特別有用。


🖥️失眠#

IMPORTANT

[Purpose] API設計和測試。 :::為什麼使用它:用於測試 RESTful API 和 GraphQL 的強大工具。 它支持調試、請求和響應,並允許創建複雜的 API 工作流程。 它是使用 API 驅動的應用程序的開發人員的必備工具。


### GitLab

IMPORTANT

[Purpose] 在代碼存儲庫上進行協作。 :::為什麼使用它:基於 Git 的版本控制的流行平台,允許開發人員管理項目、跟踪問題以及與團隊協作。 GitLab 非常適合開源和私有項目。


🔧 代碼博格#

IMPORTANT

[Purpose] Git 存儲庫託管。 :::為什麼使用它:Codeberg 是 GitHub 的社區驅動替代品,提供了一個更加開源的平台來託管 Git 存儲庫。 對於想要替代主流服務的開發人員來說,這是一個不錯的選擇。


2024-2025 年推出的新工具#


🤖 OpenAI 響應 API#

IMPORTANT

[Purpose] 開發先進的人工智能代理。 :::為什麼使用它:使開發人員能夠構建能夠執行複雜任務而無需直接人工干預的人工智能代理,從而增強應用程序的自動化和效率。 oaicite:0{索引=0}


🛠️ IDX 項目#

IMPORTANT

[Purpose] 支持人工智能的基於瀏覽器的開發環境。 :::為什麼使用它:由 Google 開發的在線 IDE,基於 Visual Studio Code,內置由 Gemini 提供支持的生成式 AI 助手,以及 iOS 和 Android 模擬器,簡化了開發流程。 oaicite:1


🌐OpenSilver 框架#

IMPORTANT

[Purpose] 使用 C# 和 XAML 開發豐富的 Internet 應用程序。 :::為什麼使用它:作為 Microsoft Silverlight 後繼者的開源框架,允許開發人員利用 HTML5、CSS3 和 WebAssembly 等現代 Web 標準將現有 Silverlight 應用程序遷移到 Web,而無需重寫代碼庫。 oaicite:2


🦀 金牛座#

IMPORTANT

[Purpose] 創建跨平台桌面和移動應用程序。 :::為什麼使用它:一個開源框架,支持輕量級、安全的開發

oaicite:3
Web 開發工具回顧
https://banije.vercel.app/zh_TW/posts/developertools/
作者
ibra-kdbra
發佈於
2024-01-08
許可協議
CC BY-NC-SA 4.0