前端 web 開發是一個令人興奮的領域，越來越多(duō)的需求，形成了一個高薪的職業。同時，Web 領域還有(yǒu)很(hěn)多(duō)可(kě)靠的工(gōng)作(zuò)，使得 Web 開發者能(néng)夠更加高效的工(gōng)作(zuò)。

  下面是我在日常前端開發中(zhōng)經常用(yòng)到的 12 個工(gōng)具(jù)，分(fēn)享給大家，希望能(néng)對大家有(yǒu)所幫助。

  1. Wappalyzer — 1,000,000+

  這個工(gōng)具(jù)可(kě)以讓你了解到某個網站是用(yòng)什麽搭建的，即它的内容管理(lǐ)系統、電(diàn)子商(shāng)務(wù)平台或營銷自動化工(gōng)具(jù)。研究如何創建一個網站，這是一個很(hěn)棒的工(gōng)具(jù)。

  它還創建了使用(yòng)某些技(jì )術的網站列表，這些技(jì )術可(kě)以幫助你了解如何構建客戶的網站。準備大型項目時，我無數次地使用(yòng)這個工(gōng)具(jù)。

  2. Window Resizer — 600,000+

  響應式設計是現代網站最重要的特性之一。你需要測試你的網站是否可(kě)以在各種各樣類型的設備上查看。我使用(yòng) Window Resizer 來調整我的網頁(yè)浏覽器窗口的大小(xiǎo)，以模拟不同的屏幕分(fēn)辨率。

  然後你可(kě)以看到你的布局在特定分(fēn)辨率下的外觀。你可(kě)以自定義分(fēn)辨率、設置窗口寬度和高度、窗口位置等。

  3. Marmoset — 10,000+

  程序員工(gōng)作(zuò)的一部分(fēn)就是向客戶或上級展示他(tā)們的代碼，但是常規的屏幕截圖可(kě)能(néng)不那麽吸引眼球，所以你要讓它們變得生動起來。我用(yòng) Marmoset 為(wèi)我的代碼拍了一些很(hěn)酷的快照，然後把這些快照放在我的幻燈片上，從而給人留下好印象。

  4. Web Developer Checklist— 40,000+

  作(zuò)為(wèi)一個前端開發者，很(hěn)容易忘記需要做的每一件事。當你在截止時間前急着完成項目的時候，你可(kě)能(néng)跳過了關鍵的步驟。這就是 Toptal 的 Web Developer Checklist，它可(kě)以節省你的時間。

  我使用(yòng) Web Developer Checklist 來确保我考慮到每個項目中(zhōng)的所有(yǒu)基本點。它提供了前端 web 開發中(zhōng)最重要步驟的清單。它還分(fēn)析網頁(yè)中(zhōng)是否存在違反最佳實踐的情況，以便你可(kě)以修複這些問題。

  5. Code Cola: Source Code Viewer — 30,000+

  如果你使用(yòng) Chrome 并且想要在頁(yè)面上編輯 CSS，那麽可(kě)以使用(yòng)審查元素特性(譯者注：Google Chrome 浏覽器打開網頁(yè)後，點擊右鍵出現的菜單：Inspect/ 審查)，但是它可(kě)能(néng)太過于靈活。Code Cola 是一個 Chrome 擴展，使用(yòng)起來容易得多(duō)。

  這是 Chrome 上最好的 CSS 編輯器，對初學(xué)者有(yǒu)特别友好的界面。

  6. CSSViewer — 100,000+

  如果你隻需要查看網頁(yè)上的 CSS 屬性，CSSViewer 非常棒。隻需單擊圖标并将光标懸停在要檢查的任何元素上，就可(kě)以看到它的 CSS 屬性。

  我發現這比 Chrome 的 Inspect 元素更快更容易使用(yòng)，因為(wèi)它有(yǒu)懸停特性。

  7. JSONView —1,000,000+

  JSON 經常用(yòng)于那些需要處理(lǐ)數據傳輸的網站，任何前端開發者都需要掌握并熟悉它。使用(yòng) JSON 時，通常需要查看和驗證頁(yè)面上的 JSON 文(wén)檔。

  JSONView 是一個簡單的工(gōng)具(jù)。多(duō)年來，我學(xué)到了簡單至上，沒有(yǒu)比 JSONView 更簡單的了。

  8. Lighthouse — 600,000+

  如今，自動化越來越成為(wèi)前端開發的必要條件。Lighthouse 是一個開源的自動化工(gōng)具(jù)，用(yòng)于提高網頁(yè)質(zhì)量。你可(kě)以使用(yòng)它來檢測頁(yè)面性能(néng)、可(kě)訪問性、搜索引擎優化 SEO 等等。

  現在，我不會在不使用(yòng) Lighthouse 的情況下進行前端項目的開發。它以各種方式幫助我改進網頁(yè)。

  9. Clear Cache — 800,000+

  每當需要清除網頁(yè)浏覽器上的緩存時，通常必須手動轉到“設置”頁(yè)。這是前端開發者經常做的一項任務(wù)，用(yòng)于測試他(tā)們正在處理(lǐ)的網頁(yè)。

  用(yòng)一個 Chrome 擴展來做這件事，更有(yǒu)效率。我一直在使用(yòng) Clear Cache 擴展，隻需單擊一下就可(kě)以完成，避免浪費寶貴的時間。

  10. Cookie Manager — 20,000+

  擁有(yǒu)一個好的 cookie 管理(lǐ)器是前端開發的另一個關鍵的工(gōng)具(jù)，尤其是當你的網站處理(lǐ)數據時。Cookie Manager 使這個過程更加簡單和高效。

  有(yǒu)很(hěn)多(duō) cookie 管理(lǐ)器，我發現這個 cookie 管理(lǐ)器适合我的工(gōng)作(zuò)流程。它不僅是為(wèi)前端開發者設計，也适合有(yǒu)隐私意識的 web 用(yòng)戶。

  11. LiveReload: Preview Tool — 100,000+

  你可(kě)能(néng)想确切地知道你的網頁(yè)在背後做了什麽，比如它在使用(yòng)時會改變什麽文(wén)件。LiveReload 是一個很(hěn)好的預覽工(gōng)具(jù)。

  我用(yòng) LiveReload 查看我的網頁(yè)到底在做什麽。它讓我更好地了解我的網頁(yè)是如何工(gōng)作(zuò)的。如果出錯了，我能(néng)做些什麽。

  12. Postman — 3,000,000+

  最後，我們來看看 API。如今，前端開發者必定要處理(lǐ) API，以便将頁(yè)面與各種 web 服務(wù)集成在一起。整體(tǐ)上看，為(wèi)它編寫代碼并不是最簡單的事情，因此需要一個能(néng)夠讓你更有(yǒu)效的工(gōng)具(jù)。

  這是簡化 API 構建過程的一個很(hěn)好的工(gōng)具(jù)，它還簡化了團隊協作(zuò)。