前端開發(fā)是一個相當復雜的方向，至少就大項目而言锁摔，你很難僅用瀏覽器和編輯器完成工作廓旬。這里列出了我在開發(fā)過程中用到的工具。我希望這個列表能幫助其他人發(fā)現(xiàn)一些可以用在工作流程中的好工具谐腰。
必備工具
這些是我日常使用的工具孕豹，缺了它們我很難高效工作。
VS Code?—— 我選擇的編輯器是微軟出品的 VS Code十气。免費励背、輕量（和 WebStorm 之類的 IDE 相比），大量開箱即用的特性砸西，豐富的擴展叶眉。
瀏覽器 —— 我的默認瀏覽器是 Firefox址儒，有時切換到 Chrome 進行開發(fā)。我也安裝了其他瀏覽器衅疙，以供測試之用莲趣。
DevDocs?—— 這個網頁應用匯聚了各種項目的文檔，還支持離線使用饱溢。當我需要查詢文檔時喧伞，一般會訪問這個站點。我主要用它查詢 JS 和 DOM/瀏覽器方面的文檔绩郎。我真沒找到什么能和它媲美的工具（詳盡而易于搜索）潘鲫。你應該看一看。
Google?—— 沒錯嗽上，我經常上網搜索次舌。關于某個 bug 的信息，如何做某件事（有時會是很基礎的事情）兽愤，軟件包和軟件庫的示例代碼和文檔（如果 DevDocs 沒收錄）彼念，我都會上網搜一搜。
MDN?—— 對任何 web 開發(fā)者來說這都是非常棒的資源浅萧。這個站點的部分內容可以在之前提到的 DevDocs 上找到逐沙，不過有些頁面只有 MDN 上有。我主要用它查詢一些關于可訪問性的內容洼畅，上面有不少討論這一主題的文章吩案。
StackOverflow?—— 經常 google 到上面的內容。如果有問題帝簇，多半能在上面找到答案徘郭。
GitHub?—— 某個軟件包我有疑問，或者想知道關于它的更多信息丧肴，我會到它的 GitHub 倉庫去翻 issue 和代碼残揉，通常能找到問題的答案，就像 StackOverflow芋浮。據(jù)我個人的經驗抱环，如果有關于某個特定軟件包的問題，在 GitHub 上翻到相關 issue 的幾率要高于在 StackOverflow 上找到相關問題（像 React 這類特別流行的庫例外）纸巷。當然镇草，我也使用 GitHub 的版本控制功能。
CSS
CSS-Tricks?—— 你能在上面找到大量有趣的文章和竅門瘤旨。這個網站上也有一個指南（Guides）欄目梯啤，包含關于特定 HTML、CSS裆站、JS 概念的深入講解条辟。我常常訪問這個站點更新關于網格布局的知識黔夭。不過其他指南也非常棒。這個站點絕對值得一看羽嫡。
CSS Reference?—— 如果需要更新 CSS 知識或者查下不熟悉本姥、不常用的屬性，我會訪問這個站點杭棵。上面對每個 CSS 屬性的講解很深入婚惫，給出的示例也很清楚，便于你理解這些屬性并應用于自己的項目魂爪。站點的作者是?Sara Soudain先舷。
Can I Use?—— 如果你在意瀏覽器兼容性，希望負責任地使用前沿特性（漸進增強）滓侍，那么這是不可或缺的工具蒋川。
性能優(yōu)化
SVGOMG?—— 從設計師那里收到一份為 web 優(yōu)化的 SVG 文件，這種事情實在太罕見撩笆。所以我會用 SVGOMG 優(yōu)化 SVG捺球，效果十分驚人。這是?SVGO?的網頁版夕冲，所以你也可以使用相應的命令行工具壓縮 SVG氮兵。
Shrinkme.app?—— 使用這個網頁應用優(yōu)化圖像文件十分快捷方便。開箱即用歹鱼，支持批量上傳泣栈，效果相當不錯。
Sqoosh?—— 需要將圖片壓縮到極致弥姻，或者創(chuàng)建 webp 格式的圖像文件的時候南片，我會使用這個網站。你可以用它提供的大量選項調出滿意的效果庭敦。你也可以用它縮放圖像或是轉換圖像格式铃绒。它用了很多前沿技術（當初 Google Chrome 團隊做這個工具是為了演示現(xiàn)代瀏覽器的功能），所以你需要使用 Chrome 或基于 Chromium 的瀏覽器（Opera螺捐、Brave 等）。我上次試過矮燎，在 Firefox 下這個站點并不能正常工作定血。
Icomoon app?—— 我需要創(chuàng)建定制圖標集時會用這個工具〉猓可以選擇現(xiàn)有圖標（免費圖標和付費圖標）澜沟，也可以上傳自己的圖標。接著就可以生成相應的圖標字體或 SVG 圖標文件（今時今日峡谊，后者是一個更好的選擇）茫虽。
Google Fonts?—— 需要創(chuàng)建定制 web 字體時刊苍，我會首先訪問 Google Fonts。我通常會下載所需文件濒析，然后自行托管正什，這樣性能更好。Google Fonts 有一個很棒的特性号杏，允許只編碼需要用到的字符婴氮。
Glyphhanger?—— 減少文件大小是提升網站性能的最佳途徑之一。Web 字體經常包含很多我們不需要的字形盾致，所以我會用?Glyphhanger?子集化字體主经。你可以指定需要的 Unicode 區(qū)段和字符，Glyphanger 會創(chuàng)建一個只包含相應字符的字體文件庭惜。它也可以將?.ttf?文件轉為其他更適合 web 的格式罩驻，比如?.woff?和?.woff2。需要花一點功夫正確使用這個工具护赊，不過我覺得存在字體性能問題時惠遏，這是一個值得考慮的選項。
Lighthouse?—— 我在發(fā)布網頁前會進行測試，Chrome 瀏覽器的 Lighthouse 是最常用的工具之一。它會檢查各方面的常見問題并給出評分昌罩，也會給出改進提示暇检。這是一個非常好的工具，可以初步檢查我在開發(fā)時是否遺漏了一些問題庭再。
Font style matcher?—— 定制字體加載后會切換字體，如果你希望這個切換不容易察覺，那么可以使用這個字體風格匹配器找到和定制字體類似的默認字體渺贤。
可訪問性
VoiceOver —— macOS 的默認屏幕閱讀器。需要花一點時間熟悉這個工具（我推薦這篇介紹文章）请毛，不過我努力在開發(fā)過程中時不時用下 VoiceOver志鞍。多虧這一點，我的項目中 aria 屬性和面向屏幕閱讀器的文本使用量大增方仿。使用 VoiceOver 后你會驚訝地發(fā)現(xiàn)一些日常使用的網頁組件為屏幕閱讀器用戶提供的上下文信息少得可憐固棚。
a11y guidelines?—— 通常我會盡量去找可訪問性良好的解決方案，不過有的時候還是不得不自己動手仙蚜，這時我會參考這個頁面此洲。這篇可訪問性指導原則詳細解釋了什么是可訪問性，為什么可訪問性很重要委粉，如何實現(xiàn)呜师。很多情況下，復制其中的示例代碼略作調整后即可應用于實際項目贾节。
WAI-ARIA specification?—— 我并不經常閱讀規(guī)范汁汗。如果我在讀規(guī)范衷畦，那么往往是在讀這一篇。其中包含大量關于如何使用 aria 角色和屬性的有價值信息知牌。要我說祈争，任何嚴肅對待可訪問性的開發(fā)者，都需要讀下這篇規(guī)范送爸。
值得一提
最后列下個人覺得挺好用但又沒那么常用的工具铛嘱。
Responsive breakpoints generator?—— 手動創(chuàng)建響應式圖像的多種變體很痛苦。用這個工具就很方便袭厂。
HTML Arrows?—— 各種符號的 Unicode 碼墨吓、HTML 十六進制編碼、HTML 實體編碼纹磺、HTML 實體帖烘。
Char reference?—— 類似上一個工具，但顯示的信息更少橄杨，主要顯示 HTML 實體秘症。
Typography cheatsheet?—— 講解常用的字體排印規(guī)則和問題。
Modular scale?—— 設計網頁時我通常使用這個工具選擇模塊化的縮放方案式矫。如有興趣了解更多關于這個主題的內容乡摹，請參考?A List Appart 上的這篇文章?和?Tim Brown 在 Build Conf 2010 上的演講。
CSS gradient generetor?—— 創(chuàng)建漸變背景的在線工具采转。
Smooth shadow generator?—— 為網站添加美觀的陰影聪廉。
Bezier curve generator?—— 定制 CSS 的立方貝塞爾曲線定時函數(shù)。
Easing functions?—— 各種緩動函數(shù)故慈，可用于 CSS 動畫和變換板熊。
ngrok?—— 需要向別人展示作品或者測試不同設備上的效果時，我會使用 ngrok察绷。ngrok 可以將本地運行的服務暴露到公網上干签。不過有的時候配合 Browserstack 的 localhost 擴展時不能工作。
sharing buttons?—— 如果你只需要一個簡單的分享按鈕拆撼，不想用 JS容劳，不想折騰追蹤用戶的復雜邏輯，那么這個工具特別好用闸度。
Unix timestamp converter?—— unix 時間戳轉換器鸭蛙。
CSS to JS converter?—— 可以將 CSS 轉成 JS，也可以將 JS 轉回 CSS筋岛。基于 CSS-in-JS 庫開發(fā)時這個工具十分方便晒哄。
Browser default styles?—— 常見瀏覽器的默認樣式睁宰。
結語
以上就是我在工作中使用的提高效率的工具肪获，希望能幫你發(fā)現(xiàn)一些有用的工具。歡迎在?Twitter?上向我反饋柒傻，包括推薦其他好用的工具孝赫。
如果你依然在編程的世界里迷茫，不知道自己的未來規(guī)劃红符，可以加入前端學習交流q-u-n-：545667817?在里面可以與大神一起交流并走出迷茫青柄。新手、進階预侯≈驴可進群免費領取學習資料，看看前輩們是如何在編程的世界里傲然前行萎馅。
