前端開發(fā)是一個相當(dāng)復(fù)雜的方向，至少就大項目而言，你很難僅用瀏覽器和編輯器完成工作。這里列出了我在開發(fā)過程中用到的工具。我希望這個列表能幫助其他人發(fā)現(xiàn)一些可以用在工作流程中的好工具。
必備工具
這些是我日常使用的工具，缺了它們我很難高效工作。
VS Code?—— 我選擇的編輯器是微軟出品的 VS Code。免費、輕量（和 WebStorm 之類的 IDE 相比），大量開箱即用的特性，豐富的擴(kuò)展。
瀏覽器 —— 我的默認(rèn)瀏覽器是 Firefox，有時切換到 Chrome 進(jìn)行開發(fā)。我也安裝了其他瀏覽器，以供測試之用。
DevDocs?—— 這個網(wǎng)頁應(yīng)用匯聚了各種項目的文檔，還支持離線使用。當(dāng)我需要查詢文檔時，一般會訪問這個站點。我主要用它查詢 JS 和 DOM/瀏覽器方面的文檔。我真沒找到什么能和它媲美的工具（詳盡而易于搜索）。你應(yīng)該看一看。
Google?—— 沒錯，我經(jīng)常上網(wǎng)搜索。關(guān)于某個 bug 的信息，如何做某件事（有時會是很基礎(chǔ)的事情），軟件包和軟件庫的示例代碼和文檔（如果 DevDocs 沒收錄），我都會上網(wǎng)搜一搜。
MDN?—— 對任何 web 開發(fā)者來說這都是非常棒的資源。這個站點的部分內(nèi)容可以在之前提到的 DevDocs 上找到，不過有些頁面只有 MDN 上有。我主要用它查詢一些關(guān)于可訪問性的內(nèi)容，上面有不少討論這一主題的文章。
StackOverflow?—— 經(jīng)常 google 到上面的內(nèi)容。如果有問題，多半能在上面找到答案。
GitHub?—— 某個軟件包我有疑問，或者想知道關(guān)于它的更多信息，我會到它的 GitHub 倉庫去翻 issue 和代碼，通常能找到問題的答案，就像 StackOverflow。據(jù)我個人的經(jīng)驗，如果有關(guān)于某個特定軟件包的問題，在 GitHub 上翻到相關(guān) issue 的幾率要高于在 StackOverflow 上找到相關(guān)問題（像 React 這類特別流行的庫例外）。當(dāng)然，我也使用 GitHub 的版本控制功能。
CSS
CSS-Tricks?—— 你能在上面找到大量有趣的文章和竅門。這個網(wǎng)站上也有一個指南（Guides）欄目，包含關(guān)于特定 HTML、CSS、JS 概念的深入講解。我常常訪問這個站點更新關(guān)于網(wǎng)格布局的知識。不過其他指南也非常棒。這個站點絕對值得一看。
CSS Reference?—— 如果需要更新 CSS 知識或者查下不熟悉、不常用的屬性，我會訪問這個站點。上面對每個 CSS 屬性的講解很深入，給出的示例也很清楚，便于你理解這些屬性并應(yīng)用于自己的項目。站點的作者是?Sara Soudain。
Can I Use?—— 如果你在意瀏覽器兼容性，希望負(fù)責(zé)任地使用前沿特性（漸進(jìn)增強(qiáng)），那么這是不可或缺的工具。
性能優(yōu)化
SVGOMG?—— 從設(shè)計師那里收到一份為 web 優(yōu)化的 SVG 文件，這種事情實在太罕見。所以我會用 SVGOMG 優(yōu)化 SVG，效果十分驚人。這是?SVGO?的網(wǎng)頁版，所以你也可以使用相應(yīng)的命令行工具壓縮 SVG。
Shrinkme.app?—— 使用這個網(wǎng)頁應(yīng)用優(yōu)化圖像文件十分快捷方便。開箱即用，支持批量上傳，效果相當(dāng)不錯。
Sqoosh?—— 需要將圖片壓縮到極致，或者創(chuàng)建 webp 格式的圖像文件的時候，我會使用這個網(wǎng)站。你可以用它提供的大量選項調(diào)出滿意的效果。你也可以用它縮放圖像或是轉(zhuǎn)換圖像格式。它用了很多前沿技術(shù)（當(dāng)初 Google Chrome 團(tuán)隊做這個工具是為了演示現(xiàn)代瀏覽器的功能），所以你需要使用 Chrome 或基于 Chromium 的瀏覽器（Opera、Brave 等）。我上次試過，在 Firefox 下這個站點并不能正常工作。
Icomoon app?—— 我需要創(chuàng)建定制圖標(biāo)集時會用這個工具?？梢赃x擇現(xiàn)有圖標(biāo)（免費圖標(biāo)和付費圖標(biāo)），也可以上傳自己的圖標(biāo)。接著就可以生成相應(yīng)的圖標(biāo)字體或 SVG 圖標(biāo)文件（今時今日，后者是一個更好的選擇）。
Google Fonts?—— 需要創(chuàng)建定制 web 字體時，我會首先訪問 Google Fonts。我通常會下載所需文件，然后自行托管，這樣性能更好。Google Fonts 有一個很棒的特性，允許只編碼需要用到的字符。
Glyphhanger?—— 減少文件大小是提升網(wǎng)站性能的最佳途徑之一。Web 字體經(jīng)常包含很多我們不需要的字形，所以我會用?Glyphhanger?子集化字體。你可以指定需要的 Unicode 區(qū)段和字符，Glyphanger 會創(chuàng)建一個只包含相應(yīng)字符的字體文件。它也可以將?.ttf?文件轉(zhuǎn)為其他更適合 web 的格式，比如?.woff?和?.woff2。需要花一點功夫正確使用這個工具，不過我覺得存在字體性能問題時，這是一個值得考慮的選項。
Lighthouse?—— 我在發(fā)布網(wǎng)頁前會進(jìn)行測試，Chrome 瀏覽器的 Lighthouse 是最常用的工具之一。它會檢查各方面的常見問題并給出評分，也會給出改進(jìn)提示。這是一個非常好的工具，可以初步檢查我在開發(fā)時是否遺漏了一些問題。
Font style matcher?—— 定制字體加載后會切換字體，如果你希望這個切換不容易察覺，那么可以使用這個字體風(fēng)格匹配器找到和定制字體類似的默認(rèn)字體。
可訪問性
VoiceOver —— macOS 的默認(rèn)屏幕閱讀器。需要花一點時間熟悉這個工具（我推薦這篇介紹文章），不過我努力在開發(fā)過程中時不時用下 VoiceOver。多虧這一點，我的項目中 aria 屬性和面向屏幕閱讀器的文本使用量大增。使用 VoiceOver 后你會驚訝地發(fā)現(xiàn)一些日常使用的網(wǎng)頁組件為屏幕閱讀器用戶提供的上下文信息少得可憐。
a11y guidelines?—— 通常我會盡量去找可訪問性良好的解決方案，不過有的時候還是不得不自己動手，這時我會參考這個頁面。這篇可訪問性指導(dǎo)原則詳細(xì)解釋了什么是可訪問性，為什么可訪問性很重要，如何實現(xiàn)。很多情況下，復(fù)制其中的示例代碼略作調(diào)整后即可應(yīng)用于實際項目。
WAI-ARIA specification?—— 我并不經(jīng)常閱讀規(guī)范。如果我在讀規(guī)范，那么往往是在讀這一篇。其中包含大量關(guān)于如何使用 aria 角色和屬性的有價值信息。要我說，任何嚴(yán)肅對待可訪問性的開發(fā)者，都需要讀下這篇規(guī)范。
值得一提
最后列下個人覺得挺好用但又沒那么常用的工具。
Responsive breakpoints generator?—— 手動創(chuàng)建響應(yīng)式圖像的多種變體很痛苦。用這個工具就很方便。
HTML Arrows?—— 各種符號的 Unicode 碼、HTML 十六進(jìn)制編碼、HTML 實體編碼、HTML 實體。
Char reference?—— 類似上一個工具，但顯示的信息更少，主要顯示 HTML 實體。
Typography cheatsheet?—— 講解常用的字體排印規(guī)則和問題。
Modular scale?—— 設(shè)計網(wǎng)頁時我通常使用這個工具選擇模塊化的縮放方案。如有興趣了解更多關(guān)于這個主題的內(nèi)容，請參考?A List Appart 上的這篇文章?和?Tim Brown 在 Build Conf 2010 上的演講。
CSS gradient generetor?—— 創(chuàng)建漸變背景的在線工具。
Smooth shadow generator?—— 為網(wǎng)站添加美觀的陰影。
Bezier curve generator?—— 定制 CSS 的立方貝塞爾曲線定時函數(shù)。
Easing functions?—— 各種緩動函數(shù)，可用于 CSS 動畫和變換。
ngrok?—— 需要向別人展示作品或者測試不同設(shè)備上的效果時，我會使用 ngrok。ngrok 可以將本地運行的服務(wù)暴露到公網(wǎng)上。不過有的時候配合 Browserstack 的 localhost 擴(kuò)展時不能工作。
sharing buttons?—— 如果你只需要一個簡單的分享按鈕，不想用 JS，不想折騰追蹤用戶的復(fù)雜邏輯，那么這個工具特別好用。
Unix timestamp converter?—— unix 時間戳轉(zhuǎn)換器。
CSS to JS converter?—— 可以將 CSS 轉(zhuǎn)成 JS，也可以將 JS 轉(zhuǎn)回 CSS?；?CSS-in-JS 庫開發(fā)時這個工具十分方便。
Browser default styles?—— 常見瀏覽器的默認(rèn)樣式。
結(jié)語
以上就是我在工作中使用的提高效率的工具，希望能幫你發(fā)現(xiàn)一些有用的工具。歡迎在?Twitter?上向我反饋，包括推薦其他好用的工具。
如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃，可以加入前端學(xué)習(xí)交流q-u-n-：545667817?在里面可以與大神一起交流并走出迷茫。新手、進(jìn)階?？蛇M(jìn)群免費領(lǐng)取學(xué)習(xí)資料，看看前輩們是如何在編程的世界里傲然前行。
