從項目管理到代碼編輯器，這些必要的免費工具幫助新手和經(jīng)驗豐富的 Web 開發(fā)人員簡化工作流程并提高代碼質(zhì)量。

譯自8 Free Tools Every Web Developer Should Know，作者 Jack Wallen。

你是Web開發(fā)者，還是正在踏上成為Web開發(fā)者的征程？無論哪種情況，你可能都在尋找能夠提升技能的工具。幸運的是，你并不總是需要花費很多錢才能獲得所需的工具。事實上，有很多免費工具可供Web開發(fā)者使用。

下面提到的某些工具是特定于Web開發(fā)的，而其他工具則更通用，但仍然適用。

因此，事不宜遲，讓我們深入了解這些工具。

Bluefish編輯器

Bluefish已經(jīng)存在很久了。我相當肯定我曾經(jīng)見過一只霸王龍使用這個應用程序。Bluefish編輯器是什么？簡單來說，它是一個功能齊全的HTML編輯器，適用于Linux、macOS和Windows。Bluefish包括多文檔界面、項目支持、多線程支持、代碼片段、無限撤銷/重做、內(nèi)聯(lián)拼寫檢查器、站點上傳/下載、代碼塊折疊、高度匹配、自動完成、全屏編輯等等。所有這些功能都可以在一個簡單的UI中找到，該UI具有可拆分菜單、對話框和向?qū)?，并且符合GNOME和KDE Plasma桌面環(huán)境。Bluefish唯一的缺點是它不是所見即所得編輯器。

Trello

這似乎是一個奇怪的補充，但是如果你正在從事一個大型項目，你將需要有管理該項目的方法，而使用免費的Trello帳戶是最好的方法。我已經(jīng)使用Trello多年了（用于多個項目），沒有任何東西能夠讓我更好地保持組織有序。我使用Trello中的看板功能，自從開始使用它以來，甚至都沒有費心去嘗試競爭對手的產(chǎn)品。Trello不僅有助于保持你的組織有序，你還可以與他人（例如其他開發(fā)者或客戶）共享你的看板。

GitHub

我可能一句關(guān)于GitHub的話都不用說，你仍然會明白它為什么在這個列表中。如果你正在尋找協(xié)作HTML項目最佳方式，GitHub是市場上最好的選擇之一。GitHub允許你將項目保存到遠程存儲庫，同時保留完全控制權(quán)。借助自動化和更高的安全性，GitHub也成為一個優(yōu)秀的項目管理平臺。

Apache NetBeans

如果你計劃在你的網(wǎng)站中使用Java，你可能需要考慮Apache NetBeans。借助強大的Java IDE，你將能夠更好地構(gòu)建基于Java的Web應用程序。Apache NetBeans包括版本控制、可自定義的UI等等。Apache Netbeans支持Java、JavaScript、PHP、HTML5、CSS等等，并且可以安裝在Linux、macOS和Windows上。Apache NetBeans的一個缺點是它有一個相當陡峭的學習曲線，所以準備好花大量時間來掌握這個工具。

Node.js

如果你希望你的網(wǎng)站或應用程序生成動態(tài)頁面內(nèi)容、處理服務器上的文件、收集表單數(shù)據(jù)或修改數(shù)據(jù)庫中的數(shù)據(jù)，那么Node.js是必不可少的。Node.js 是一個基于 Chrome V8 引擎構(gòu)建的 JavaScript 運行時環(huán)境。本質(zhì)上，Node.js 是一個用于在服務器端應用程序上執(zhí)行代碼的跨平臺環(huán)境。Node.js是一個框架，它使得在Web瀏覽器之外運行JavaScript成為可能，并且可以同時處理大量請求，以防止I/O瓶頸并安全可靠地實現(xiàn)并發(fā)。

Web Developer

如果您想開發(fā)兼容所有瀏覽器的網(wǎng)站，則需要考慮您的網(wǎng)站在沒有 JavaScript 的情況下如何呈現(xiàn)。出于安全原因，一些用戶會禁用 JavaScript，因此如果他們訪問一個依賴 JavaScript 的網(wǎng)站，體驗將與他們的預期不符。如果您擔心為所有人提供可訪問的網(wǎng)站，Web Developer 瀏覽器擴展程序（Chrome/Firefox）可以向您展示您的網(wǎng)站在沒有 JS 的情況下如何呈現(xiàn)。Web Developer 還允許您禁用 CSS 代碼，甚至可以測試頁面中的圖像和表單。

前端清單

前端清單是一款工具，可以用作您在將項目交給客戶之前應處理的任務清單。本質(zhì)上，您為項目命名，輸入標題或 URL，添加您的姓名，然后單擊“生成報告”。該報告涵蓋標題、HTML、CSS、JavaScript、網(wǎng)絡字體、圖像、可訪問性、性能、SEO 等方面，并根據(jù)其內(nèi)部清單對您的網(wǎng)站表現(xiàn)進行評分。如果您希望您的網(wǎng)站符合行業(yè)標準，則應將此工具視為必備工具。

CSS 查看器

如果您喜歡通過檢查其他網(wǎng)站來學習，CSS Peeper（僅限Chrome）是一款很棒的瀏覽器擴展程序。CSS Peeper 可讓您深入了解網(wǎng)頁，例如行高、字體、按鈕大小等等。您甚至可以檢查對象、顏色或資源中隱藏的 CSS 樣式。訪問頁面后，單擊 CSS Peeper 圖標，然后單擊頁面的元素或部分。您將看到有關(guān)該元素的信息列表，例如對象屬性、字體和顏色。如果您想了解其他網(wǎng)站如何使用字體、顏色和圖像，這是一個很棒的工具。

如果您對您的 Web 開發(fā)人員職業(yè)生涯認真對待，您應該認真考慮研究這些工具中的每一個，因為它們會使您的工作更輕松、更可重復。