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

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

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

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

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

Bluefish編輯器

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

Trello

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

GitHub

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

Apache NetBeans

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

Node.js

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

Web Developer

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

前端清單

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

CSS 查看器

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

如果您對(duì)您的 Web 開發(fā)人員職業(yè)生涯認(rèn)真對(duì)待，您應(yīng)該認(rèn)真考慮研究這些工具中的每一個(gè)，因?yàn)樗鼈儠?huì)使您的工作更輕松、更可重復(fù)。